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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
Jquery之美中不足小结
Feb 16 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
angularjs性能优化的方法
Sep 05 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
记一次vue跨域的解决
Oct 21 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新改动之短标记启用方法
2008/09/11 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python开根号实例讲解
2020/08/30 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
销售经理工作职责
2014/02/03 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
python文件目录操作之os模块
2021/05/08 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
纯html+css实现打字效果
2021/08/02 HTML / CSS