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 相关文章推荐
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JavaScript严格模式详解
Jan 16 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
详解vuex状态管理模式
Nov 01 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
深入理解ES7的async/await的用法
2017/09/09 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
举例讲解Python常用模块
2019/03/08 Python
python将字符串转换成json的方法小结
2019/07/09 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Java基础知识面试要点
2016/07/29 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
小学英语课教学反思
2016/02/15 职场文书
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js