jQuery遍历

children()

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系)。
children只查找第一级的子节点

find()

快速查找DOM树中的这些元素的后代元素,
children是父子关系查找,find是后代关系(包含父子关系).

find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。
与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。
find只在后代中遍历,不包括自己。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
$("div").find("li")

parent()

快速查找合集里面的每一个元素的父元素,这个方法只会向上查找一级.

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
$(ul).parent()

parents()

快速查找合集里面的每一个元素的所有祖辈元素,类似find与children的区别,parent只会查找一级,parents则会往上一直查到查找到祖先节点.

$( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。

closest()

在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素.

closest和parents的区别:

  • 起始位置不同:.closest开始于当前元素 .parents开始于父元素
  • 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合
  • .closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象

next()

快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合.

prev()

快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

sibings()

快速查找指定元素集合中每一个元素的同辈元素

add()

add()将元素追加到匹配元素集合中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>
//把p元素添加到li的合集中
$('li').add('p').css('background', 'red')

选择li的同时选择了P,给他们加同样的CSS。

例如:同时选择两个id对象:
选择了其中一个$("#one"),选择两个id时就要使用add方法追加标签

$("#one").add("#two")

add()与append()不一样,add()是指在JQuery对象集合中增加一个对象,而append()是在DOM集合中增加一个节点。add()不会直接影响界面,append()会对界面产生影响。

each()

$("li").css('') 给所有的li设置style值,因为jQuery是一个合集对象,所以css方法内部就必须封装一个遍历的方法,被称为隐式迭代的过程。

<script type="text/javascript">
    $("button:last").click(function() {
        //遍历所有的li
        //修改偶数li内的字体颜色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })
</script>

element是对应的li节点,索引index从0开始的,当索引为奇数时,%2才会是1执行加色操作。

posted @ 2020-07-05 21:26  六月的余晖  阅读(164)  评论(0编辑  收藏  举报