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.dotdotdot.js使用方法详解
Jun 22 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
多文件上载系统完整版
2006/10/09 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
公司股份合作协议书
2014/12/07 职场文书
先进党支部申报材料
2014/12/24 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS