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 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
微信小程序实用代码段(收藏版)
Dec 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php随机输出名人名言的代码
2012/10/07 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
介绍下java.util.Arrays类
2012/10/16 面试题
我的网上商城创业计划书
2013/12/26 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
我爱我家教学反思
2014/05/01 职场文书
商铺消防安全责任书
2014/07/29 职场文书
同学聚会通知书
2015/04/20 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL