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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
javascript void(0)的妙用
2009/10/21 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
Python工程师面试题 与Python Web相关
2016/01/14 Python
python装饰器与递归算法详解
2016/02/18 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
作文评语大全
2014/04/23 职场文书
人代会标语
2014/06/30 职场文书
学校联谊协议书
2014/09/16 职场文书
作文评语怎么写
2014/12/25 职场文书
申报材料格式
2014/12/30 职场文书
歼十出击观后感
2015/06/11 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
Python序列化模块JSON与Pickle
2022/06/05 Python