As all of you know JavaScript has regained its prestige in the past few years as a result of the significant interest in Ajax technologies and Rich Internet Applications. All client-side developers formulated their needs by seeking for strong JavaScript libraries in order strongly fix their difficult cross-browser problems and improve their web development methods.
jQuery belongs to these JavaScript libraries. It was developed to change radically
the way that web developers think about creating rich functionality in their pages. In this Web 2.0 time, we don’t need to spend time dealing simultaneously with the complexities of advanced JavaScript.
jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig (photo).
What we will need is to download jQuery here if we want to execute our scripts.
Using raw JavaScript can result in more than dozens of lines of code if you want for example to add dynamic functionality to your pages (Example: Apply a CSS class to each <tr> element of a table). The creators of jQuery specifically created the library to make common tasks trivial.
For example, designers will use JavaScript to “zebra-stripe” tables taking up to more than 10 lines of code (by following the famous pattern of: selecting an element or group of elements and operating upon those elements, hiding or revealing the elements, adding a CSS class to them, or modifying their attributes or animating them...).
Here’s how you accomplish this using jQuery, it is magical!
This script is using the following JS script:
How this works, this is your question?
As in CSS, jQuery is using the selectors not only the current ones, but also those which are not already fully implemented by most browsers. The nth-child selector used above is a good example of a more powerful selector defined in CSS3.
For example, the selector p a: refers to the group of all <a> elements in the HTML document that are nested inside a <p> element.
In jQuery, we use the same concept by coding this as: $("p a").
The $() function (or jQuery() function) returns a special JavaScript object containing an array of the DOM elements that match the selector.
Let’s now talk about the code we put in the HTML containing the “zebra-stripe” table.
1- First method:
A much better approach would be until the DOM has fully loaded (but only the DOM) before executing the code. And this is the aim of the following used function:
2- Second method:
This was a simple introduction to start dealing with this beautiful…jQuery.
In further posts, we will learn more about advanced jQuery sample examples.
Download the example of this post here.
Source : Wikipedia, jQuery site, jQuery in Action.
jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig (photo).What we will need is to download jQuery here if we want to execute our scripts.
Using raw JavaScript can result in more than dozens of lines of code if you want for example to add dynamic functionality to your pages (Example: Apply a CSS class to each <tr> element of a table). The creators of jQuery specifically created the library to make common tasks trivial.
For example, designers will use JavaScript to “zebra-stripe” tables taking up to more than 10 lines of code (by following the famous pattern of: selecting an element or group of elements and operating upon those elements, hiding or revealing the elements, adding a CSS class to them, or modifying their attributes or animating them...).
Here’s how you accomplish this using jQuery, it is magical!
$("table tr:nth-child(even)").addClass("striped");The code can be deciphering like the following: It identifies every even row ( element) in all of the tables on the page and add the CSS class striped to each of those rows. By applying the desired background color to these rows via a CSS rule for class striped. How do you find it? Is it powerful?
This script is using the following JS script:
<script type="text/javascript" src="jquery-1.2.1.js">I have got this tremendous sample from the code here of the jQuery in Action book (you can find this example only in the link at the end of the post).
How this works, this is your question?
As in CSS, jQuery is using the selectors not only the current ones, but also those which are not already fully implemented by most browsers. The nth-child selector used above is a good example of a more powerful selector defined in CSS3.
For example, the selector p a: refers to the group of all <a> elements in the HTML document that are nested inside a <p> element.
In jQuery, we use the same concept by coding this as: $("p a").
The $() function (or jQuery() function) returns a special JavaScript object containing an array of the DOM elements that match the selector.
Let’s now talk about the code we put in the HTML containing the “zebra-stripe” table.
<script type="text/javascript">I don’t would like to waste time talking about the disadvantages of the onload handler of the window instance. But a very good thing to know is that there is a big difference between the two following points:
$(function() {
$("table tr:nth-child(even)").addClass("striped");
});
</script>
1- First method:
window.onload = function() {This causes the JavaScript code to execute BUT after the document is fully loaded. You can imagine if you have big images embedded in the same page, the script has to wait until all those embedded elements will be fully loaded in order to be executed.
$("table tr:nth-child(even)").addClass("even");
};
A much better approach would be until the DOM has fully loaded (but only the DOM) before executing the code. And this is the aim of the following used function:
2- Second method:
$(function() {By putting the $() function, we simply instruct the browser to wait until the DOM has fully loaded before executing the code. No wasted time!
$("table tr:nth-child(even)").addClass("even");
});
This was a simple introduction to start dealing with this beautiful…jQuery.
In further posts, we will learn more about advanced jQuery sample examples.
Download the example of this post here.
Source : Wikipedia, jQuery site, jQuery in Action.
How to encourage this blog if you like it:
- Promote our sponsors;
- Add any kind of comment or critic;
- Ask me directly by email if you prefer.
I am 
