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 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
Ajax基础知识详解
2017/02/17 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
python leetcode 字符串相乘实例详解
2018/09/03 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python定时器线程池原理详解
2020/02/26 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
销售经理岗位职责
2014/03/16 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
融资合作协议书范本
2014/10/17 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
2016中秋节广告语
2016/01/28 职场文书
导游词之桂林山水
2019/09/20 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python