您的位置：首页 > Web前端 > JQuery

JQuery导航

2017-08-16 19:35 106 查看
4.1JQuery导航

什么是JQuery导航？

我们之前学过JS的导航，就是实现向上或者向下以及水平方向的查找，今天我讲的jQ导航与之类似根据当前元素来查找你所希望查找的元素，它也通过向上（祖先）向下（后代）或者水平方向（兄弟）的移动，从而找到你所需要查找的元素

        

4.2祖先

1）parent()找到的是当前元素的直接父元素

 $("#myself").parent().css({"backgroundColor":"red"});

2）parents()找到当前元素的所有祖先 ，它一路向上直到文档的根元素 (<html>)

  $("#myself").parents("#grandfather").css({"backgroundColor":"red"});

 

 小括号内传入参数，就表示在查找到的所有祖先中找到指定的那个祖先

3）parentsUntil()找到的是两个给定祖先之间的元素，开区间

  $("#myself").parentsUntil("#ancestor").css({"backgroundColor":"red"});

4.3后代

children()找到当前元素的直接后代

$("#myself").children().css({"backgroundColor":"red"});

$("#myself").children(".firstSon").css({"backgroundColor":"red"});

小括号内传入参数，就表示在查找到的所有直接后代中找到指定的那个后代

Find():找到当前元素的后代元素，一直向下查找直到找到最后一个后代

注意写法一定要传参数加*号不然没法找到元素

$("#myself").find("*").css({backgroundColor:"red"});

$("#myself").find("p").css({backgroundColor:"red"});

 

   4.4同胞

Siblings()找到的是当前元素的所有的同胞元素

$(".oldBrother").siblings().css("backgroundColor","red");

Next()找到的是当前元素的下一个同胞

$(".oldBrother").next().css("backgroundColor","red");

NextAll()找到的是当前元素的所有的弟元素

$(".myself").nextAll().css("backgroundColor","red");

nextUntil()找到的是两个参数之间的所有同胞元素

$(".myself").nextUntil(".p6").css("backgroundColor","red");

prev()找到的是当前元素的上一个同胞

$(".p6").prev().css("backgroundColor","red");

prevAll() 找到的是当前元素的上面的兄元素

$(".p6").prevAll().css("backgroundColor","red");

 prevUntil() 找到的是两个参数之间的所有同胞元素

$(".p6").prev(".myself").css("backgroundColor","red");

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JQuery导航
相关文章推荐
新的分享
章节导航