JQuery $() usage summary

This time I will bring you a summary of the usage of JQuery $(), what are the precautions when using JQuery $(), the following is a practical case, let's take a look.

Usage of JQuery $(): There are three main types, taking expressions, taking elements, and taking functions.

1, Tag selector$('p'), Class selector$('.myClass'), id selector $('#myId') is relatively simple, not much to say. But there is one thing - there is a difference between $('p>ul') and $('p ul').

$('p>ul') is the direct descendant of e388a4556c0f65e1904146cc1a846bee ff6d136ddc5fdfeffaf53ff6ee95f185; and $('p ul') searches for ff6d136ddc5fdfeffaf53ff6ee95f185 among all descendants of e388a4556c0f65e1904146cc1a846bee.
So, $('#sId>li') selects all 25edfb22a4f469ecb59f1190150159c6 child nodes with the id "sId". Even if the descendants of this 25edfb22a4f469ecb59f1190150159c6 still have 25edfb22a4f469ecb59f1190150159c6, they are not the ones it selects. The scope of the search (the DOM object found is only the DOM object of its own level.). And $('#sId li:not(.horizontal)') means that all the descendants of li in the class name "sId" do not have all elements of the horizontal class. ——not() here is a negation pseudo class.

What is returned here is a jQurey object, an array object. The length of this jQuery object can be obtained with .length().

2. What is in ] is the attribute of the element; it is a
attribute selector
There is no @ in [], which means that what is in [] is the descendant of the element. $('ul li') and $('ul[li]') both return a jQuery array, but their meanings are exactly the opposite. The former is to find all the descendants of 25edfb22a4f469ecb59f1190150159c6 under ff6d136ddc5fdfeffaf53ff6ee95f185, while the latter is to find the ff6d136ddc5fdfeffaf53ff6ee95f185 array whose descendants are 25edfb22a4f469ecb59f1190150159c6.
In XPath, if you want to find an attribute "starting with...", use ^=. If you want to find an input element whose name attribute starts with mail, use
$('input[@name^ ="mail"]')
To find an attribute that "ends with...", use $=
To find an attribute that has "no beginning or end", use *=
3, Selectors that do not belong to the above-mentioned CSS and XPath are custom selectors, represented by ":". The ones used here are: first, :last, :parent, :hidden, :visible, :odd, :even , :not('xxx'), ":eq(0)" (starts at 0), :nth(n), :gt(0), :lt(0), :contains("xxx")
For example: $('tr:not([th]):even') means the even-numbered items of all the descendants of the a34de1251f0d9fe1e645927f19a896e8 element that do not include the descendants of b4d429308760b6c2d20d6300079ed38e
4. There are a few more, simple No explanation

$('th').parent()—— 
$(&#39;td:contains("Henry")&#39;).prev()——内容包含有"Henry"的<td>的上一个节点 
$(&#39;td:contains("Henry")&#39;).next()——内容包含有"Henry"的<td>的下一个节点 
$(&#39;td:contains("Henry")&#39;).siblings()——内容包含有"Henry"的<td>的所有兄弟节点

There is another one, which is end(). This method must be used when a DOM node performs a certain action and wants to perform a similar action on the node related to it. , end() is used here. After using the end() method, what is returned is the parent node of the node that performs the action. For example

$(...).parent().find(...).addClass().end()

The node that performs the action here is find(...), which is an array Object, the action it takes is "addClass()", and then end() is used. At this time, the returned stuff points to the node pointed to by parent(), that is, the "addClass()" action is performed. The parent node of that array object.
5. To access DOM elements directly, you can use the get(0) method, such as
$('#myelement').get(0), which can also be abbreviated to $('#myelement')[0] ​​​​


I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate the width and height attributes of the page, visual area, screen, etc.

How to use Web Storage storage

The above is the detailed content of JQuery $() usage summary. For more information, please follow other related articles on the PHP Chinese website!