向下遍历dom树的jquery方法

  children()方法返回被选元素的所有直接子元素,只会对向下一级对dom树进行遍历。

例子

  

代码:

$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});

也可以可选参数进行过滤

  

代码:

$(document).ready(function(){
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
});

find()方法返回被选元素的后代元素,一路向下直到最后一个后代。

代码:

$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});

下面例子返回div所有后代

代码:

$(document).ready(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"});
});

水平遍历同胞

  siblings()返回被选元素的所有同胞元素。

例子

$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});

您也可以使用可选参数来过滤对同胞元素的搜索。

代码:$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});

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

代码:

$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});

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

代码:

$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});

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

代码:

$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});

prev(), prevAll() & prevUntil() 方法是向后遍历

过滤

  first(),last(),eq()允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

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

代码:

$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});

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

代码:

$(document).ready(function(){
$("div p").last().css("background-color","yellow");
});

eq() 方法返回被选元素中带有指定索引号的元素。

代码:

$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

代码:

$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});

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

提示:not() 方法与 filter() 相反。

代码:

$(document).ready(function(){
$("p").not(".url").css("background-color","yellow");
});

  

jquery遍历之后代的更多相关文章

  1. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  2. Jquery遍历选中的input标签

    $("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...

  3. jquery遍历

    http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...

  4. JQuery:JQuery遍历详解

    JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...

  5. jQuery 遍历函数(w3school)

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...

  6. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

  7. jQuery 遍历用法

    jQuery 遍历 DOM 树 parent() 方法返回被选元素的直接父元素(找爸爸). parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (找长辈). parents ...

  8. jQuery遍历函数

    jQuery遍历函数包含了用于筛选.查找和串联元素的方法. .add():将元素加入到匹配元素的集合中. .andSelf():把堆栈中之前的元素集加入到当前集合中. .children():获得匹配 ...

  9. jQuery -- 光阴似箭(四):jQuery 遍历

    jQuery -- 知识点回顾篇(四):jQuery 遍历 通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称 ...

随机推荐

  1. h5调试工具

    1.Safari:iPhone 调试利器,查错改样式首选: 2.iOS 模拟器:不需要真机,适合调试 Webview 和 H5 有频繁交互的功能页面: 3.Charles: Mac OS 系统首选的抓 ...

  2. 利用JS调取电脑摄像头,实现拍照功能

    1.调取电脑摄像头非常简单,看代码一幕了然 window.addEventListener("DOMContentLoaded", function() { var canvas ...

  3. OpenCV代码提取:flip函数的实现

    OpenCV中实现图像翻转的函数flip,公式为: 目前fbc_cv库中也实现了flip函数,支持多通道,uchar和float两种数据类型,经测试,与OpenCV3.1结果完全一致. 实现代码fli ...

  4. Oralce 的sql问题

    获取两个日期间的工作日, SQL> select dt_time  2    from (select to_date('01-12-2010 08:20:56','dd-mm-yyyy HH: ...

  5. html简单的分享功能

    超级简单的分享. 包括:QQ.QQ空间.新浪微博.腾讯微博,微信(只是一个二维码): 1.首先是html代码: (前端我并不太会,一直用的都是bootstrap) <div class=&quo ...

  6. Django数据模型--字段详解

    一.字段 1.CharField: 字段数据类型为字符串 class Test(models.Model): test = models.CharField(max_length=) 2.Intege ...

  7. Htmlemail邮件发送

    /** * * @param path //发送附件路径 * @param name //附件名称 * @param hostName //邮件服务器名称 * @param port //服务器端口 ...

  8. Java并发基础--Thread类

    一.Thread类的构成 Thread类实现Runnable接口.部分源码如下: 二.Thread类常用方法 1.currentThread()方法 currentThread()方法可以返回代码段正 ...

  9. MongoDB的复制一:复制的原理

    1.复制的角色 复制有三种角色: primay:主库,执行所有的写操作,并把日志写入oplog里. secondary:复制主库的所有操作.读取主库的oplog,并执行日志里的内容.默认情况下,客户端 ...

  10. hbase1.2.6完全分布式安装

    环境,参考之前的两篇博文: jdk1.7 hadoop2.6.0 完全分布式 一个master,slave1,slave2,slave3 zookeeper3.4.6 完全分布式 安装与配置:(以下步 ...