本文实例讲述了jQuery--遍历操作。分享给大家供大家参考，具体如下：jQuery--遍历【后代】向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()

find()
children()find()children() 方法返回每个
元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});


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

返回类名为 "1" 的所有

元素，并且它们是

的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});


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

find() 方法返回属于
后代的所有 元素：
$(document).ready(function(){
$("div").find("span");
});


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

返回
的所有后代：
$(document).ready(function(){
$("div").find("*");
});


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

jquery--遍历【同胞】在 DOM 树进行水平遍历：

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()siblings() 方法返回

的所有同胞元素：
$(document).ready(function(){
$("h2").siblings();
});


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

返回属于

的同胞元素的所有

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


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

next() 方法返回

的下一个同胞元素：
$(document).ready(function(){
$("h2").next();
});


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

nextAll() 方法返回

的所有跟随的同胞元素：
$(document).ready(function(){
$("h2").nextAll();
});


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

nextUntil() 方法返回介于

与

元素之间的所有同胞元素：
$(document).ready(function(){
$("h2").nextUntil("h6");
});


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

prev(), prevAll() & prevUntil() 方法prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）jQuery--遍历【过滤】缩小搜索元素的范围三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。first() 方法选取首个
元素内部的第一个

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


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

last() 方法选择最后一个

元素中的最后一个

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


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

eq() 方法索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

元素（索引号 1）：
$(document).ready(function(){
$("p").eq(1);
});


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

filter() 方法返回带有类名 "url" 的所有

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


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

not() 方法not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。下面的例子返回不带有类名 "url" 的所有

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


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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于jQuery相关内容还可查看本站专题：《jQuery遍历算法与技巧总结》、《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》jQuery遍历算法与技巧总结jQuery操作DOM节点方法总结jQuery扩展技巧总结jquery选择器用法总结jQuery常用插件及用法总结希望本文所述对大家jQuery程序设计有所帮助。

原文地址：http://www.chinasgp.cn/article/4400.html
上一条：« js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全
下一条：js正则{2,6},js正则表达式 »
标签:

相关文章:

热门标签

刚刚发布热门点击发布时间

友情链接

前端技术

[MORE]

前端开发外包

[MORE]

软件开发外包

[MORE]

你有充足的理由选择我们

深圳、上海、杭州、北京前端外包开发:工作10年以上的小伙伴团队，前端开发工作是我们最大的事业。所有您担心的问题，都可以写到合同里。我们会100%努力完成，直到您满意！

首页 前端开发外包 移动app外包 切图外包 小程序外包 ui设计外包 ps网页切图 软件开发外包 热门标签 常见问题 sitemap
Copyright 北京前端外包|北京前端开发外包|北京前端兼职私活 chinasgp.cn 站点支持：35ui.cn
jsjQuery--遍历操作实例小结【后代、同胞及过滤】js大全-js开发-北京前端外包,北京前端外包、前端兼职