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

; and $('p ul') searches for
among all descendants of

.
So, $('#sId>li') selects all

• child nodes with the id "sId". Even if the descendants of this
• still have
• , 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

• under
  , while the latter is to find the
  array whose descendants are
  • .
    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 element that do not include the descendants of
    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!