JQuery中层次选择器用法实例详解


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery中层次选择器用法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>层次选择器</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 //------1.在给定的祖先元素下匹配所有后代元素
 //(包含了子元素,以及子元素的元素,一直往下延伸)
 var $divs = $("#main div");
 for (var i = 0; i < $divs.length; i++) {
 alert($divs.get(i).id);
 }
 //------2.在给定的父元素下匹配所有子元素,只包括直接子元素
 //(不包含子元素的子元素)
 var $divs = $("#main > div");
 for (var i = 0; i < $divs.length; i++) {
 alert($divs.get(i).id);
 }
 //-----3.prev + next $("lable + input ") : 匹配所有紧接在prev后的next元素
 //注意:只能去到第一个,并且是紧挨着的,如果不是紧挨着div1后面的则取不到
 //.....<1>.例子1
 var $divBrother = $("#div1 + div"); //用#div1 ID选择器 ,只取到div2
 alert($divBrother.get(0).id);
 //.....<2>.例子2
 var $divBrothers = $("div + div"); 
 //用div 标签选择器,相邻的div都能取到 divSun1(和divSun相邻),div2(和div1相邻)
 for (var i = 0; i < $divBrothers.length; i++) {
 alert($divBrothers.get(i).id);
 }
 //-----4.prev ~ siblins
 //$("form ~ input") : 匹配prev元素之后的所有siblings元素 
 //注意:在匹配之后的元素,不包含该元素在内,
 //并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配。
 var $divBrothers = $("#main ~ div");
 for (var i = 0; i < $divBrothers.length; i++) { //得到main1,main2,main3
 alert($divBrothers.get(i).id);
 }
 }
);
</script>
</head>
<body>
<div id="main">
 <div id="div1" class="myDiv">我是div1
 <div id="divSun">我是孙子div
  <div id="divSunSun">我是孙子的孙子div</div>
 </div>
 <div id="divSun1">我是孙子div</div>
 </div>
 <div id="div2" class="myDiv">我是div2</div>
</div>
<div id="main1"></div>
<div id="main2"></div>
<input type="button" value="button" />
<div id="main3"></div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
react中Suspense的使用详解
Sep 01 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
Jquery中基本选择器用法实例详解
May 18 #Javascript
Jquery注册事件实现方法
May 18 #Javascript
jquery中map函数遍历数组用法实例
May 18 #Javascript
jquery使用each方法遍历json格式数据实例
May 18 #Javascript
Jquery使用css方法改变样式实例
May 18 #Javascript
Jquery使用val方法读写value值
May 18 #Javascript
JQuery中Text方法用法实例分析
May 18 #Javascript
You might like
php学习之 数组声明
2011/06/09 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
js Date概念详细介绍
2013/11/22 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python AES加密实例解析
2018/01/18 Python
python正则实现提取电话功能
2018/02/24 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python numpy实现rolling滚动案例
2020/06/08 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
linux面试题参考答案(3)
2012/09/13 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
毕业实习感受与体会
2015/05/26 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2019各种保证书范文
2019/06/24 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript