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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现图片切换效果
Oct 19 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去除重复字的实现代码
2011/09/16 PHP
php通过session防url攻击方法
2014/12/10 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
JS实现公告上线滚动效果
2021/01/10 Javascript
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python更换pip源方法过程解析
2020/05/19 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
创业计划书如何编写
2014/02/06 职场文书
信息总监管理职责范本
2014/03/08 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
融资租赁计划书
2014/04/29 职场文书
3的组成教学反思
2014/04/30 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
美术学专业求职信
2014/07/23 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
雷锋电影观后感
2015/06/10 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
Python实现简单得递归下降Parser
2022/05/02 Python