I think it's easy to understand that a jquery object wrapped in $ () always appears as a collection. Even if there is only one object in the packing set.
Copy Code code as follows:
<div id= "a" ></div>
<div id= "B" ></div>
<script type= "Text/javascript" >
$ ("div"). html ("HI");
</script>
The contents of the two div selected above will be changed to "HI"
Order of elements in the wrapper set
In the elements that are packaged in jquery, the inner order contained in the wrapper set is from backwards, rather than the order of selection, in the HTML stream:
Copy Code code as follows:
<div id= "A" >here is a</div>
<div id= "B" >here is b</div>
<script type= "Text/javascript" >
var Se = $ ("#b, #a");
Alert (se.get (0). InnerHTML);
Alert (Se.get (1). InnerHTML);
</script>
The code above can see that although B is selected First, it pops up "here is a" and then "here is B" when executing alert.
The transformation of jquery objects and Dom
First, the DOM is transformed into a jquery object, which is easy to include in $ (). But one thing to note is that in the event of an element that is then wrapped in jquery, this always points to the current object:
Copy Code code as follows:
<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 wrapper set to Dom is also easy for jquery, most of which use the jquery get method
Copy Code code as follows:
<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 "a"
Alert (Jq.get () [0].id); Alert "a" as OK
alert (jq[0].id);//alert "a"
</script>
From the surface, you can see that by adding an index to the Get method, the DOM object of the indexed value is returned, without arguments returning the entire array in the jquery wrapper set
An easy way to do this is to addends the group notation directly behind the jquery wrapper set, and you can think of the above jq[0] as a simple way to Jq.get (0):-)
Check the number of elements in the current jquery wrapper set
In many cases, you need to check the number of elements in the jquery wrapper set, and we can directly pass the length attribute of the wrapper set (this property is not prompted in VS)
Copy Code code as follows:
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 property can also be used directly to detect whether the current wrapper set is empty
Copy Code code as follows:
<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 top two alert is executed, and the second determines that the wrapper set is empty by detecting whether the first element in the current packing set is empty.
Wrapper sets are also "not always oriented to collections" in certain situations
Didn't you just say you were always facing the set, so what changed? It's really a collection-oriented, but it's not the case when you extract it in some way using jquery, like the following code:
Copy Code code as follows:
<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 will only alert the ID of the first div. So what happens in this situation? Yes, with each method of jquery, each method traverses each element in the wrapper set:
Copy Code code as follows:
<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 code above executes two alert:-)
