JQuery官方学习资料(译):遍历
<div class="grandparent"> <div class="parent"> <div class="child"> <span class="subchild"></span> </div> </div> <div class="surrogateParent1"></div> <div class="surrogateParent2"></div> </div> |
- 父节点
// 选择一个元素的父节点 // 返回 [ div.child ] $( "span.subchild" ).parent(); // 选择匹配选择器元素的所有父节点 // 返回 [ div.parent ] $( "span.subchild" ).parents( "div.parent" ); // 返回 [ div.child, div.parent, div.grandparent ] $( "span.subchild" ).parents(); // 选择元素所有父节点,但是不包含指定选择器的元素 // 返回 [ div.child, div.parent ] $( "span.subchild" ).parentsUntil( "div.grandparent" ); // 选择最近的父节点,需要注意的是仅仅会有一个父节点被选择,搜索的内容还包含了选择器本身 // 返回 [ div.child ] $( "span.subchild" ).closest( "div" ); // 返回 [ div.child ] 选择器本身也包含在内 $( "div.child" ).closest( "div" ); |
- 子节点
// 选择一个元素的直接子节点。 // 返回 [ div.parent, div.surrogateParent1, div.surrogateParent2 ] $( "div.grandparent" ).children( "div" ); // 寻找所有匹配选择器的元素 // 返回 [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ] $( "div.grandparent" ).find( "div" ); |
- 兄弟节点
// 选择下一个兄弟节点 // 返回 [ div.surrogateParent1 ] $( "div.parent" ).next(); // 选择前一个兄弟节点 // 返回 [] 这里div.parent不存在前一个兄弟节点 $( "div.parent" ).prev(); // 选择所有后面的兄弟节点 // 返回 [ div.surrogateParent1, div.surrogateParent2 ] $( "div.parent" ).nextAll(); // 返回 [ div.surrogateParent1 ] $( "div.parent" ).nextAll().first(); // 返回 [ div.surrogateParent2 ] $( "div.parent" ).nextAll().last(); // 选择所有前面的兄弟节点 // 返回 [ div.surrogateParent1, div.parent ] $( "div.surrogateParent2" ).prevAll(); // 返回 [ div.surrogateParent1 ] $( "div.surrogateParent2" ).prevAll().first(); // 返回 [ div.parent ] $( "div.surrogateParent2" ).prevAll().last(); |
使用.siblings()方法可以选择所有的兄弟节点。
// 选择所有的兄弟节点 // 返回 [ div.surrogateParent1, div.surrogateParent2 ] $( "div.parent" ).siblings(); // 返回 [ div.parent, div.surrogateParent2 ] $( "div.surrogateParent1" ).siblings(); |
JQuery官方学习资料(译):遍历的更多相关文章
- JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象
JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each() $.each()是一个通用的方法用来遍历对象和数组, ...
- JQuery官方学习资料(译):Utility方法
JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim() 删除前后部的空白内容. // 返回 "lots of ex ...
- JQuery官方学习资料(译):类型
类型 JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...
- JQuery官方学习资料(译):使用JQuery的.index()方法
.index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...
- JQuery官方学习资料(译):Data方法
你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...
- JQuery官方学习资料(译):CSS
JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...
- JQuery官方学习资料(译):JQuery对象
每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...
- JQuery官方学习资料(译):操作元素
获取和设置元素的信息 有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...
- JQuery官方学习资料(译):选择器的运作
Getters 和 Setters JQuery的方法重载,方法设置和获取值一般使用相同名称的方法,当一个方法用来设置一个值的时候称之为Setter,当一个方法用来获取一个值的时候称之为Get ...
随机推荐
- dialog记录
.gyzq{ &.dialog{ background: rgba(83,83,83,0.50); width: 100%; height: 100%; position: fixed; ov ...
- 调用支付宝支付(C#)
//支付宝支付 public string AliPay(string OrderID, string Total) //OrderID订单号,Total订单总金额 { // 支付宝网关 string ...
- jsp页面时间戳转换为时间格式
jstl中格式化时间戳 在jsp页面中使用jstl标签将long型的时间戳转换为格式化后的时间字符串 1.通过<jsp:useBean /> 导入java.util.Date类2.通过 ...
- CLion之C++框架篇-优化开源框架,引入curl,实现get方式获取资源(四)
背景 结合上一篇CLion之C++框架篇-优化框架,引入boost(三),继续进行框架优化!在项目中,我们经常会通过get方式拉取第三方资源,这一版优化引入类库curl,用来拉取第三方资源库. ...
- 2017-12-04 编写Visual Studio Code插件初尝试
参考官方入门: Your First Visual Studio Code Extension - Hello World 源码在: program-in-chinese/vscode_helloWo ...
- java处理数据库不支持的emoji表情符
一般数据库的编码是utf8,utf8是不支持存储表情符的,当存入的微信昵称带有表情符时就会出现乱码情况,有两种解决方法: 1.mysql数据库升级到5.5版本以上,utf8改为utf8mb4,utf8 ...
- Go语言复制文件
需要使用io包的Copy方法 package main import ( "fmt" "io" "os" ) //自己编写一个函数,接收两个 ...
- PHP调用百度天气接口API
//百度天气接口API $location = "北京"; //地区 $ak = "5slgyqGDENN7Sy7pw29IUvrZ"; //秘钥,需要申请,百 ...
- 从PMP培训归来,跟大家聊聊做项目的套路
管理也是一些套路的传承,很多人说不去学专门的管理,照样把工作做得很好.是的,不是散打乱打就不能赢,只是会吃点亏而已.如果你有了套路在心中,那么必定会让自己车到山前开路,让事情更好办. 所以,我去学了几 ...
- Matplotlib 使用 - 《Python 数据科学手册》学习笔记
一.引入 import matplotlib as mpl import matplotlib.pyplot as plt 二.配置 1.画图接口 Matplotlib 有两种画图接口: (1)一个是 ...