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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
插件导致ECharts被全量引入的坑示例解析
Sep 23 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获取表单中多个同名input元素的值
2014/03/20 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
没编程基础可以学python吗
2020/06/17 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
欢迎领导检查标语
2014/06/27 职场文书
学校师德师风整改措施
2014/10/27 职场文书
人与自然的观后感
2015/06/18 职场文书
毕业典礼主持词
2015/06/29 职场文书