Use jQuery to manage selection results, and use jQuery to manage selection

Use jQuery to manage selection results, and use jQuery to manage selection

The elements selected by jQuery are very similar to arrays. They can be processed using a series of methods provided by jQuery, including length, searching for an element, and intercepting a paragraph.

1. Obtain the number of elements.

In jQuery, you can use the size () method to obtain the number of elements in the selector. It is similar to the length attribute in the array and returns an integer. For example:

$ ("Img"). size ()
Obtain the number of images on the page.

The following is an example. You can click to add a div block and calculate the <div> block on the page.

Copy codeThe Code is as follows:
<Style>
Div {
Border: 1px solid #003a75;
Background-color: # FFFF00;
Margin: 5px;
Padding: 20px;
Text-align: center;
Height: 20px;
Width: 20px;
Float: left;
}
}
</Style>
<Script type = "text/javascript">
Document. onclick = function (){
Var I = $ ("div"). size () + 1; // get the number of divs (no div block yet)
$ (Document. body). append ($ ("<div>" + I + "</div>"); // Add a div Block
$ ("# Number" pai.html (I );
}
</Script>

The page contains a total of <span id = "number"> 0 </span> DIV blocks. Click to add

2. Extract Elements

In jQuery, if you want to extract an element from a selector, the most direct method is to use square brackets and serial numbers, for example;

$ ("Img [title]") [1]
Obtains the second element of all the img tags with the title attribute set. JQuery also provides the get (index) method to extract elements. The following code is exactly the same as the above Code.

$ ("Img [title]") get (1)
The get method can convert an element into an array of element objects without setting any parameters, as shown in the following example:

Copy codeThe Code is as follows:
<Style>
Div {
Border: 1px solid #003a75;
Background-color: # FFFF00;
Margin: 5px;
Padding: 20px;
Text-align: center;
Height: 20px;
Width: 20px;
Float: left;
}
}
</Style>
<Script type = "text/javascript">
Function displayleb (ndiv ){
For (var I = 0; I <ndiv. length; I ++)
$ (Document. body ). append ($ ("<div style = 'background:" + ndiv [I]. style. background + "; '>" + ndiv [I]. innerHTML + "</div> "));
}
$ (Function (){
Var aDiv = $ ("div"). get (); // convert it to an array of div objects
Displayleb (aDiv. reverse ());
});
</Script>
<Div style = "background: # FFFFFF"> 1 </div>
<Div style = "background: # CCCCCC"> 2 </div>
<Div style = "background: #999999"> 3 </div>
<Div style = "background: #666666"> 4 </div>
<Div style = "background: #333333"> 5 </div>
<Div style = "background: #000000"> 6 </div>

The code above converts the six <div> blocks of the page into an array using the get () method, then returns the array reverse order reverse (), and passes it to the displayleb () function, then, you can add them to the page one by one.

The get (index) method can obtain the elements at the specified position. In turn, the index (element) method can find the position of the element. For example

Var iNum = $ ("li"). index ($ (li [title = isaac] ") [0])
Take the <li titile = "isaac"> mark the position of the entire <li> tag list and return the position to the integer iNum. the following is an example of the typical use of the index (element) method.

For example, use the index () method to obtain the sequence number of an element.

Copy codeThe Code is as follows:
<Style>
Div {
Border: 1px solid #003a75;
Background-color: # FFFF00;
Margin: 5px;
Padding: 20px;
Text-align: center;
Height: 20px;
Width: 20px;
Float: left;
}
}
</Style>
<Script type = "text/javascript">
$ (Function (){
// Div click () Add a click Function
$ ("Div"). click (function (){
// Pass in the this keyword to obtain its serial number.
Var index = $ ("div"). index (this) + 1;
$ ("# Display" pai.html (index. toString ());
})
});
</Script>
<Div style = "background: # FFFFFF"> 1 </div>
<Div style = "background: # CCCCCC"> 2 </div>
<Div style = "background: #999999"> 3 </div>
<Div style = "background: #666666"> 4 </div>
<Div style = "background: #333333"> 5 </div>
<Div style = "background: #000000"> 6 </div>
Click the <span id = "display"> </span> div.

The code block itself uses the this keyword to pass in the index () method, get its serial number, and use click () to add events to display the serial number.

3. add, delete, and filter elements

In addition to obtaining the selected element, jQuery also provides a series of methods to modify the element set, such as adding an element using the add () method.

$ ("Img [alt]"). add ("img [title]")
The above code combines the images with alt elements and those with title attributes for unified O & M by other methods. It is equivalent

$ ("Img [alt], img [title]")
For example, you can add css attributes to the element set after the combination.

$ ("Img [alt]"). add ("img [title]"). addClass ("altcss ")
Opposite to the add () method, the not () method can remove some elements in the element set to form a set.

$ ("Li [title]"). not ("[title * = isaac]")
The code above indicates that all the tags with the title attribute selected, excluding the <li> with the title value containing "isaac.

Example:

Copy codeThe Code is as follows:
<Style>
Div {
Border: 1px solid #003a75;
Background-color: # FFFF00;
Margin: 5px;
Padding: 20px;
Text-align: center;
Height: 20px;
Width: 20px;
Float: left;
}
. Altcss {
Border: 2px solid #000000;
}
}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ("Div"). not (". green, # blueone"). addClass ("altcss ");
});
</Script>
<Div> </div>
<Div id = "blueone"> </div>
<Div> </div>
<Div class = "green"> </div>
<Div class = "green"> </div>
<Div class = "gray"> </div>
<Div> </div>

The above Jquery removes the <div> block with the style "green" and "blueone" using the not () method, and adds the altcss style to the remaining div block.

The parameters received by the not () method cannot contain specific elements. They can only be passed through common expressions. For example, the following code is incorrect.

$ ("Li [title]"). not ("img [title * = isaac]")
The correct statement is as follows:

$ ("Li [tile]"). not ("[title * = isaac]")
In addition to add () and not (), jQuery also provides a more powerful filter () method to filter elements. Filter () can accept two types of parameters. One method, like the not () method, accepts a common expression. The Code is as follows:

$ ("Li"). filter ("[title * = isaac]")
The code above indicates that the li element combination with the title value containing the isaac string is filtered out.

And

$ ("Li [title * = isaac]")
The filtered combination is the same.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("Div"). addClass ("css1"). filter ("[class * = middle]"). addClass ("css2 ");
});
</Script>

<Div> </div>
<Div class = "middle"> </div>
<Div class = "middle"> </div>
<Div class = "middle"> </div>
<Div class = "middle"> </div>
<Div> </div>

In the above Code, the four class attributes are middle. Jq adds the css1 style to all div blocks and then uses the filter () method, add the CSS 2 style to the div that contains the middle in the class.

In the filter () parameter, it cannot be equal to or equal to match (=) directly. It can only use the prefix (^ =) or suffix (& = ), or any match (* = ).

Filter () another type of parameter is a function, which is retained for matching the returned ture element; otherwise, the set is excluded. Function parameters are powerful and allow you to customize filter functions.

For example:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("Div"). addClass ("css1"). filter (function (index ){
Return index = 1 | $ (this). attr ("id") = "fourth ";
}). AddClass ("css2 ");
});
</Script>
<Div id = "first"> </div>
<Div id = "second"> </div>
<Div id = "third"> </div>
<Div id = "fourth"> </div>
<Div id = "th"> </div>

Run the preceding jq:

Add css1 to all the divs and then use the function returned by filter () to filter the first divs in the list (index is 1). The id is the div element of fourth and add css2.

4. query and filter new element groups

Jq also provides some useful method combinations to obtain new element combinations through queries. For example, the find () method. Filter elements by matching Selector

$ ("P"). find ("span ")
Indicates a combination of <span> tags found under the <p> tag

Completely equal

Copy codeThe Code is as follows:
$ ("Span", $ ("p "))
$ (Function (){
$ ("P"). find ("span"). addClass ("css1 ");
});

<P> <span> Hello </span>, how are you? </P>

Add a css1 style to Hello.

In addition, you can also use the is () method to check whether a specified element is contained. For example, you can use the following code to check whether the <div> block on the page contains an image.

Var himg = $ ("div"). is ("img ");
Imagine that is () can be used in combination with filter (), Isn't it cool?

The above is all the content in this article. Although it is a little long, we suggest you read it carefully and hope you will like it.