jQuery层级选择器用法分析


Posted in Javascript onFebruary 10, 2015

在HTML文档中,每个元素总是处于DOM节点树上的某个位置,文档层次结构中元素之间总是存在于某种层级关系,如父级和子级的关系等。

1. 子元素选择器

用于查找在给定的父元素下查找 这个父元素下的所有子元素,语法格式:

$("parent->chilid");

2. 后代元素选择器

用于在给定的祖先元素下匹配所有的后代元素,语法格式:

$("ancestor descendant");

3. 紧邻同辈元素选择器

用于匹配所有紧邻在prev元素后的next元素,语法格式:

$("prev + next")

4. 相邻同辈元素选择器

用于选择某元素后面的所有同辈元素,语法格式如下:

$("prev~siblings")

综合实例:

<!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" />  

<script type="text/javascript" src="jquery-1.7.min.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){    

    $("form input").css("color", "red");  //给form元素的后代input元素设置字体颜色  

    $("div>div").css("background", "#FCF");  //给maindiv下的子元素div1和div2设置背景颜色  

    $("div~input").css("border", "2px solid blue");  //给div元素后面的所有input元素设置边框  

    $("div+input").css("border", "2px solid red");  //给紧跟在div元素后的input元素设置边框  

 });

</script>  

<title>层级选择器</title>  

</head>  

<body>  

   <form id="form1">  

       <label>form元素的后代input元素为:input1, input2, input3</label>  

       <input type="text" id="input1" value="文本框1" />  

       <div id="maindiv">  

          <div id="div1">maindiv的子元素:id为div1</div>  

          <div id="div2">maindiv的子元素:id为div2</div>  

       </div>   

       <input type="text" id="input2" value="文本框2" />  

       <input type="text" id="input3" value="文本框3" /><br />  

       <label>maindiv的所有子元素为:div1, div2</label>  

   </form>  

</body>  

</html>

效果图如下图所示:

jQuery层级选择器用法分析

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
Jquery中CSS选择器用法分析
Feb 10 #Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 #Javascript
Js为表单动态添加节点内容的方法
Feb 10 #Javascript
jQuery前端分页示例分享
Feb 10 #Javascript
js进行表单验证实例分析
Feb 10 #Javascript
EasyUi datagrid 实现表格分页
Feb 10 #Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python能做什么
2020/06/02 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python实现扫码工具的示例代码
2020/10/09 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
爱情检讨书大全
2014/01/21 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
节约电力资源的建议书
2014/03/12 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
干部作风建设工作总结
2014/10/29 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
男方家长婚礼致辞
2015/07/27 职场文书