04.jQuery 遍历

jQuery遍历

DOM:Document Object Model 文档对象模型;
通过 jQuery 遍历，可以从被选（当前的）元素开始，在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）;
遍历方法中最大的种类是树遍历（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

04.jQuery 遍历

jQuery遍历

jQuery遍历方法

推荐阅读更多精彩内容