Hi , I ' m the DOM ! Script away !</ p > < script src =" http :// ajax . googleapis . com / ajax / libs / jquery / 1.7.2 / jquery . min . js "></ s cript >
< script > alert ( jQuery (' p '). text ()); </ script > </ body > </ html >
If I were to place the < script > before the < p > element , it would execute before the browser had loaded the < p > element . This would cause jQuery to assume the document does not contain any < p > elements . However , if I were to use the jQuery custom ready () event , then jQuery would not execute the code until the DOM was ready . But why do this , when we have control over the location of the < script > element in the document ? Placing jQuery code at the bottom of the page avoids having to using the ready () event . In fact , placing all JavaScript code at the bottom of a page is a proven performance strategy .
Grokking jQuery chaining
Once you have selected something using the jQuery function and created a wrapper set , you can actually chain jQuery methods to the DOM elements contained inside the set . Conceptually , jQuery methods continue the chain by always returning the jQuery wrapper set , which can then be used by the next jQuery method in the chain . Note : Most jQuery methods are chainable , but not all .
You should always attempt to reuse the wrapped set by leveraging chaining . In the code below , the text (), attr (), and addClass () methods are being chained .
Sample : sample6 . html
<! DOCTYPE html > < html lang =" en "> < body > < a ></ a > < script src =" http :// ajax . googleapis . com / ajax / libs / jquery / 1.7.2 / jquery . min . js "></ script > < script > ( function ($) { $(' a '). text (' jQuery ') // Sets text to jQuery , and then returns $(' a '). . attr (' href ', ' http :// www . jquery . com /') // Sets the href attribute and then returns
$(' a ').
. addClass (' jQuery '); // Sets class and then returns $(' a '). })( jQuery ) </ script > </ body > </ html >
20