jquery Basic Learning 2--dom and jquery objects

1 <body>2         3         <p title= "Choose your favorite fruit." > Your favorite fruit is ?</p>4         <ul>5             <li id= "Apple" > Apple </li>6             <li> Orange </li>7             <li> Pineapple </li>8         </ul>9     </body >

ELEMENT nodes can be obtained through getElementsByTagName or getElementById in JavaScript, so that the resulting DOM element is a DOM object, and the DOM object can use the methods in JavaScript, as follows:

1 var // get DOM Object 2 3　　var objhtml = domobj.innerhtml; // use the properties in JavaScript--innerhtml

The jquery object is the object that is created after wrapping the DOM object through jquery, jquery is unique to jquery, and if an object is a jquery object, you can use the method in jquery.

Alert ($ (' #apple '). html ());

This code is equivalent to:

Alert (document.getElementById (' Apple '). InnerHTML);

1. Any method of the DOM object cannot be used in a jquery object, such as $ (' #id '). innerHTML and $ (' #id '). Checked and the like are all wrong and can be used $ (' #id '). HTML () and $ (' #id '). attr (" Checked ") to replace the jquery method.

2.DOM objects also cannot use jquery methods, such as document.getElementById (' Apple '). HTML () will also be error-only with document.getElementById (' Apple '). The innerHTML statement.

3. Using #id as a selector is not equivalent to the DOM object obtained by the jquery object instead of the document.getElementById (' id ').

jquery cannot use methods in the DOM, but if the methods provided by the JQuery object are not familiar, or if jquery does not encapsulate the desired method, there are two ways to handle the DOM object when it has to be used.

jquery provides two ways to convert a jquery object to a DOM object, that is, [index] and get (index).

1. The jquery object is an array-like object that can be obtained using the [index] method of the corresponding Dom object, the jquery code is as follows:

var $CR = $ ("#cr");    jquery object var cr = $CR [0];    Dom Object alert (cr.checked)    //Detect if this checkbox is selected

1. Another approach is provided by jquery itself, using the Get (index) method to get the corresponding Dom object, the jquery code is as follows:

1 var $cr = $ ("#cr");    // jquery Object 2 var cr = $cr. Get (0);    // DOM Object 3 alert (cr.checked)    // detect if this checkbox is selected

For a DOM object, just wrap the DOM object with $ () and you can get a jquery object by $ (DOM object) with the jquery code as follows:

1 var cr = document.getElementById ("Cr");    // DOM Object 2 var $cr = $ (CR);    // jquery Object 3 alert ($CR. Is (": checked"));    // jquery Way of judging

Is (": Checked") is a method in jquery that determines whether the jquery object is selected and returns a Boolean value.

jquery Basic Learning 2--dom and jquery objects