jquery学习手记(8)遍历
层次的级别有:parent/children/sibling。
父节点
父节点遍历方法有:$.fn.parent()
, $.fn.parents()
, $.fn.parentsUntil()
, and $.fn.closest()
.示例如下:
<div class="grandparent"><div class="parent"><div class="child"><span class="subchild"></span></div></div><div class="surrogateParent1"></div><div class="surrogateParent2"></div> </div>
// Selecting an element's direct parent // returns [ div.child ] $("span.subchild").parent(); // Selecting all the parents of an element that match a given selector // returns [ div.parent ] $("span.subchild").parents("div.parent"); // returns [ div.child, div.parent, div.grandparent ] $("span.subchild").parents(); // Selecting all the parents of an element up to, but *not including* the selector // returns [ div.child, div.parent ] $("span.subchild").parentsUntil("div.grandparent"); // Selecting the closest parent, note that only one parent will be selected // and that the initial element itself is included in the search // returns [ div.child ] $("span.subchild").closest("div"); // returns [ div.child ] as the selector is also included in the search $("div.child").closest("div");
子节点
子节点的遍历方法有:$.fn.children()
and $.fn.find()
。
$.fn.children()
只找直接子节点,$.fn.find()迭代遍历所有的子节点。示例如下:
// Selecting an element's direct children // returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ] $("div.grandparent").children("div"); // Finding all elements within a selection that match the selector // returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ] $("div.grandparent").find("div");
兄弟节点
遍历兄弟节点的基本方法有:$.fn.prev()
;$.fn.next();$.fn.siblings();$.fn.nextAll();.fn.nextUntil()
, $.fn.prevAll()
and $.fn.prevUntil()
.
示例如下:
// Selecting a next sibling of the selectors // returns [ div.surrogateParent1 ] $("div.parent").next(); // Selecting a prev sibling of the selectors // returns [] as No sibling exists before div.parent $("div.parent").prev(); // Selecting all the next siblings of the selector // returns [ div.surrogateParent1, div.surrogateParent2 ] $("div.parent").nextAll(); // returns [ div.surrogateParent1 ] $("div.parent").nextAll().first(); // returns [ div.surrogateParent2 ] $("div.parent").nextAll().last(); // Selecting all the previous siblings of the selector // returns [ div.surrogateParent1, div.parent ] $("div.surrogateParent2").prevAll(); // returns [ div.surrogateParent1 ] $("div.surrogateParent2").prevAll().first(); // returns [ div.parent ] $("div.surrogateParent2").prevAll().last();
$.fn.siblings()
选择所有的兄弟节点:
// Selecting an element's siblings in both directions that matches the given selector // returns [ div.surrogateParent1, div.surrogateParent2 ] $("div.parent").siblings(); // returns [ div.parent, div.surrogateParent2 ] $("div.surrogateParent1").siblings();
转载于:https://www.cnblogs.com/davidwang456/archive/2013/04/18/3029720.html
jquery学习手记(8)遍历相关推荐
- jquery学习手记(7)Data_utility_index方法
Data方法 Js对dom元素增加一个属性时,你必须处理一些浏览器内存泄漏的问题.Jquery提供了一个元素保存数据的方法,该方替你管理内存问题.示例: // Storing and retrievi ...
- jquery学习手记(10)事件简介
1. 使用jquery监听的方法有许多种: // The many ways to bind events with jQuery // Attach an event handler directl ...
- jquery学习手记(9)事件基础知识
1. jquery事件机制提供了两个事件相关的帮助函数: $.fn.hover 提供一个或者两个传入函数参数 // The hover helper function $( "#menu l ...
- jquery学习手记(5)对象
DOM和DOM元素 DOM是html文件的表现层,它包含了很多DOM元素,宏观上来讲,DOM元素可以被认为是web页面的一个片段.DOM的形式有类型如<div>, <a>, 或 ...
- jquery学习手记(4)元素的选择与操作
一. 选择元素 id选择器,示例为: 1 // Selecting elements by ID 2 $("#myId"); // note IDs must be unique ...
- jquery学习手记(2)jQuery对象和DOM对象相互转换
DOM对象 DOM文档对象模型,每一份DOM都可以表示成一棵树. 可以通过js中的getElementById或者getElementById来获取DOM对象. DOM对象可以使用js中的方法. 示例 ...
- jquery学习手记(1)
1.$ vs $() $()方法中的参数是jQuery选择器并调用该选择器的方法,格式如下所示: $.fn,例子:$("h1").remove();自动接收和返回该选择器的动作. ...
- jquery学习手记(6)CSS, Styling, Dimensions
Css方法 // Getting CSS properties $("h1").css("fontSize"); // returns a string suc ...
- jquery学习手记(3)属性
属性的格式如下: $.fn.attr 该格式既可以获取属性的值也可以设置属性的值.示例如下: 设置属性 1 // Setting attributes 2 $("a").attr( ...
最新文章
- 【普及组模拟赛】家族
- 看TensorFlow如何玩转深度学习
- PHP日期、时间戳相关的小程序
- 【HYSBZ - 2763 】飞行路线 (分层图最短路,最短路dp)
- torch.cuda.is_available(),torch.cuda.device_count(),torch.cuda.get_device_name(0)
- unity3D游戏开发实战原创视频讲座系列9之塔防类游戏开发第一季
- 请大家帮忙,帮我看一下.net的这个问题
- vs2015 ankhsvn插件(AnkhSVN) v2.7.0.6493
- [luogu4315] 月下“毛景树”
- 【蓝桥杯】欧拉定理 + 欧拉数线性筛法
- 2020年最好用的离线下载网盘,不限速度和空间
- 《智能对话机器人开发实战20讲》--学习笔记--AIML基础功能拓展-与互联网的集成
- 做自己的神——极高自由度的功能游戏:我的世界
- 学习ZYNQ之FPGA2(开发板资源初探)
- 亿级流量电商详情页系统实战-1.小型电商网站的商品详情页的页面静态化架构以及其缺陷
- 2014 hack.lu oreo house of sprit
- 04 关于OSPF的环回口
- SMT阻容件常用规格参数
- iOS UIslider 设定滑块的大小
- 【操作系统】30天自制操作系统--(27)文件操作
热门文章
- java xsl生成word文件_导出生成xsl文件
- php流调签名,微信接口签名及调用流程详解 - 黎明互联-官方博客 - 黎明互联 - 区块链培训,PHP培训,IT培训,职业技能培训,追求极致!改变您的职业生涯!...
- Socket基础API介绍
- 三层交换机如何封装trunk_锐捷交换机常用配置命令汇总
- 67. Leetcode 450. 删除二叉搜索树中的节点 (二叉搜索树-基本操作类)
- 31. Leetcode 82. 删除排序链表中的重复元素 II (链表-双指针)
- 递归行为时间复杂度估算
- 对比学习系列论文SimROD(二): A Simple Adaptation Method for Robust Object Detection
- 文巾解题 8. 字符串转换整数 (atoi)
- Java进阶知识-数组类型