Jquery学习笔记:通过层次关系获取jquery对象
前面一篇文章,我们介绍了如何通过web标签的id , css样式值来获取jquery对象。
但这只是基本方法,不能满足所有场景的需求。
本文介绍通过dom元素之间的层次关系获取元素。具体是将各种标识符(id, css样式,html标签名)组合在一起来获取jquery对象。
1、匹配后代元素
$("#myid a") //获取标识为myid下所有的 html标签为a的子元素(注意不仅是myid下的孩子节点,还包括孙子,更下层的所有满足关系的节点)
$("#ctypeId li a span") //可以支持多层的层次关系
$("body .container .success") //支持各种标识符的组合
注意:组合中的每种标识 一定是从祖先 到后代的层次关系
2、匹配子元素
父子和后台的区别是,父子是父节点和第一层子节点的关系,孙子节点等更下一层的关系就不算了。
举例,htnl代码如下:
<div id="mydiv">
<div>
<div>xx</div>
</div>
<div></div>
</div>
js代码如下:
var obj = $("#mydiv div");
alert(obj.length); //值为3,包含#mydiv下的所有层次div
obj = $("#mydiv>div");
alert(obj.length); //值为2,只包含#mydiv下的第一层次的div
说明:这种方式一样支持超过2层的关联关系的查找。
3、匹配之后的紧相领元素
这是匹配最靠近下一个的兄弟节点。举例如下:
<div id="mydiv"></div>
<p>hello1</p>
<p>hello2</p>
<div>div1</div>
<div>div2</div>
js代码
var obj = $("#mydiv + p");
alert(obj.length); //1
alert(obj.html()); //hello1
注意 $("#mydiv + div")将获取不到元素,因为#mydiv的最接近的元素的标签不是div。这可以用来检查邻近的兄弟节点是否是设想的节点。
因为已经限制了必须是紧领的下一个兄弟节点,可以不限制兄弟节点的标识,直接获取到。
所以 通过 $("#mydiv+") 就可以获取到紧邻的兄弟节点。
还可以通过方法调用 $("#mydiv").next() 来获取到同样的节点。
说明:$("#mydiv+div+div") 表示匹配第2个相邻的兄弟节点(但要求标签必须是div)
而 $("#mydiv++") 则无条件指定返回第2个相邻的元素,除非不存在第2个兄弟节点
4、匹配之后的所有兄弟元素
<div>
<div id="mydiv"></div>
<p class="xxx">hello1</p>
<p>hello2</p>
<div >div1</div>
</div>
js代码:
var obj = $("#mydiv~"); //获取#mydiv后的所有兄弟节点
alert(obj.length); //3
obj = $("#mydiv~p"); //获取#mydiv后的所有标签为p的兄弟节点
alert(obj.length); //2
obj = $("#mydiv~div"); //获取#mydiv后的所有标签为div的兄弟节点
alert(obj.length); //1
同样可以通过调用方法达到相同的目的
$("#mydiv").nextAll() 等同于 $("#mydiv~")
$("#mydiv").nextAll("p") 等同于 $("#mydiv~p")
$("#mydiv").nextAll("div") 等同于 $("#mydiv~div")
5、小结
通过层次关系的指定和约束,将各种关系组合在一起,来获取元素,功能非常强大。几乎可以满足各种场景的需求。
Jquery学习笔记:通过层次关系获取jquery对象的更多相关文章
- jQuery学习笔记(1) 初识jQuery
目录 目录 引用 注意 HelloWorldHelloWorld! jQueryjQuery对象和DOMDOM对象的相互转换 冲突的解决 引用 本地文件引用: <script src=" ...
- jQuery 学习笔记(2)(jQuery静态方法)
jQuery静态方法 1.$.each() 和 $.map() 既可以遍历数组也可以遍历伪数组 $.each(arr, function(value, index) { ... } ) $.map( ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
随机推荐
- Android中使用NDK
首先用Android Studio下载NDK 这个比较简单,就不多说了 1.写调用jni的Java代码 新建一个JniUtils类 public class JniUtils { static { S ...
- C# Best Practices - Creating Good Methods
How to Define a Method Identify the problem => Define the single purpose => Specify the inputs ...
- BZOJ 2006: [NOI2010]超级钢琴( RMQ + 堆 )
取最大的K个, 用堆和RMQ来加速... ----------------------------------------------------------------- #include<c ...
- Android之判断设备网络连接状态,并判断连接方式
在Android开发过程中,对于一个需要连接网络的Android设备,对设备的网络状态检测是很有必要的!有很多的App都需要连接网络.判断设备是否已经连接网络,并且在连接网络的状态下判断是wifi无线 ...
- Startup 和 Middleware(中间件)
Startup 和 Middleware(中间件) ASP.NET Core 运行原理剖析2:Startup 和 Middleware(中间件) Startup Class 1.Startup Con ...
- 【学习】leader特别忙工作到晚上11点左右,组员7点左右下班了,作为leader怎么办?
Ø leader先将自己做的事情罗列出来,选出不属于leader当前职责的工作内容. Ø 将不属于leader职责内容的部分授权给组员(承担更多的责任,职责). Ø 授权时,先考察组员的能力和了 ...
- java学习之xml
xml的处理有两种方式dom和Sax 其中dom有3套api ,分别是dom和jdom和dom4j package com.gh.xml; import java.io.File; import ja ...
- [Swust OJ 1026]--Egg pain's hzf
题目链接:http://acm.swust.edu.cn/problem/1026/ Time limit(ms): 3000 Memory limit(kb): 65535 hzf ...
- javascript 学习随笔2
<html> <head> <script type="text/javascript"> function writeText(txt) { ...
- Ubuntu14.04 Y460闪屏问题解决方案
我的笔记本是联想Y460,安装了Ubuntu之后发现屏幕闪烁移位,而且在使用IDE的时候出现无法输入中文等问题,其实是显卡驱动的问题,N卡官网给的驱动不好用,尝试使用大黄蜂 参考:https://wi ...