04.jQuery 遍歷

  • jQuery遍歷

  1. DOM:Document Object Model 文檔對象模型;
  2. 通過 jQuery 遍歷，可以從被選（當前的）元素開始，在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）;
  3. 遍歷方法中最大的種類是樹遍歷（tree-traversal）;

  • jQuery遍歷方法

方法 釋義 語法
.add() 將元素添加到匹配元素的集合中 .add(selector/elements)
.andSelf() 把堆棧中之前的元素集添加到當前集合中 .andSelf()
.children() 獲得匹配元素集合中每個元素的所有子元素 .children(selector)
.closest() 從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素(0/1個) .closest(selector)
.contents() 獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點 .contents()
.each() 對 jQuery 對象進行迭代，為每個匹配元素執行函數 $(selector).each(function(index,element))
.end() 結束當前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態 .end()
.eq() 將匹配元素集合縮減為位于指定索引的新元素(index為正則從前向后索引,index為負則從后向前索引) .eq(index)
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素 .filter(selector/function)
.find() 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選 .find(selector)
.first() 將匹配元素集合縮減為集合中的第一個元素 .first()
.has() 將匹配元素集合縮減為包含特定元素的后代的集合 .has(selector)
.is() 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true .is(selector/function)
.last() 將匹配元素集合縮減為集合中的最后一個元素 .last()
.map() 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象 .map(callback(index,domElement))
.next() 獲得匹配元素集合中每個元素緊鄰的同輩元素 .next(-selector)
.nextAll() 獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選） .nextAll(-selector)
.nextUntil() 獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止 .nextUntil(selector/elements,filter)
.not() 從匹配元素集合中刪除元素 .not(selector/elements)
.offsetParent() 獲得用于定位的第一個父元素 .offsetParent()
.parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選） .parent(selector)
.parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選） .parents(-selector)
.parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止 .parentsUntil(selector/elements,filter)
.prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選） .prev(-selector)
.prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選） .prevAll(-selector)
.prevUntil() 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止 .prevUntil(selector/elements, filter)
.siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選） .siblings(selector)
.slice() 將匹配元素集合縮減為指定范圍的子集(只有一個參數時,則從此到結尾;為負數時,則從后向前索引) .slice(start,end) 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
    </head>
    <body>
        <div>
            <label>輸入個數:</label>
            <input type="number" name="NumOfLi" id="NumOfLi" />
        </div>
        <ul></ul>
        <script type="text/javascript">
            $(document).ready(function(){
                //創建li
                $("#NumOfLi").change(function(){
                    $("ul").empty();
                    for(var i=0;i<$(this).val();i++){
                        $("ul").append(document.createElement("li"));
                    }
                    //設置li的樣式
                    $("li").css({
                        "background-color":"grey",
                        "list-style":"none",
                        "height":"20px"
                    }).filter(":odd").css("background-color","gainsboro");
                });
                //設置lable的樣式
                $("#NumOfLi").prev().css("margin","1em");
                //設置div的樣式
                $("#NumOfLi").parent("div").css({
                    "border":"1px solid gray",
                    "border-radius":"1em",
                    "padding":"0.5em",
                    "background-color":"gainsboro"
                });
            });
        </script>
    </body>
</html>
image.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通過jQuery，您可以選取（查詢，query）HTML元素，并對它們執行“操作”（actions）。 jQuer...
    枇杷樹8824閱讀 670評論 0贊 3
  • 請記得在進行JQuery類庫的運用時，加入JQuery類庫，并且要保證先寫文檔就緒函數 $(document).r...
    Sunshinemm閱讀 2,919評論 1贊 40
  • jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由約翰·雷西格（...
    靜候那一米陽光閱讀 797評論 0贊 18
  • jQuery 遍歷 什么是遍歷？jQuery 遍歷，意為“移動”，用于根據其相對于其他元素的關系來“查找”（或選取...
    鹿守心畔光閱讀 376評論 0贊 6
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,673評論 18贊 503