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 nth-child()选择器的简单应用
Jul 10 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
input框中的name和id的区别
Nov 16 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python检测IP地址变化并触发事件
2018/12/26 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
普通简短的个人自我评价
2014/02/15 职场文书
会计学自荐信
2014/06/03 职场文书
关于旅游的活动方案
2014/08/15 职场文书
中学总务处工作总结
2015/08/12 职场文书
银行培训心得体会范文
2016/01/09 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
python数字图像处理:图像的绘制
2022/06/28 Python