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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 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中使用灵巧的体系结构
2006/10/09 PHP
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
NodeJs中的VM模块详解
2015/05/06 NodeJs
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
python 安装impala包步骤
2020/03/28 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
车间组长岗位职责
2013/12/20 职场文书
师德学习感言
2014/01/31 职场文书
党日活动总结
2014/05/07 职场文书
部门活动策划方案
2014/08/16 职场文书
学习心理学的体会
2014/11/07 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python