jQuery常用選擇器詳解

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

成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：jQuery常用選擇器詳解
分享網(wǎng)址：http://jinyejixie.com/article10/ggcjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、定制開發(fā)、App開發(fā)、ChatGPT、網(wǎng)站制作、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jQuery常用選擇器詳解