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. BZOJ_4448_[Scoi2015]情报传递_主席树

    BZOJ_4448_[Scoi2015]情报传递_主席树 Description 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有n名情报员.每名情报员口J-能有 若T名(可能没有) ...

  2. linux系统日志查看

    系统 日志文件( 可以通过cat 或tail 命令来查看) /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一/var/log/secure ...

  3. Docker的简单实用

    一.docker的常用操作 二.其实用docker search images它就是去hub仓库里面查找:https://hub.docker.com/ 对容器的操作: 搜索镜像:[root@mast ...

  4. python中线程和进程(二)

    目录 线程同步 Event Lock RLock Condition Barrier semaphore GIL 线程同步 线程同步,即线程之间协同工作,一个线程访问某些数据时,其他线程不能访问这些数 ...

  5. 啥？客户叫在DataGridView的左上角添加CheckBox?

    效果图是这样的,如何把CheckBox放到左上角是最重要的. 添加方法 InitColumnInfo() 方法,代码如下. private void InitColumnInfo() { ; Data ...

  6. C#之Socket的简单使用

    Socket是一种通信TCP/IP的通讯接口,也就是HTTP的抽象层,就是Socket在Http之上,Socket也就是发动机.实际上,传输层的TCP是基于网络层的IP协议的,而应用层的HTTP协议又 ...

  7. 从一到万的运维之路,说一说VM/Docker/Kubernetes/ServiceMesh

    摘要:本文从单机真机运营的历史讲起,逐步介绍虚拟化.容器化.Docker.Kubernetes.ServiceMesh的发展历程.并重点介绍了容器化阶段之后,各项重点技术的安装.使用.运维知识.可以说 ...

  8. Java - 静态代理详讲

    Java - 静态代理详讲 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 写在前面:*此章内容比较抽象,所以需要结合实际操作进行讲解*                   *需要有 ...

  9. DSAPI 网页获取本地程序登陆用户

    这是一个非常简单的示例,在网页或其他平台获取程序中已经登陆的用户,当然也可以是其他信息. 源码 Imports DSAPI.网络.HTTP监听_DSWebAPI Public Class Form1 ...

  10. [PHP]引用返回与节省内存

    PHP中的引用是什么:1.在 PHP 中引用意味着用不同的名字访问同一个变量内容2.引用可以被看作是 Unix 文件系统中的硬链接. 3.使用unset的话,只是删除他这个名字自身对内容的引用,并没有 ...