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. loj6271「长乐集训 2017 Day10」生成树求和 加强版

    又是一个矩阵树套多项式的好题. 这里我们可以对每一位单独做矩阵树,但是矩阵树求的是边权积的和,而这里我们是要求加法,于是我们i将加法转化为多项式的乘法,其实这里相当于一个生成函数?之后如果我们暴力做的 ...

  2. BZOJ_3879_SvT_后缀数组+单调栈

    BZOJ_3879_SvT_后缀数组+单调栈 Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个 ...

  3. BZOJ_1369_[Baltic2003]Gem_树形DP

    BZOJ_1369_[Baltic2003]Gem_树形DP Description 给出一棵树,要求你为树上的结点标上权值,权值可以是任意的正整数 唯一的限制条件是相临的两个结点不能标上相同的权值, ...

  4. nginx用户认证与htpasswd命令

    最近在搭建ELK,然后ELK的kibana界面想添加一个访问限制,看到kibana有个插件x-pack,本来想用用,发现是收费的,就放弃了,然后就想着想配置下nginx的认证访问来实现简单的访问登陆. ...

  5. 腾讯面试：一条SQL语句执行得很慢的原因有哪些？---不看后悔系列

    说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你"输入URL回车之后,究竟发生了什么"一样,看看你能说出多少了. 之前腾讯 ...

  6. Linux学习_012_Centos 6.8 安装 Netcat

    测试中,需要通过 Netcat 发送数据. 配置环境:CentOS 6.8 1.下载安装包到指定目录,例如本博主的是:/opt/software/ wget https://sourceforge.n ...

  7. 文本离散表示（一）：词袋模型（bag of words）

    一.文本表示 文本表示的意思是把字词处理成向量或矩阵,以便计算机能进行处理.文本表示是自然语言处理的开始环节. 文本表示按照细粒度划分,一般可分为字级别.词语级别和句子级别的文本表示.字级别(char ...

  8. ASP.NET Core中实现单体程序的事件发布/订阅

    标题:ASP.NET Core中实现单体程序的事件发布/订阅 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/10468058.html 项目源代码: ...

  9. 开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

    目录 基本原理 方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo gener ...

  10. 【招聘】.NET高级开发、前端高级开发、测试工程师

    .NET架构师 工作地点:厦门-湖里区 工作年限:5年及以上 学历要求:大专或以上 工资范围:15000元 - 25000元 福利待遇:五险一金,带薪年休假,年度旅游,丰富的员工团队活动:生日会.中秋 ...