jQuery--遍历操作实例小结【后代、同胞及过滤】


Posted in jQuery onMay 22, 2020

本文实例讲述了jQuery--遍历操作。分享给大家供大家参考,具体如下:

jQuery--遍历【后代】

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

  • children()
  • find()

children() 方法

返回每个 <div> 元素的所有直接子元素:

$(document).ready(function(){
 $("div").children();
});

返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:

$(document).ready(function(){
 $("div").children("p.1");
});

find() 方法

返回属于 <div> 后代的所有 <span> 元素:

$(document).ready(function(){
 $("div").find("span");
});

返回 <div> 的所有后代:

$(document).ready(function(){
 $("div").find("*");
});

jquery--遍历【同胞】

在 DOM 树进行水平遍历:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

siblings() 方法

返回 <h2> 的所有同胞元素:

$(document).ready(function(){
 $("h2").siblings();
});

返回属于 <h2> 的同胞元素的所有 <p> 元素:

$(document).ready(function(){
 $("h2").siblings("p");
});

next() 方法

返回 <h2> 的下一个同胞元素:

$(document).ready(function(){
 $("h2").next();
});

nextAll() 方法

返回 <h2> 的所有跟随的同胞元素:

$(document).ready(function(){
 $("h2").nextAll();
});

nextUntil() 方法

返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:

$(document).ready(function(){
 $("h2").nextUntil("h6");
});

prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)

jQuery--遍历【过滤】

缩小搜索元素的范围

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法

选取首个 <div> 元素内部的第一个 <p> 元素:

$(document).ready(function(){
 $("div p").first();
});

last() 方法

选择最后一个 <div> 元素中的最后一个 <p> 元素:

$(document).ready(function(){
 $("div p").last();
});

eq() 方法

索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):

$(document).ready(function(){
 $("p").eq(1);
});

filter() 方法

返回带有类名 "url" 的所有 <p> 元素:

$(document).ready(function(){
 $("p").filter(".url");
});
$("p.url").css("background-color","yellow"); //效果相同

not() 方法

not() 方法返回不匹配标准的所有元素。

提示:not() 方法与 filter() 相反。

下面的例子返回不带有类名 "url" 的所有 <p> 元素:

$(document).ready(function(){
 $("p").not(".url");
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery遍历算法与技巧总结》、《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python绘制圆柱体的方法
2018/07/02 Python
Python socket处理client连接过程解析
2020/03/18 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
常务副总经理岗位职责
2014/04/12 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
个人年终总结范文
2015/03/09 职场文书
公司酒会主持词
2015/07/02 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js