jQuery层次选择器选择元素使用介绍
更新时间：2013年04月18日 14:44:43 作者：
层次选择器:通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素，感兴趣的朋友可以了解下
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素
jQuery选择器详解
根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
注：ancestor descendant与parent>child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
-->
<title></title>
<!-- 使用jQuery层次选择器选择元素：在页面中，设置4块<div>标记，其中第二块<div>中，添加1个<span>标记，在该<span>标记中又新增1个<span>标记，全部元素初始值均为隐藏，然后通过jQuery层次选择器，显示相应的页面标记。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}
.clsFraA{width:65px;height:65px}
.clsFraP{width:45px;height:45px;background-color:#eee}
.clsFraC{width:25px;height:25px;background-color:#ddd}
</style>
<script type="text/javascript">
$(function () {
$('#divMid').css('display', 'block');
$('div span').css('display', 'block'); //显示div中所有的<span>标记
})
$(function () {
$('#divMid').css('display', 'block');
$('div>span').css('display', 'block'); //显示<div>中子<span>标记
})
$(function () {
$('#divMid+div').css('display', 'block'); //显示ID为divMid元素后的下一个<div>
$('#divMid').next().css('display', 'block');
})
$(function () {
$('#divMid ~ div').css('display', 'block'); //显示ID为divMid元素后的所有<div>
$('#divMid').nextAll().css('display', 'block');
})
$(function () {
$('#divMid').siblings('div').css('display','block'); //显示ID为divMid元素的所有相邻<div>
})
/* siblings()方法与选择器prev~siblings 区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分*/
</script>
</head>
<body>
<div class="clsFraA">
Left</div>
<div class="clsFraA" id="divMid">
<span class="clsFraP" id="Span1">
<span class="clsFraC" id="Span2"> </span>
</span>
</div>
<div class="clsFraA">
Right_1</div>
<div class="clsFraA">
Right_2</div>
</body>
</html>
相关文章
这篇文章主要介绍了jQuery中detach()方法用法,以不同实例形式分析了detach()方法删除匹配元素的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了Jquery 实现grid绑定模板的相关资料,需要的朋友可以参考下2015-01-01
最近做需要用到弹出窗口，发现JBox不错，可以支持iframe,但是发现个问题，在iframe中添加一个按钮点击此按钮2009-02-02
在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法2009-05-05
关于jQuery中的toggle()函数，相信大家都非常的了解，网上也有许多的相关教程，今天要给大家分享的是在实际的项目中toggle()的使用方法，需要的小伙伴可以参考下。2015-04-04
jQuery.cookie.js实现记录最近浏览过的商品功能示例
这篇文章主要介绍了jQuery.cookie.js实现记录最近浏览过的商品功能,结合实例形式分析了基于jQuery.cookie.js插件创建cookie及保存浏览记录的操作技巧,需要的朋友可以参考下2017-01-01
jquery text(),val(),html()方法区别总结
jquery text(),val(),html()方法区别总结。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了基于jquery二维码生成插件qrcode的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了jQuery控制cookie过期时间的方法,涉及jQuery操作cookie的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
JQuery插件ajaxfileupload.js异步上传文件实例
这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下2015-05-05
最新评论