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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
一个odbc连mssql分页的类
2006/10/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
python解析yaml文件过程详解
2019/08/30 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
金融与证券专业求职信
2014/06/22 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js