� Select elements from the DOM using CSS expressions and custom jQuery expressions, as well as selecting elements using DOM references: jQuery(' p > a ') or jQuery(': first ') and jQuery( document. body)
�
Create HTML on the fly by passing HTML string structures or DOM methods that create DOM elements: jQuery('< div id =" nav "></ div >') or jQuery( document. createElement(' div ')
� A shortcut for the ready() event by passing a function to the jQuery function: jQuery( function($){ /* Shortcut for ready() */ })
Each of these usages is detailed in the code example below.
Sample: sample9. html
<! DOCTYPE html > < html lang =" en "> < body >
< script src =" http:// ajax. googleapis. com / ajax / libs / jquery / 1.7.2 / jquery. min. js "></ script >
< script > jQuery( function($){ // Pass jQuery a function. // Pass jQuery a string of HTML. $('< p ></ p >'). appendTo(' body '); // Pass jQuery an element reference. $( document. createElement(' a ')). text(' jQuery '). appendTo(' p '); // Pass jQuery a CSS expression. $(' a: first '). attr(' href ', ' http:// www. jquery. com '); // Pass jQuery a DOM reference. $( document. anchors [ 0 ]). attr(' jQuery ');
}); </ script > </ body > </ html >
Grokking when the keyword this refers to DOM elements
When attaching events to DOM elements contained in a wrapper set, the keyword this can be used to refer to the current DOM element invoking the event. The following example contains jQuery code that will attach a custom mouseenter event to each < a > element in the page. The native JavaScript mouseover event fires when the cursor enters or exits a child element, whereas jQuery ' s mouseenter does not.
Sample: sample10. html
<! DOCTYPE html > < html lang =" en "> < body > < a id =" link1 "> jQuery. com </ a > < a id =" link2 "> jQuery. com </ a > < a id =" link3 "> jQuery. com </ a >
23