jquery快速入门（四）
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 中,可以对元素的属性执行获取 ...
随机推荐
- BZOJ_1100_[POI2007]对称轴osi_KMP+计算几何
BZOJ_1100_[POI2007]对称轴osi_KMP+计算几何 Description FGD小朋友——一个闻名遐迩的年轻数学家——有一个小MM,yours.FGD小朋友非常喜欢他的MM,所以他 ...
- nginx安装部署(支持https)
1 安装环境准备 1.1 准备环境清单 以下是基本环境清单列表: 软件名称 版本号 说明信息 Linux CentOS 6.7 部署机器只需为Linux系统即可,无严格要求 1.2 ...
- C# - 如何让类型可以比较
IComparable<T> .NET 里,IComparable<T>是用来作比较的最常用接口. 如果某个类型的实例需要与该类型的其它实例进行比较或者排序的话,那么该类型就可 ...
- 简单又实用的分享！SharePoint母版页引用（实战）
分享人:广州华软 极简 一. 前言 此SharePoint 版本为2013,请注意版本号.此文以图文形式,描述了根网站及子网站引用母版页,需要注意的点已用图文形式以标明. 本文适用于初学者. 二. 目 ...
- JS的 try catch使用心得
try{ //正常执行 }catch(e/*你感觉会出错的 错误类型*/){ // 可能出现的意外 eg:用户自己操作失误 或者 函数少条件 不影响下面的函数执行 // 有时也会用在 比如 focus ...
- #Java学习之路——基础阶段二（第九篇）
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- Kubernetes 在生产环境中常用架构
Kubernetes 在生产环境中常用架构 首先,我们来梳理下Kubernetes生产架构,其设计适用于绝大多数环境.如下图所示 在该架构中,我们可以将其分为四层,如下: Client层:即Kuber ...
- 购物网站首页（学习ING）
这几天在学着做购物网站,初步的完成了首页的框架吧,记录下.慢慢加强.主要难点,是样式的设置问题,如果自己想,自己摸索,可能会需要很长的调试.也是一个孰能生巧的过程吧,有些部分没有按照学习资料的方法也做 ...
- 我的秋招经验分享（已拿BAT头条网易滴滴）
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...
- uni-app—从安装到卸载
uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-ap ...