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 相关文章推荐
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
node中koa中间件机制详解
Aug 22 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
如何更好的编写js async函数
May 13 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
php flush类输出缓冲剖析
2008/10/19 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP编程风格规范分享
2014/01/15 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
layui分页效果实现代码
2017/05/19 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
angular多语言配置详解
2019/05/16 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python实现按长宽比缩放图片
2018/06/07 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
英语自我评价范文
2014/01/24 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
个人收入证明格式
2015/06/24 职场文书
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers