Use jQuery to manage selection results_jquery

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

1. Get the number of elements.

In jQuery, you can get the number of elements in the selector through the size() method, which is similar to the length attribute in an array and returns an integer value, for example:

$("img").size()
Get the number of all images on the page

The following is an example of adding div blocks by continuously clicking and calculating the

blocks in the page.

Copy code The code is as follows:

")); //Add a div block
                    $("#number").html(i);
            }
                                                                                         

There are a total of 0 DIV blocks in the page. Click to add

2. Extract elements

In the selector in jQuery, if you want to extract an element, the most direct way is to use square brackets plus a serial number, for example;

$("img[title]")[1]

Get the second element in all img tags that have the title attribute set. jQuery also provides the get(index) method to extract elements. The following code is completely equivalent to the above

$("img[title]")get(1)

When the get method does not set any parameters, it can convert the element into an array of element objects, as in the following example:

Copy code The code is as follows:

       

"));
            }
            $(function(){
                var aDiv = $("div").get();//转化为div对象数组
                displayleb(aDiv.reverse());
            });
       
       

1

       

2

       

3

       

4

       

5

       

6

上面代码将页面本身的6个

块用get()方法转化为数组，然后用数组反序reverse()，并传给displayleb()函数，再将其一个个现在页面中。

get(index)方法可以获取指定位置的元素，反过来，index(element)方法可以查找元素的element所处的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0])
以上取

标记在整个

标记列表所处的位置，并将该位置返回给整数iNum.如下举例index(element)方法的典型运用。

例：用index()方法获取元素的序号

复制代码 代码如下:

          

2

          

3

          

4

         

5

          

6

                  The div was clicked.

The above code block itself uses the this keyword to pass into the index() method, obtains its own serial number, and uses click() to add an event to display the serial number.

3. Add, delete and filter elements

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

$("img[alt]").add("img[title]")

The above code combines the image with the alt element set and the image with the title attribute set for unified dispatch by other methods. It is exactly the same as

$("img[alt],img[title]")

For example, you can add CSS attributes to the combined set of elements.

$("img[alt]").add("img[title]").addClass("altcss")

Contrary to the add() method, the not() method can remove certain elements from the element set to form a set

$("li[title]").not("[title*=isaac]")

The above code means that all tags with the title attribute set are selected, but the

whose title value contains "isaac" is not included.

Example:

Copy code The code is as follows:

       
       

       

       

       

       

       

       

以上的Jquery通过not()的方法去掉风格为"green"和"blueone"的

块，给剩下的div块加altcss样式。

not()方法所接收的参数都不能包含特定的元素，只能是通过通用的表达式例如下面的代码是错误的

$("li[title]").not("img[title*=isaac]")
正确的写法是：

$("li[tile]").not("[title*=isaac]")
除了add()和not()外，jQuery还提供了更强大的filter()方法来筛选元素。filter()可以接受两种类型的参数，一种与not()方法一样，接受通用的表达式。代码如下:

$("li").filter("[title*=isaac]")
以上的代码表示:筛选出title值包含isaac字符串的li元素组合。

与

$("li[title*=isaac]")
所筛选的组合相同。

复制代码 代码如下:

       

       

       

       

       

       

In the above code, four of the class attributes are middle. Jq first adds css1 styles to all div blocks, and then uses the filter() method to add css2 styles to the divs containing middle in the class.

In the parameters of filter(), you cannot directly equal to match (=), you can only use pre-match (^=), post-match (&=), or any match (*=).

The other type of parameter of filter() is a function, which matches and retains the returned true element, otherwise the collection is excluded. Function parameters are very powerful and allow users to customize filtering functions.

For example:

Copy code The code is as follows:

The above jq execution:

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

4. Query and filter new element group

jq also provides some very useful method combinations to obtain new element combinations through queries. For example, find() method. Filter elements by matching selectors

$("p").find("span")

Indicates that the combination containing the tag under the

tag is found

Exactly equal to

Copy code The code is as follows:

$("span",$("p"))
$(function(){
$("p").find("span").addClass("css1");
});

Hello, how are you?

means adding css1 style to Hello.

In addition, you can also use the is() method to detect whether the specified element is included. For example, you can use the following code to detect whether the

block in the page contains an image.

var himg = $("div").is("img");

Just imagine, is() can also be used in combination with filter(), isn’t it very pleasant?

The above is the entire content of this article. Although it is a bit long, I still recommend that you read it carefully. I hope you will like it.