cari

Rumah >hujung hadapan web >tutorial js >jQuery中关于常用选择器的具体分析

jQuery中关于常用选择器的具体分析

黄舟
黄舟asal
2017-07-17 16:12:571019semak imbas

本文为大家分享了jQuery常用选择器的具体代码，供大家参考，具体内容如下

1、jQuery：（使用jQuery一定标明我们使用的版本号）

　 它是一个使用原生的JS来封装的常用的方法的类库（解决了浏览器的兼容问题）

2、jQuery中提供的方法

选择器

通过传递对应规则的内容（ID、标签名、样式类名...），获取到页面中指定的元素/元素集合　

<!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>

元素选择是一切操作的前提，jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jquery选择器。

1、jQuery选择器基本结构

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

2、使用基本css选择器

关于基本的css选择器可以看一下css选择器详解。这里列出几种最基本的使用css选择器的用法。

2.1 元素选择器

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

当然，如果你愿意，jQuery也允许我们使用逗号将多个选择器合并为一个选择器：

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

这样得到了和上面3行代码相同的效果。

2.2 类选择器

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

通常情况下，要选择拥有某一类的所有元素时，会省略掉通配符*，如下：

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

这样不会有任何不妥，也是我们常用的写法。

另外，某些元素可能拥有不止一个类:

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

这样会选择同时拥有myClass1以及myClass2类的div元素。当然，被选中的div元素可能还拥有其他类，也就是说，以下div会毫无疑问地被选中：

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

2.3 ID选择器

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

3、结合使用上下文选择器

3.1 后代选择器

从这里开始，开始一些稍有难度的选择，例如：

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

这样会选择所有拥有myUl类的ul元素的li子元素。听起来很拗口。看下面的代码：

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')，所有的li元素都将被选中，注意是所有的！因为所有的li元素均是aaa882b65958992b727bb950729a3b4e...929d1f5ca49e04fdcb27f9465b944689的后代。不论你是直接后代，孙子代还是重孙子代。

事实上，上例还不足以完全说明所有拥有myUl类的ul元素的li子元素的含义。因为拥有myUl类的ul元素可能不止一个，如下：

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')同样会选择以上代码中所有的li元素。因为上述代码中所有li元素均是ul.myUl的子元素，虽然ul.myUl有2个。现在应该能理解所有拥有myUl类的ul元素的li子元素的含义了吧！

    后代选择器其实不止能够选择某元素的后代，也可以选择某元素后代的后代(听起怎么有点别扭)，如下：

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

    这样就选择了所有拥有myUl类的ul元素的所有li后代元素的所有a后代元素。虽然又多了一个xx的后代，不过和上面的分析是一个道理，就不赘述了。

    Atas ialah kandungan terperinci jQuery中关于常用选择器的具体分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan：
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel sebelumnya：jquery下json数组的操作和each遍历实例代码详解Artikel seterusnya：javascript中的轮播图插件化的封装示例

    Artikel berkaitan

    Lihat lagi