JQuery Tips (2)-You don't know about the $ () package set

The package set is always set-oriented.
I think this is easy to understand. The JQuery object encapsulated by $ () always appears in the form of a set, even if there is only one object in the packaging set.

<Div id = "a"> </div>
<Div id = "B"> </div>
<Script type = "text/javascript">
$ ("Div" ).html ("hi ");

</Script>
The content of the two divs selected above will be changed to "hi"

Sequence of elements in the package set
In the elements encapsulated by JQuery, the internal sequence contained in the packaging set is arranged from the beginning to the back according to the HTML stream, rather than the selection order:

<Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
Var Se = $ ("# B, # ");
Alert (Se. get (0). innerHTML );
Alert (Se. get (1). innerHTML );

</Script>
The code above shows that although B is selected first, "here is a" followed by "here is B" will pop up when alert is executed"

Conversion of JQuery objects and DOM

First, DOM is converted to JQuery object, which is easy to include in $. however, it is worth noting that in the event of elements encapsulated by JQuery, this always points to the current object:

<Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
$ ("Div"). click (function (){
Alert (this. id); // this ö¸ Ï µ μ ± ç° µädom
});
</Script>
Converting elements in the JQuery packaging set into DOM is also very easy for JQuery, and JQuery's get method is used in most cases.

<Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
Var Jq = $ ("div ");
Alert (Jq. get (0). id); // alert ""
Alert (Jq. get () [0]. id); // alert "a" as well
Alert (Jq [0]. id); // alert ""

</Script>
As can be seen from the surface, adding an index as a parameter through the get method will return the DOM object of the index value. without adding a parameter, the whole array in the JQuery packing set will be returned.

Another simple method is to add an array symbol directly after the JQuery package set. You can regard the preceding Jq [0] as a simple method of Jq. get (0 :-)

Check the number of elements in the current JQuery package.
In many cases, we need to check the number of elements in the JQuery packaging set. We can directly use the length attribute of the packaging set (this attribute is not prompted in)

Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
Var Jq = $ ("div ");
Alert ($ ("Div"). length); // alert "2"

</Script>
This attribute can also be used directly to check whether the current package set is empty.

<Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
If ($ ("div"). length ){
Alert ("Not Empty ");
}
If ($ ("div"). get (0 )){
Alert ("Not Empty ");
}

</Script>
The preceding two alert statements are executed. The second method is to check whether the first element in the current package is empty to determine whether the package is empty.

In some specific situations, a collection is not always oriented"
Didn't we say we are always facing the collection just now? Why have we changed? Actually it is set-oriented, but it is not like this when using some JQuery methods for extraction, such as the following code:

<Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
Alert ($ ("div"). attr ("id "));

</Script>
The above Code only shows the id of the first div of alert. What should I do in this case? Right. Using JQuery's Each method, the each method traverses every element in the package set:

<Div id = "a"> here is a </div>
<Div id = "B"> here is B </div>
<Script type = "text/javascript">
$ ("Div"). each (function (){
Alert ($ (this). attr ("id "));
});

</Script>
The above code will execute two alert :-)