search

Home >Web Front-end >JS Tutorial >Detailed analysis of commonly used selectors in jQuery

Detailed analysis of commonly used selectors in jQuery

黄舟
黄舟Original
2017-07-17 16:12:571019browse

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. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id=&#39;div1&#39;>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div></div>
    <div id=&#39;div3&#39;></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
 
  </div>
   
 
  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var oDiv = document.getElementById(&#39;div1&#39;)
    oDiv.clientWidth
    oDiv.getAttribute
    //jq获取到的结果是一个jQuery对象，可以使用jQuery里面提供的属性和方法，但是不能直接的使用浏览器内置的属性和方法
    var $oDiv = jQuery("#div1")//$("#div1")
    $oDiv.innerWidth();
    $oDiv.attr
 
    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(oDiv)
      //2)、jQuery转化成原生：直接通过索引获取对应的元素对象即可
      $oDiv[0]
      $oDiv.get(0)//<==>$oDiv[0]都是通过索引来获取指定位置的元素（JS原生对象）
 
    //更多的jQuery选择器
    $(&#39;#div1&#39;)
    $(&#39;div&#39;)
    $(&#39;.w100&#39;)
    $(&#39;*&#39;)
    $(&#39;#div1,div,.w100&#39;)//把每一个选择器获取到的jQuery对象最后融合在一起，最后一起获取到
    $(&#39;#div1 li&#39;)//在子子孙孙级中进行查找
    $(&#39;#div1>li&#39;)//在子级中进行查找
    $(&#39;#div3+&#39;)//获取它的下一个弟弟
    $(&#39;#div3+ul&#39;)//获取它的下一个弟弟并且标签名是ul的
    $(&#39;#div3~&#39;)//获取它的所有的弟弟元素
    $(&#39;#div3~ul&#39;)//获取它的所有的弟弟元素并且标签名为ul的
    $(&#39;#div1>div:not(.w100)&#39;)//#div1下的所有子集div样式类名不包含w100的
    $(&#39;#div1>div:eq(0)&#39;)//通过索引获取到集合中的某一个，但是获取到的结果依然是一个jQuery对象（而get方法也是通过索引获取，但是获取到的是一个JS原生对象）
    $(&#39;#div1>div:gt(1)&#39;)//大于索引1的（不包含索引1的）
    $(&#39;#div1>div:lt(1)&#39;)//小于索引1的（不包含索引1的）
    $(&#39;#div1 li:contains("我")&#39;)//获取所有的li内容包含“我” 的
    $(&#39;#div1 div:has(ul)&#39;)//在所有的div中包含ul的
    $(&#39;#div1>*:nth-child(1)&#39;)//获取所有的子元素的第一个
    $(&#39;#div1>*:eq(1)&#39;)//获取所有的子元素的第二个（索引为1）
  </script>
</body>
</html>

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 

$(&#39;选择器&#39;)
$(&#39;选择器 上下文&#39;)

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

$(&#39;a&#39;); //选择所有a元素
$(&#39;div&#39;);  //选择所有div元素
$(&#39;p&#39;);  //选择所有p元素

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

$(&#39;a,div,p&#39;);

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

2.2 Class selector

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

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

$(&#39;.myClass&#39;);  //拥有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:

$(&#39;div.myClass1.myClass2&#39;);

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: 

<div class="myClass1 myClass2 myClass3">...</div>

2.3 ID Selector

$(&#39;table#myID&#39;);  //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: 

$(&#39;ul.myUl li&#39;);

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

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li><ul>

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

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li><ul>
    
  
  • 
    
      
      
    • 一
      • 
      
    • 二
      • 
      
    • 三
      •

    $('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: 

    $(&#39;ul.myUl li a&#39;);

    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!

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Detailed explanation of json array operation and each traversal example code under jqueryNext article：Detailed explanation of json array operation and each traversal example code under jquery

    Related articles

    See more