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 相关文章推荐
javascript中的注释使用与注意事项小结
Sep 20 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
vant中的toast层级改变操作
Nov 04 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+mysql留言本源码
2009/11/11 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
javascript函数库-集合框架
2007/04/27 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python实现发送邮件功能代码
2017/12/14 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python实现图像全景拼接
2020/03/27 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
讲文明树新风演讲稿
2014/05/12 职场文书
职务任命书范本
2014/06/05 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
Java tomcat手动配置servlet详解
2021/11/27 Java/Android