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的.live()和.die() 使用介绍
Sep 10 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue实现页面加载动画效果
Sep 19 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
js判断是否是手机页面
2017/03/17 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
2014年采购员工作总结
2014/11/18 职场文书
2015暑假假期总结
2015/07/13 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技