Detailed analysis of commonly used selectors in jQuery

This article shares the specific code of jQuery's commonly used selectors for your reference. The specific content is as follows

1. jQuery: (When using jQuery, you must indicate the version number we use)

It is a class library that uses native JS to encapsulate commonly used methods (solve browser compatibility issues)

2. Methods provided in jQuery

Selector

By passing the content of the corresponding rule (ID, tag name, style class name...), the elements/element collection specified in the page are obtained.

Element selection is the prerequisite for all operations. One of the most powerful and commonly used functions of the $() function in jQuery is to use selectors to select DOM elements. Here is a summary of some very commonly used jquery selectors.

1. Basic structure of jQuery selector

$('选择器')
$('选择器 上下文')

2. Using basic css selector

About basic css selection You can take a look at the detailed explanation of css selector. Here are some of the most basic ways to use css selectors.

2.1 Element Selector

$('a'); //选择所有a元素
$('div');  //选择所有div元素
$('p');  //选择所有p元素

Of course, if you want, jQuery also allows us to use commas to combine multiple selectors into one selector:

$('a,div,p');

This achieves the same effect as the above three lines of code.

2.2 Class selector

$('div.myClass');  //所有拥有myClass类的div元素
$('p.myClass');  //所有拥有myClass类的p元素
$('*.myClass');  //拥有myClass类的所有类型元素

Normally, when you want to select all elements with a certain class, the wildcard * will be omitted, as follows:

$('.myClass');  //拥有myClass类的所有类型元素

There is nothing wrong with this, and it is also our common way of writing.

In addition, some elements may have more than one class:

$('div.myClass1.myClass2');

This will select div elements that have both myClass1 and myClass2 classes. Of course, the selected div element may also have other classes, that is to say, the following div will be selected without any doubt:

...

2.3 ID Selector

$('table#myID');  //id为myID的table元素

3. Combined use of context selectors

3.1 Descendant selectors

Start from here and start some slightly more difficult selections, such as:

$('ul.myUl li');

This will select all li sub-elements that have ul elements of myUl class. It sounds like a mouthful. Look at the following code:

html

  

    

      
1
      
2
      
3
    
  
  

    

      
one
      
two
      
three
    
  

Here, through $('ul.myUl li'), all li elements will be selected, note that all! Because all li elements are descendants of f60634f48856078cd2fc498343db542a...929d1f5ca49e04fdcb27f9465b944689. Whether you are a direct descendant, a grandchild or a great-grandchild.

In fact, the above example is not enough to fully explain the meaning of all li sub-elements of the ul element with myUl class. Because there may be more than one ul element with the myUl class, as follows:

html

  

    

      
1
      
2
      
3
    
  
  

    

      
one
      
two
      
three
    
  

  

    

      
一
      
二
      
三
    
  

$('ul.myUl li') will also select all li elements in the above code. Because all li elements in the above code are child elements of ul.myUl, although there are 2 ul.myUl. Now you should be able to understand the meaning of all li sub-elements that have the ul element of the myUl class!

The descendant selector can actually not only select the descendants of a certain element, but also the descendants of the descendants of a certain element (which sounds a bit awkward), as follows:

$('ul.myUl li a');

This selects all the descendants of myUl All a descendant elements of all li descendant elements of the class's ul element. Although there is one more descendant of xx, it is the same as the above analysis, so I won’t go into details.

The above is the detailed content of Detailed analysis of commonly used selectors in jQuery. For more information, please follow other related articles on the PHP Chinese website!