Thread of jQuery! :)

@praveenkumar-66Ze92 • Sep 28, 2024

Sep 28, 2024

1.0K

Hey Guys,
Right now the buzz word in the internet and web is none other than jQuery. Web developers tackle their problem of cross-browser compatibility, and bringing in effects, using this simple user friendly library. I guess there are a couple of web developers and I hope it would be useful not only to them, but also to those who are interested! 😀

Like 0 Replies 9

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

CrazyEngineers powered by Jatra Community Platform

PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 5, 2011

This is taken from a great book:

The jQuery JavaScript framework is a rising star in the world of web development. JavaScript frameworks in general have grown to become immensely popular in the past few years in parallel with the ever-increasing presence of JavaScript-driven, so-called Web 2.0 websites that make heavy use of technologies like AJAX and JavaScript in general for slick graphical enhancements that would be impossible or much more cumbersome to incorporate without JavaScript.

jQuery’s mission as a JavaScript library is simple - it strives to make the lives of web developers easier by patching over certain portions of cross-browser development and by making other tasks commonly needed by developers much easier. jQuery has the real, proven ability to reduce many lines of plain-vanilla JavaScript to just a few lines, and, in many cases, just a single line. jQuery strives to remove barriers to JavaScript development by removing redundancy wherever possible and normalizing cross-browser JavaScript development in key areas where browsers would otherwise differ, such as Microsoft’s Event API and the W3C Event API, and other, more remedial tasks like getting the mouse cursor’s position when an event has taken place.

jQuery is a compact, lightweight library that currently works in Microsoft’s Internet Explorer browser from version 6 on, Firefox from version 1.5 on, Safari from version 2.0.2 on, Opera from version 9 on, and Google’s new Chrome browser from version 0.2 on. Getting started with jQuery is very easy - all you have to do is include a single link of markup in your HTML or XHTML documents that includes the library.
I guess you would have a great time experimenting things out here. 😀 All the best! 😀

0

PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 5, 2011

Example 1

Example 1: Installing and Testing jQuery
1. Download the jQuery script from #-Link-Snipped-#.
2. Enter the following XHTML document, and save the document as eg1.htm. Save the jQuery library to the same folder as eg1.htm using the name #-Link-Snipped-#.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="en-us" />
        <title>Link</title>
        <script type="text/javascript"
            src="jQuery.js">
        </script>
        <script type="text/javascript">
            if ($) {
              $(document).ready(
                function() {
                  $('p').addClass('tmpFrameworkLoaded');
                  $('p').text('jQuery successfully loaded and running!');
                }
              );
            }
        </script>
        <style type="text/css">
            body {
                font: 16px sans-serif;
            }
            p {
                color: red;
                border: 1px solid red;
                padding: 5px;
                margin: 5px;
            }
            p.tmpFrameworkLoaded {
                color: green;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        
            jQuery is not loaded.
        
    </body>
</html>

Please say your experiment results. 😀
I will explain the code, once I am home. 😀
I have my graduation day today! 😛

PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 6, 2011

Features of jQuery!

Let us see the features of jQuery
❑ jQuery makes iterating and traversing the DOM much easier via its various built-❑❑ in methods for
doing the same.
❑ jQuery makes selecting items from the DOM easier via its sophisticated, built-in ability to use
selectors, just like you would use in CSS.
❑ jQuery makes it really easy to add your own custom methods via its simple-to-understand
plug-in architecture.
❑ jQuery helps reduce redundancy in navigation and UI functionality, like tabs, CSS and markupbased
pop-up dialogues, animations, and transitions, and lots of other things.

0
Deepika Bansal

@deepika-jf1ysv • Mar 6, 2011

Thanks a ton for this post mate. Very helpful for the beginners like me.
Keep posting more stuff like this.

0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 6, 2011

Sure, working on the other topics... Pls try the example and say how is it... Whether working or not... 😀

0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 6, 2011
Example 1 Explained

In the preceding example, you installed and tested your installation of the jQuery framework. The XHTML document references a style sheet and a test JavaScript. The XHTML document contains just a single <p> element that contains the text “jQuery is not loaded.” The style sheet has a rule that makes that text red with a red border around the <p> element.

The JavaScript that you included first looks for the jQuery object, which is contained in a single dollar sign. That one dollar sign contains all of jQuery’s functionality, which makes jQuery statements really short. If that’s too short for you, you can also substitute “jQuery” for the dollar sign, which would have made that JavaScript example look like this:
```
if (jQuery) {
    jQuery(document).ready(
        function() {
            jQuery(‘p’).addClass(‘tmpFrameworkLoaded’);
            jQuery(‘p’).text(‘jQuery successfully loaded and running!’);
        }
    );
}
```
0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 6, 2011
XHTML and CSS Conventions

XHTML and CSS Conventions
It’s important that your web documents be well-organized, cleanly written, and appropriately named
and stored. This requires discipline and even an obsessive attention to the tiniest of details.
The following is a list of rules to abide by when creating XHTML and CSS documents:
❑ Catch errors in XHTML and CSS.
❑ When selecting ID and Class names, make sure that they are descriptive and are contained in a namespace. You never know when you might need to combine one project with another — namespaces will help you to prevent conflicts.
❑ When defining CSS, avoid using generic type selectors. Make your CSS more specific. This will also help with preventing conflicts.
❑ Organize your files in a coherent manner. Group files from the same project in the same folder; separate multiple projects with multiple folders. Avoid creating huge file dumps that make it difficult to locate and associate files.
❑ Avoid inaccessible markup. Stay away from frames, where possible. Organize your markup using semantically appropriate elements. Place paragraphs in <p> elements. Place lists in <ul> or <ol> elements. Use <h1> through <h6> for headings, and so on.
❑ If you are able to, also consider the loading efficiency of your documents. For development, use small, modularized files organized by the component; combine and compress those modularized files for a live production site.

Setting MIME Type in XHTML
```
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=’https://www.w3.org/1999/xhtml’ xml:lang=’en’>
<head>
<meta http-equiv=’Content-Type’
content=’application/xhtml+xml; charset=UTF-8’ />
</head>
<body>
```
XHTML 1.0 documents are not typically served with the correct, intended MIME type. Rather, they are usually served as an HTML document - which isn’t technically illegal, as long as they are XHTML 1.0 documents. XHTML 1.1, on the other hand, must be served as application/xhtml+xml.

General Skeleton I follow
Get it from here: #-Link-Snipped-#
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

</body>
</html>
```
Even this is wrong! It uses text/html! 😔 But I have been following this for years! 😔 ... Without any problem... 😛

0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 6, 2011

Handling Errors in CSS

Errors in CSS
Errors in style sheets usually make themselves known by not displaying the style you applied.
However, errors in CSS can also be more subtle and difficult to spot. To catch errors in CSS, I recommend one of the two following approaches:
â Use Mozilla Firefox (or another browser that reports CSS errors), and look for CSS errors in the browserâs Error Console. In Firefox, thatâs located in Tools?Error Console.
â Use the W3Câs CSS validation service at #-Link-Snipped-#.

0
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Mar 6, 2011
JavaScript Conventions

JavaScript Conventions
In JavaScript, there are several things that should be considered bad practice and avoided:
❑ Include All Script in External Documents - JavaScript code should only be included in external script files. Script should not be embedded in markup documents or be included inline, directly on markup elements.
❑ Write Clean, Consistent Code - JavaScript code should be neatly formatted and organized in a consistent, predicable way.
❑ Namespace JavaScript Code - JavaScript variables, functions, objects, and the like should be namespaced to minimize potential namespace conflicts and collisions with other JavaScript applications.
❑ Avoid Browser Detection - Browser detection should be avoided where possible. Instead, detect specific browser features.

Include All Script in External Documents
Part of making JavaScript non-obtrusive means making JavaScript complementary and supplemental, rather than required and mandatory. It should be noted why this is the best approach.
Consider the following code example:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type"
          content="application/xhtml+xml; charset=us-ascii" />
    <title>Inline JavaScript</title>
    <link rel='stylesheet' type='text/css' href='style.css' />
</head>

<body>
    
        <img src='pumpkin.jpg' alt='Pumpkin' />
        <a href='javascript:void(0);'
           onclick='window.open(
               "pumpkin.jpg",
               "picture",
               "scrollbars=no,width=300,height=280,resizable=yes"
           );'>Open Picture</a>
    
</body>
</html>
```
Combine the preceding markup with the following style sheet:
```
img {
    display: block;
    margin: 10px auto;
    width: 100px;
    border: 1px solid rgb(128, 128, 128);
}
body {
    font: 14px sans-serif;
}
p {
    width: 150px;
    text-align: center;
}
```
You would get something like... Will upload it shortly.

0