search

Home >Web Front-end >JS Tutorial >Detailed explanation of common selectors in jQuery

Detailed explanation of common selectors in jQuery

小云云
小云云Original
2018-01-01 10:25:231262browse

This article mainly introduces the relevant information of jQuery commonly used selectors in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

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

1. jQuery: (must be marked when using jQuery The version number we use)

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

2. jQuery The provided method

selector

obtains the specified element/element collection in the page by passing the content of the corresponding rule (ID, tag name, style class name...) 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id=&#39;p1&#39;>
    <p>
      <span></span>
      <span></span>
      <span></span>
    </p>
    <p></p>
    <p id=&#39;p3&#39;></p>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </p>
  

  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var op = document.getElementById(&#39;p1&#39;)
    op.clientWidth
    op.getAttribute
    //jq获取到的结果是一个jQuery对象，可以使用jQuery里面提供的属性和方法，但是不能直接的使用浏览器内置的属性和方法
    var $op = jQuery("#p1")//$("#p1")
    $op.innerWidth();
    $op.attr

    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(op)
      //2)、jQuery转化成原生：直接通过索引获取对应的元素对象即可
      $op[0]
      $op.get(0)//<==>$op[0]都是通过索引来获取指定位置的元素（JS原生对象）

    //更多的jQuery选择器
    $(&#39;#p1&#39;)
    $(&#39;p&#39;)
    $(&#39;.w100&#39;)
    $(&#39;*&#39;)
    $(&#39;#p1,p,.w100&#39;)//把每一个选择器获取到的jQuery对象最后融合在一起，最后一起获取到
    $(&#39;#p1 li&#39;)//在子子孙孙级中进行查找
    $(&#39;#p1>li&#39;)//在子级中进行查找
    $(&#39;#p3+&#39;)//获取它的下一个弟弟
    $(&#39;#p3+ul&#39;)//获取它的下一个弟弟并且标签名是ul的
    $(&#39;#p3~&#39;)//获取它的所有的弟弟元素
    $(&#39;#p3~ul&#39;)//获取它的所有的弟弟元素并且标签名为ul的
    $(&#39;#p1>p:not(.w100)&#39;)//#p1下的所有子集p样式类名不包含w100的
    $(&#39;#p1>p:eq(0)&#39;)//通过索引获取到集合中的某一个，但是获取到的结果依然是一个jQuery对象（而get方法也是通过索引获取，但是获取到的是一个JS原生对象）
    $(&#39;#p1>p:gt(1)&#39;)//大于索引1的（不包含索引1的）
    $(&#39;#p1>p:lt(1)&#39;)//小于索引1的（不包含索引1的）
    $(&#39;#p1 li:contains("我")&#39;)//获取所有的li内容包含“我” 的
    $(&#39;#p1 p:has(ul)&#39;)//在所有的p中包含ul的
    $(&#39;#p1>*:nth-child(1)&#39;)//获取所有的子元素的第一个
    $(&#39;#p1>*:eq(1)&#39;)//获取所有的子元素的第二个（索引为1）
  </script>
</body>
</html>

Related recommendations:

Detailed explanation of how to handle special symbols in jQuery selectors

jQuery UI date picker Datepicker detailed explanation

Example detailed explanation jQuery form object attribute filter selector

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

jquery 封装 JS 对象 选择器 ui
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 several commonly used functions of Ajax in jQueryNext article：Detailed explanation of several commonly used functions of Ajax in jQuery

Related articles

See more