jQuery DOM遍历

2019-06-27  本文已影响0人  头脑之外

jQuery 祖先:
parent(); // 返回被选元素的直接父元素
parents(); // 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
parentsUntil(); // 返回被选元素之间的所有祖先元素

<script>
// 对span与div之间的祖先元素设置样式为red
 $("span").parentsUntil("div").css({"color":"red"});
</script>
<div>
    <ul>
      <li>hi,sina</li>
    </ul>
<span>hi,snackpub</span>
</div>

jQuery 同胞:
siblings(); // 所有同级元素
next(); // 下一个同胞元素
nextAll(); //
nextUntil(); // 两个给定元素之间的所有同胞元素

<script> 
  $("h1").nextUntil("h6").css("color","red");
</script>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

jQuery 后代:
children(); // 返回被选元素的所有直接子元素
find(); // 返回被选元素的后代元素,一路向下直到最后一个后代

$("#div").nextAll("span").remove();/* 对div标签下所有span同胞标签进行移除 */
$("#div").next("span").children("i").css({color: "#f56c6c"});/* 对div标签下的第一个span标签的后代i标签增加样式 */
上一篇 下一篇

猜你喜欢

热点阅读