jQuery常用選擇器詳解

更新時間：2017年07月17日 14:45:13 作者：diasa

這篇文章主要為大家詳細(xì)介紹了jQuery常用選擇器的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了jQuery常用選擇器的具體代碼，供大家參考，具體內(nèi)容如下

1、jQuery：（使用jQuery一定標(biāo)明我們使用的版本號）

　它是一個使用原生的JS來封裝的常用的方法的類庫（解決了瀏覽器的兼容問題）

2、jQuery中提供的方法

選擇器

通過傳遞對應(yīng)規(guī)則的內(nèi)容（ID、標(biāo)簽名、樣式類名...），獲取到頁面中指定的元素/元素集合　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id='div1'>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div></div>
    <div id='div3'></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>
  

  <script>
    //原生JS獲取到的結(jié)果屬于元素對象/元素集合/節(jié)點集合...他們可以使用瀏覽器為其提供的那些天生自帶的屬性和方法
    //原生的JS對象不能直接的使用jQuery中提供的屬性和方法
    var oDiv = document.getElementById('div1')
    oDiv.clientWidth
    oDiv.getAttribute
    //jq獲取到的結(jié)果是一個jQuery對象，可以使用jQuery里面提供的屬性和方法，但是不能直接的使用瀏覽器內(nèi)置的屬性和方法
    var $oDiv = jQuery("#div1")//$("#div1")
    $oDiv.innerWidth();
    $oDiv.attr

    //關(guān)于原生JS對象和jQuery對象之間的轉(zhuǎn)換
      //1)、原生的轉(zhuǎn)變成jQuery:$(原生JS對象)
      $(oDiv)
      //2)、jQuery轉(zhuǎn)化成原生：直接通過索引獲取對應(yīng)的元素對象即可
      $oDiv[0]
      $oDiv.get(0)//<==>$oDiv[0]都是通過索引來獲取指定位置的元素（JS原生對象）

    //更多的jQuery選擇器
    $('#div1')
    $('div')
    $('.w100')
    $('*')
    $('#div1,div,.w100')//把每一個選擇器獲取到的jQuery對象最后融合在一起，最后一起獲取到
    $('#div1 li')//在子子孫孫級中進(jìn)行查找
    $('#div1>li')//在子級中進(jìn)行查找
    $('#div3+')//獲取它的下一個弟弟
    $('#div3+ul')//獲取它的下一個弟弟并且標(biāo)簽名是ul的
    $('#div3~')//獲取它的所有的弟弟元素
    $('#div3~ul')//獲取它的所有的弟弟元素并且標(biāo)簽名為ul的
    $('#div1>div:not(.w100)')//#div1下的所有子集div樣式類名不包含w100的
    $('#div1>div:eq(0)')//通過索引獲取到集合中的某一個，但是獲取到的結(jié)果依然是一個jQuery對象（而get方法也是通過索引獲取，但是獲取到的是一個JS原生對象）
    $('#div1>div:gt(1)')//大于索引1的（不包含索引1的）
    $('#div1>div:lt(1)')//小于索引1的（不包含索引1的）
    $('#div1 li:contains("我")')//獲取所有的li內(nèi)容包含“我” 的
    $('#div1 div:has(ul)')//在所有的div中包含ul的
    $('#div1>*:nth-child(1)')//獲取所有的子元素的第一個
    $('#div1>*:eq(1)')//獲取所有的子元素的第二個（索引為1）
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: