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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
js三种排序算法分享
Aug 16 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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实现的SESSION类
2014/12/02 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python文件名和文件路径操作实例
2017/09/29 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python调用Windows命令打印文件
2020/02/07 Python
浅谈django channels 路由误导
2020/05/28 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
列车长先进事迹材料
2014/01/25 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
辞职信的写法
2015/02/27 职场文书