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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
html-webpack-plugin修改页面的title的方法
Jun 18 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
php 生成饼图 三维饼图
2009/09/28 PHP
php实现jQuery扩展函数
2009/10/30 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
yii添删改查实例
2015/11/16 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
js实现烟花特效
2020/03/02 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python合并多个excel文件的示例
2020/09/23 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
SQL Server面试题
2016/10/17 面试题
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
领导欢迎词范文
2015/01/26 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2016春节放假通知范文
2015/08/18 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers