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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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 array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php获取系统变量方法小结
2015/05/29 PHP
php经典算法集锦
2015/11/14 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
详解python3中的真值测试
2018/08/13 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
使用python实现画AR模型时序图
2019/11/20 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
一套Delphi的笔试题二
2013/05/11 面试题
房地产资料员岗位职责
2014/07/02 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
浅谈Python项目的服务器部署
2021/04/25 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL