jquery学习笔记3 jq遍历
遍历方式:向上(父级元素) 向下(子元素) 水平(同胞元素)
一、向上遍历
- parent() 向上一级 放回被选元素的直接父元素
- parents() 返回被选元素的所有祖先元素 一路向上遍历(父级以及父级的父级等)
- parentsUntil() 返回被选元素与括号内给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});
二、向下遍历
- children() 返回被选元素的所有直接子元素
- find() 返回被选元素的后代元素 一路向下直到最后一个
$(document).ready(function(){
$("div").find("span");
});
$(document).ready(function(){
$("div").find("*");
});
三、水平遍历
1、siblings() 返回被选元素的所有同胞元素
2、next() 返回被选元素的下一份同胞元素
3、nextAll() 返回同胞元素的所有跟随的同胞元素
4、nextUntil() 返回介于两个给定参数(之后)之间的所有的同胞元素
5、prev() 返回被选元素的上一个同胞元素
6、prevAll() 返回被选元素之前的所有同胞元素
7、prevUntil() 返回同胞元素与给定的元素(之前)之间的所有同胞元素
四、过滤
1、first() 方法 返回被选元素的首个元素
eg:
$(document).ready(function(){
$("div p").first(); //div的首个p元素
});
2、last()方法 返回被选元素的最后一个元素
eg:同上;
3、eq()方法 返回被选元素带有指定索引的元素
$(document).ready(function(){
$("p").eq(1); // 表示选取第二个p元素(索引从零开始)
});
4、filter() 方法 返回满足限制条件的元素
eg:
$(document).ready(function(){
$("p").filter(".intro"); //返回类名为intro的所有p元素
});
5、not()方法 返回排除了不匹配标准的所有元素
$(document).ready(function(){
$("p").not(".intro"); //返回除了类名有intro之外的,所有p元素
});
jquery学习笔记3 jq遍历的更多相关文章
- jquery学习笔记3——jq HTML
jQuery最常用的部分就是操作DOM,jQuery提供了一系列操作DOM的相关方法,使其很容易: 一.获取 1.获取内容 text()方法 设置或返回所选元素的文本内容: html()方法 ...
- jquery学习笔记2——jq效果
一.显示隐藏: 可以使用show()和hide()方法来显示隐藏: $("#hide").click(function(){ $("p").hide(); }) ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- 初步学习jquery学习笔记(六)
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
随机推荐
- 34. LotusScript中的错误处理程序
错误处理程序是所有严肃的程序的必要部分.但是在Lotus Notes开发中,很多程序员编写LotusScript代码时,并没有写专门的错误处理代码的习惯.这能够行得通,主要是因为LotusScript ...
- Html中DIV成为超级链接,解决在360浏览器+IE9显示小手图标的兼容性!
Html中DIV成为超级链接,解决在360浏览器+IE9显示小手图标的兼容性! <div style="cursor:pointer;" onclick="sele ...
- Android 音频管理器AudioManager
音频管理器AudioManager,通过它可以管理android系统的音量或直接让系统静音,依旧是通过调用getSystemService()方法获取音频管理器AudioManager对象,获取到该对 ...
- 开源中文分词工具探析(三):Ansj
Ansj是由孙健(ansjsun)开源的一个中文分词器,为ICTLAS的Java版本,也采用了Bigram + HMM分词模型(可参考我之前写的文章):在Bigram分词的基础上,识别未登录词,以提高 ...
- 神经机器翻译(NMT)相关资料整理
作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 简介 自2013年提出了神经机器翻译系统之后,神经机器翻译系统 ...
- js操作
1.1.直接传入Javascript代码,定位元素 js可以点击页面上不显示暂时隐藏(比如下拉列表),但是html文件中存在的属性 WebDriver driver = new FirefoxDriv ...
- Windows下安装Redmine-2.5.3
安装准备 服务器操作系统:Windows Server 2008 R2 Standard,64位操作系统. RailsInstaller版本:2.2.4 (下载地址http://railsinsta ...
- restful Api 风格契约设计器:Swagger-editor和swagger-ui的应用
swagger-editor的安装 swagger-editor应用的yaml语法,有定义变量和数据结构,不明白可以参考其示例 安装步骤: 下载swagger-editor git地址 运行npm r ...
- hdu 1890 Robotic Sort(splay 区间反转+删点)
题目链接:hdu 1890 Robotic Sort 题意: 给你n个数,每次找到第i小的数的位置,然后输出这个位置,然后将这个位置前面的数翻转一下,然后删除这个数,这样执行n次. 题解: 典型的sp ...
- Redux超酷的开发工具Redux-Devtools
超酷的开发工具 Redux-devtools redux-devtools是一个有趣而又高效的redux开发工具,如果你想直接在github上查看相关的内容,请前往这里.事实上,也鼓励大家养成在git ...