码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 层次选择器

时间:2016-04-08 11:33:03      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
<head>
    <title> 使用jQuery层次选择器 </title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
      <div id="num1">1</div>
      <div>2<span>haha</span></div>
        <span><span class="clsFraC" id="Span2">Span</span></span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
</body>
</html>
$(function (){
    //jQuery代码
    $("#divMid").next().css("display","none")  //针对于同级的div;Right_1所在div被隐藏;
等价于=$("#divMid + div").css("display","none");

 $("#divMid span").css("display","none");    //针对div里面的所有的span标签隐藏;(Span,haha文字全部隐藏)

    $("#divMid>span").css("display","none");//针对div里面的子元素span标签隐藏;(Span文字隐藏)

 $("#divMid ~ div").css("display","none");
//针对div的同级元素后面的div标签隐藏;(Right_1,Right_2文字隐藏)
等价于= $("#divMid").nextAll().css("display","none");

$("#divMid").siblings("div").css("display","none");   //针对div的同级元素相邻的div标签隐藏;(Left,Right_1,Right_2文字隐藏)

});

 

JQuery 层次选择器

标签:

原文地址:http://www.cnblogs.com/dazhangli/p/5367036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!