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快速入门（四）的更多相关文章

  1. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  2. jquery快速入门（二）

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  3. AndroidStudio快速入门四：打造你的开发工具，settings必备

    http://blog.csdn.net/jf_1994/article/details/50085825 前言:这里是使用AS的基本设置,适合新入手的朋友阅读,将这里介绍的设置完基本使用无忧啦. 1 ...

  4. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  5. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  6. jquery快速入门（三）

    捕获内容和属性 1.DOM 操作 获得内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容,如果不带值则是返回值,如果带值则是修改值,如:$('p') ...

  7. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  8. JQuery快速入门-选择器

    JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...

  9. JQuery快速入门-操作元素的属性和样式

    我们在学习JavaScript时,详细介绍了DOM对象.从DOM树可以得知,对DOM的操作,主要包括:元素的属性.内容.值.CSS. 一.元素属性的操作 在 jQuery 中,可以对元素的属性执行获取 ...

随机推荐

  1. 【缩点+拓扑判链】POJ2762 Going from u to v or from v to u?

    Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...

  2. BZOJ_1662_[Usaco2006 Nov]Round Numbers 圆环数_数位DP

    BZOJ_1662_[Usaco2006 Nov]Round Numbers 圆环数_数位DP Description 正如你所知,奶牛们没有手指以至于不能玩“石头剪刀布”来任意地决定例如谁先挤奶的顺 ...

  3. Redis详解（二）------ redis的配置文件介绍

    上一篇博客我们介绍了如何安装Redis,在Redis的解压目录下有个很重要的配置文件 redis.conf (/opt/redis-4.0.9目录下),关于Redis的很多功能的配置都在此文件中完成的 ...

  4. TensorFlow之DNN（三）：神经网络的正则化方法(Dropout、L2正则化、早停和数据增强)

    这一篇博客整理用TensorFlow实现神经网络正则化的内容. 深层神经网络往往具有数十万乃至数百万的参数,可以进行非常复杂的特征变换,具有强大的学习能力,因此容易在训练集上过拟合.缓解神经网络的过拟 ...

  5. Bootstrap优秀模板-INSPINIA.2.9.2

    下载量最高的Bootstrap管理端模板,完美适配H5,.NET COre.MVC5.Ruby on Rails多种开发环境. 下面是官方介绍:INSPINIA Admin Theme is a pr ...

  6. PHP 技能精进之 PHP-FPM 多进程模型

    PHP-FPM 提供了更好的 PHP 进程管理方式,可以有效控制内存和进程.可以平滑重载PHP配置.那么当我们谈论 PHP-FPM 多进程模型的时候,作为 PHPer 的你了解多少呢? 首先,让我们一 ...

  7. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  8. C# 获取系统当前IE版本号

    1. 注册表中,IE的位置: 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer 2. 通过注册表读取IE配 ...

  9. Java虚拟机一：运行时数据区域

    java虚拟机在执行java程序的过程中,会把内存划分为若干个不同的数据区域.每个区域都有各自的用途,创建和销毁时间,按照<java虚拟机规范(Java SE 7 版)>的规定,虚拟机运行 ...

  10. DataPipeline成功入选微软加速器 企业创新力获业界专家认可

    近日,微软加速器•北京公布最终入选的第13期创新企业名单.作为国内领先的“iPaaS+AI”一站式数据融合服务提供商DataPipeline,历经多轮角逐,在上千家企业激烈竞争中,成功入选. 高手过招 ...