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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery仿微信聊天界面
May 06 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 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
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
php析构函数的简单使用说明
2015/08/24 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书