2. 程式人生 > >jquery原始碼解析之遍歷後代

jquery原始碼解析之遍歷後代

阿新 • • 發佈：2019-01-05

後代是子、孫、曾孫等等，通過 jQuery，您能夠向下遍歷 DOM 樹，以查詢元素的後代。

下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法：

children()
find()

jQuery children() 方法

獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選。

因為就jQuery可以是一個DOM的合集物件，所以children就需要遍歷每一個合集中的直接子元素了，並且最後需要構建一個新的jQuery物件。

jQuery find() 方法

1、.find()方法返回被選元素的後代元素，一路向下直到最後一個後代。

2、.find()方法允許我們能夠通過查詢DOM樹中的這些元素的後代元素，匹配的元素將構造一個新的jQuery物件。

3、.find()和.children()方法是相似的，但後者只是再DOM樹中向下遍歷一個層級。

4、.find()方法還可以接受一個選擇器表示式，該選擇器表示式可以是任何可傳給$()函式的選擇器表示式。如果緊隨兄弟匹配選擇器，它將被保留在新構建的jQuery物件中；否則，它被排除在外。

這個方法用的概率相當高，除了接受一個選擇器外，還可以接受一個jQuery物件，我們可以看到.find()方法的內部實際上是呼叫的jQuery.find 也就是sizzle的引擎選擇器。

當然在高階版本中我們大多數可以這樣處理：

function find(elem, selector) {
  return
 
 elem.querySelectorAll(selector);
}

通過在指定的上下文，通過querySelectorAll直接查找出元素，具體是sizzle在之前就分析過了。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript">
 
</script>
  <!-- <script type="text/javascript" src="../jquery-2.1.1.js"></script> -->
  <title></title>
</head>
<body>

<button id="test1">jQuery children方法</button>
<button id="test2">模擬children方法</button>

<div></div>

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>


<script type="text/javascript">


  $("#test1").click(function(){
    $('.level-2').children().each(function(i,ele){
      $('div').append('<li>jQuery.children方法,子元素的className為:'+ ele.className + '</li>')
    })
  })

  $("#test2").click(function() {
    function sibling(n, elem) {
      var matched = [];
      for (; n; n = n.nextSibling) { //如果存在下一個兄弟節點
        if (n.nodeType === 1 && n !== elem) { //是元素節點，且不是當前選擇器元素
          matched.push(n);
        }
      }
      return matched;
    }

    var ul = document.querySelectorAll('.level-2')[0];


    //遍歷所有元素
    $.each(sibling(ul.firstChild), function(i, ele) {//ul.firstChild 為文字節點
      $('div').append('<li>模擬children方法,子元素的className為:' + ele.className + '</li>')
    })
  })
</script>
</body>
</html>

思路是：查詢ul的所有子元素，先查詢ul的第一個子節點，為文字節點；找出該節點的所有的同胞元素節點，存入陣列中，該陣列即為ul的所有子元素

相關推薦

jquery原始碼解析之遍歷後代

後代是子、孫、曾孫等等，通過 jQuery，您能夠向下遍歷 DOM 樹，以查詢元素的後代。 下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法： children() find() jQuery children() 方法 獲得匹配元素集合中每個元

Redis原始碼解析——字典遍歷

        之前兩篇博文講解了字典庫的基礎，本文將講解其遍歷操作。之所以將遍歷操作獨立成一文來講，是因為其中的內容和之前的基本操作還是有區別的。特別是高階遍歷一節介紹的內容，充滿了精妙設計的演算法智慧。（轉載請指明出於breaksoftware的csdn部落格） 迭代器

jQuery遍歷-後代

等等 屬性 可選參數 code find() jquer 並且 children 一個 後代是子、孫、曾孫等等。 通過 jQuery，您能夠向下遍歷 DOM 樹，以查找元素的後代。 向下遍歷 DOM 樹 下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法： c

Jquery選擇器遍歷後代等相關（一）

找到表單中所有的 input 元素 HTML 程式碼: <form> <label>Name:</label> <input name="name" /> <fieldset> <label&g

Jsoup解析和遍歷一個HTML文檔(二)

spl nodes gif .org code htm ips method spa 關於Eclipse編輯器匯總console中字體調整： 1，下載jsoup的jar包：http://jsoup.org/download 2, jsoup英文的開發手冊：http:

linux 下的文件目錄操作之遍歷目錄

ges div strcmp pen fprintf pwd edi while font 　　通過遞歸調用讀取目錄和文件信息去遍歷整個目錄： 　　示例代碼： 1 #include <unistd.h> 2 #include <stdio.h>

python網絡爬蟲-數據采集之遍歷單個爬蟲

target follow ndt 數據采集 http lan python www win 8D湛91G坡嗇1訝Dhttp://www.facebolw.com/space/2102892/following T判捕9墳17猿9PFV瞬http://www.facebo

原生JS forEach()和map()遍歷，jQuery$.each()和$.map()遍歷

each ole this asc fin name param view map() 一、原生JS forEach()和map()遍歷 共同點： 1.都是循環遍歷數組中的每一項。 2.forEach() 和 map() 裏面每一次執行匿名函數都支持3個參數：數組中的當前項

數據結構Java版之遍歷二叉樹（六）

val unit 說明 後續遍歷 auth AD oot org tor 　　二叉樹是我們在程序中用的最多的一種樹（個人觀點）。最簡單的一個二叉樹是由一個根節點，兩個子節點（一左一右成左右孩子節點）組成。二叉樹是數組和鏈表的結合，即包含了數組的快速查找優點，又包含了鏈表的快

python小白之路（特性語法三之遍歷、公共方法、引用）

是否 比較 類型 之路 鍵值 oat 列表 函數 dict 一、遍歷通過for。。。in。。。的語法結構，我們可以遍歷字符串、列表、元組、字典等數據結構。1、字符串遍歷a_str = "hello world"for char in a_str:prin

Android框架原始碼解析之（四）Picasso

這次要分析的原始碼是 Picasso 2.5.2 ，四年前的版本，用eclipse寫的，但不影響這次我們對其原始碼的分析 地址：https://github.com/square/picasso/tree/picasso-parent-2.5.2 Picasso的簡單使用

Android框架原始碼解析之（三）ButterKnife

注：所有分析基於butterknife:8.4.0 原始碼目錄：https://github.com/JakeWharton/butterknife 其中最主要的3個模組是： Butterknife註解處理器https://github.com/JakeWharton/

Android框架原始碼解析之（二）OKhttp

原始碼在：https://github.com/square/okhttp 包實在是太多了，OKhttp核心在這塊https://github.com/square/okhttp/tree/master/okhttp 直接匯入Android Studio中即可。 基本使用：

Android框架原始碼解析之（一）Volley

前幾天面試CVTE，HR面掛了。讓內部一個學長幫我查看了一下面試官評價，發現二面面試官的評價如下： 廣度OK，但缺乏深究能力，深度與實踐不足 原始碼：只能說流程，細節程式碼不清楚，retrofit和volley都是。 感覺自己一方面：自己面試技巧有待提高吧（框

ReactJS之遍歷對象的方法

react tps chan tail target details reactjs csdn logo const obj = { channel: “wevmvmklskdosll12k;0”, index:0 }; Object.keys(o

Android原始碼解析之應用程式資源管理器（Asset Manager）的建立過程分析

轉載自：https://blog.csdn.net/luoshengyang/article/details/8791064 我們分析了Android應用程式資源的編譯和打包過程，最終得到的應用程式資源就與應用程式程式碼一起打包在一個APK檔案中。Android應用程式在執行的過程中，是通過一個

Spring-web原始碼解析之Filter-OncePerRequestFilter

轉自：  http://blog.csdn.net/ktlifeng/article/details/50630934 基於4.1.7.RELEASE 我們先看一個filter-mapping的配置 

spring原始碼解析之AOP原理

一、準備工作 　　在這裡我先簡單記錄下如何實現一個aop： AOP：【動態代理】 指在程式執行期間動態的將某段程式碼切入到指定方法指定位置進行執行的程式設計方式； 1、匯入aop模組；Spring AOP：(spring-aspects) 2、定義一個業務邏輯類（

Dubbo原始碼解析之服務端接收訊息

準備 dubbo 版本：2.5.4 服務端接收訊息流程 Handler鏈路 DubboProtocol private ExchangeServer createServer(URL url) { url = url.addParameterIfAbsent("c

Dubbo原始碼解析之服務釋出與註冊

準備 dubbo版本：2.5.4 Spring自定義擴充套件 dubbo 是基於 spring 配置來實現服務釋出，並基於 spring 的擴充套件機制定義了一套自定義標籤，要實現自定義擴充套件， spring 中提供了 NamespaceHandler 、BeanDefinit