jQuery 遍历

向上遍历 DOM 树

parent()　　parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents()　　parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。也可以设定参数让它过滤对祖先元素的搜索

　　　　如：$(document).ready(function(){

　　　　　　　　$("span").parents("ul"); //这样它遍历的就是span的所有 ul 祖先元素

　　　　　　 });

parentsUntil()　　返回介于两个给定元素之间的所有祖先元素。

　　　　如：$(document).ready(function(){

　　　　　　　　$("span").parentsUntil("div"); //这样它遍历的就是在span到祖先div之间的所有元素（不包括div)

　　　　　　 });

向下遍历 DOM 树

children() 　　children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。也可以使用可选参数来过滤对子元素的搜索。

　　　　　例：　$('.box1').children('ul.ula').css({ //可以通过传递参数来确定是哪一个子元素

　　　　　　　　　　'backgroundColor' : '#008700',
　　　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　})

find()　找到指定的所有后代元素，如果传递的参数是 * 号，则是指所有的后代元素。

$('.box1').find('span').css({ //找到指定的所有后代元素
　　'backgroundColor' : '#008700',
　　'border' : '1px solid #f00',
})

遍历 - 同胞

　　在 DOM 树进行水平遍历（遍历元素的同胞元素。）：

siblings()　　siblings() 方法返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索。

　　　例：　$('span').siblings('p').css({
　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　'background' : '#008700',
　　　　　　});

next()　　next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

　　　例：　$('p').next().css({
　　　　　　　　'display' : 'block',
　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　'background' : '#008700',
　　　　　　});

nextAll()　　nextAll() 方法返回被选元素的所有跟随的同胞元素。

　　　例：　//nextAll() 方法返回被选元素的所有跟随的同胞元素。
　　　　$('h2').nextAll().css({
　　　　　　'display' : 'block',
　　　　　　'border' : '1px solid #f00',
　　　　　　'background' : '#008700',
　　　　});

nextUntil()　　方法返回介于两个给定参数之间的所有跟随的同胞元素。

　　　　例： $('h2').nextUntil('span').css({
　　　　　　　　'display' : 'block',
　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　'background' : '#008700',
　　　　　　});

prev()　　获取上一个同胞元素，该方法只返回一个元素,您也可以使用可选参数来过滤对同胞元素的搜索。

　　　　例:　$('span').prev('h1').css({ //这里就是指定p元素的上一个兄弟元素,并且必须是h1元素
　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　'background' : '#008700',
　　　　　　});

prevAll()　　获取被选元素的所有前面的同胞元素（兄元素）。您也可以使用可选参数来过滤对同胞元素的搜索。

　　　　例:　$('span').prevAll('h1').css({ //这里就是指定p元素的所有为h1的兄元素
　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　'background' : '#008700',
　　　　　　});

prevUntil()　　方法返回介于两个给定参数之间的所有（兄）同胞元素。不设置参数默认搜索到最前面一个

　　　　例： $('span').prevUntil('p').css({ //要注意这里是指定到p元素之间的，不包括p元素
　　　　　　　　'border' : '1px solid #f00',
　　　　　　　　'background' : '#008700',
　　　　　　});

遍历- 过滤

　缩小搜索元素的范围　　

　　三个最基本的过滤方法（它们允许您基于其在一组元素中的位置来选择一个特定的元素。）：

　1.　first()　　first() 方法返回被选元素的首个元素。

　　　　例:　$('#btn').click(function(){
　　　　　　　　$('div.box2 p').first().css({ //匹配首个带有p元素的div里面的p元素，里面即使有多个p元素也是只返回首个p元素
　　　　　　　　　　'background' : '#000087',
　　　　　　　　})
　　　　　　})

　2.　last()　　last() 方法返回被选元素的最后一个元素。　　

　　　　例： $('div p').last().css({ //匹配最后一个带有p元素的div里面的p元素，里面即使有多个p元素也是只返回最后一个p元素
　　　　　　　　'background' : '#000087',
　　　　　　})

　3.　eq()　eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。　　

　　　　例:　$('ul li').eq(2).css({ //匹配首个带有li元素的ul里面的第3个li(因为从零开始，第一个为零)
　　　　　　　　'background' : '#000087',
　　　　　　})

　　其他过滤方法，比如允许您选取匹配或不匹配某项指定标准的元素。

　　filter()　　filter()方法允许您规定一个标准。返回匹配的元素。　

　　　　例:　$('p').filter('.abs').css({ //filter()方法允许您规定一个标准。返回匹配的元素。
　　　　　　　　'background' : '#000087',
　　　　　　})

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

　　　例：　$('p').not('.abs').css({ //这里的是的返回所有不带有.abs这个类的p元素
　　　　　　　　'background' : '#000087',
　　　　　　})

jquery快速入门（四）的更多相关文章

day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
jquery快速入门（二）
jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...
AndroidStudio快速入门四：打造你的开发工具，settings必备
http://blog.csdn.net/jf_1994/article/details/50085825 前言:这里是使用AS的基本设置,适合新入手的朋友阅读,将这里介绍的设置完基本使用无忧啦. 1 ...
jQuery 快速入门教程
内容目录 jQuery 入门什么是jQuery 如何使用jQuery jQuery的运行原理如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素使用jQue ...
jQuery快速入门专题
jQuery入门专题本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...
jquery快速入门（三）
捕获内容和属性 1.DOM 操作获得内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容,如果不带值则是返回值,如果带值则是修改值,如:$('p') ...
JQuery快速入门-简介
一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
JQuery快速入门-选择器
JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...
JQuery快速入门-操作元素的属性和样式
我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作在 jQuery 中,可以对元素的属性执行获取 ...

随机推荐

koa+mysql+vue+socket.io全栈开发之web api篇
目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd操作的http接口,登录验证使用的是 json web token,跨域方案使用的是 ...
xamarin android如何将Java.Lang.Object类型转成C#类型
问题起源其实这个标题也可以换一个更准确一点,因为我遇到的问题是: xamarin android中的Class继承了Java.Lang.Object ,将json序列化成c#类型时发现无法赋值,序列 ...
来聊一聊不low的Linux命令——find、grep、awk、sed
前几天面试,被一位面试官嫌弃了"你的Linux命令有点low".被嫌弃也挺正常的,因为我的简历写的我自己都有点看不下去:了解Linux常用命令,如ls,tail -f等命令,基本满 ...
大数据与 AI 生态中的开源技术总结
本文由云+社区发表作者:堵俊平在数据爆炸与智能革命的新时代,新的平台与应用层出不穷,开源项目推动了前沿技术和业界生态快速发展.本次分享将以技术和生态两大视角来看大数据和人工智能技术的发展,通过分析 ...
.Net 反射学习
Why?为什么使用反射 MVC ORM EF 都是用的反射.反射可以让程序的扩展性,灵活性得到加强.一起即可动态创建 what 反射原理动态加载类库 ,先添加引用类库,或者复制debug里 ...
Android 个人手机通讯录开发
一.Android 个人手机通讯录开发数据存储:SQLite 数据库开发工具:Android Studio 二.Phone Module 简介 1. 界面展示 2. ...
MongoDB 运维相关的命令
1.在线释放内存 use admindb.runCommand({closeAllDatabases:1}) 注:3.2 版本已经去掉了这个命令了 2.rs.status() 查询复制集状态 3.d ...
apache kafka & CDH kafka源码编译
Apache kafka编译前言 github网站kafka项目的README.md有关于kafka源码编译的说明 github地址:https://github.com/apache/kafka ...
SCSS & SASS Color 颜色函数用法
最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...
idea中去除重复代码提示的灰色波浪线
可以看到上面代码中的灰色波浪线,特别影响观感,可以看到是因为有了重复代码.不确定它是怎么确定重复代码的. 解决办法: Setting--Editor--Inspections--General---D ...

jquery快速入门（四）