jQuery层次选择器选择元素使用介绍


Posted in Javascript onApril 18, 2013
<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>
Javascript 相关文章推荐
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
浅谈Express异步进化史
Sep 09 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 #Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 #Javascript
jQuery随机切换图片的小例子
Apr 18 #Javascript
JS 各种网页尺寸判断实例方法
Apr 18 #Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 #Javascript
JS隐藏参数post传值实例
Apr 18 #Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 #Javascript
You might like
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
独特的python循环语句
2016/11/20 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Pygame的程序开始示例代码
2020/05/07 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
房地产项目策划书
2014/02/05 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
教师远程培训心得体会
2016/01/09 职场文书
升职自荐书
2019/05/09 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
Pandas自定义选项option设置
2021/07/25 Python
java项目构建Gradle的使用教程
2022/03/24 Java/Android