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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
JS中的变量作用域(console版)
Jul 18 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
第十二节--类的自动加载
2006/11/16 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python中apply函数的用法实例教程
2014/07/31 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python读取实时数据流示例
2019/12/02 Python
Python中包的用法及安装
2020/02/11 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
管理专员自荐信
2014/01/26 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
初婚未育证明样本
2015/06/18 职场文书
超市主管竞聘书
2015/09/15 职场文书
学生会干部任命书
2015/09/21 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js