JQuery学习之遍历
1.祖先：向上遍历DOM树
**parent():返回被选中元素的直接父元素，该方法只会向上一级对DOM树进行遍历
$(document).ready(function(){
$("span").parent();
});
**parents():返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)
$(document).ready(function(){
$("span").parents();
});
**parents():这个方法也可以使用可选参数来过滤对祖先元素的搜索
$(document).ready(function(){
$("span").parents("ul");
});
**parentsUntil():返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});
2.后代：向下遍历DOM树
**children():返回被选元素的所有子元素，该方法只会向下一级对DOM树进行遍历
$(document).ready(function(){
$("div").children();
});
**children():也可以使用可选参数来过滤对子元素的搜索
$(document).ready(function(){
$("div").children("p.1");
});
**find():返回被选元素的后代元素，一路向下直到最后一个后代
$(document).ready(function(){
$("div").find("*"); //返回<div>的所有后代
$("div").find("span"); //返回属于<div>后代的所有<span>元素
});
3.同胞：在DOM树进行水平遍历
**siblings()方法：返回被选元素的所有同胞元素
$(document).ready(function(){
$("h2").siblings(); //返回<h2>的所有同胞元素
$("h2").siblings("p"); //返回属于<h2>的同胞元素的所有<p>元素
});
**next()方法:返回被选元素的下一个同胞元素
$(document).ready(function(){
$("h2").next();
});
**nextAll()方法：返回被选元素的所有跟随的同胞元素
$(document).ready(function(){
$("h2").nextAll();
});
**nextUntil()方法：返回介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){
$("h2").nextUntil("h6"); //返回介于两个参数之间的所有跟随的同胞元素
});
**prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似，只不过方向相反而已，它返回的是前面的同胞元素
4.过滤：缩写搜索元素的范围；
**first():返回被选元素的首个元素
$(document).ready(function{
$("div p").last(); //选择最后一<div>元素中的最后一个<p>元素
});
**eq():返回被选元素中带有指定索引号的元素，索引号从0开始而不是1.
$(document).ready(function(){
$("p").eq(1);
});
**filter():允许你规定一个标准；不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$(document).ready(function(){
$("p").filter(".url"); //返回带有类名"url"的所有<p>元素
});
**not():返回不匹配标准的所有元素，与filter()方法相反
$(document).ready(function(){
$("p").not(".url");
});
JQuery学习之遍历的更多相关文章
- 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素
jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...
- jQuery 学习04——遍历：定义、向上、向下、同级、过滤
Query 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素. 以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...
- jquery 学习(三) - 遍历操作
HTML代码 <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p&g ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
随机推荐
- Divide and conquer:Showstopper(POJ 3484)
Showstopper 题目大意:数据挖掘是一项很困难的事情,现在要你在一大堆数据中找出某个数重复奇数次的数(有且仅有一个),而且要你找出重复的次数. 其实我一开始是没读懂题意的...主要是我理解错o ...
- maven加载本地lib下的jar包(pom.xml)
1.将本地jar放置到仓储库在jar包目录下 mvn install:install-file -Dfile=sqljdbc4.jar -DgroupId=com.microsoft.sqlserve ...
- 【leetcode】Same Tree（easy）
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
- 【leetcode】Binary Tree Preorder Traversal (middle)★
Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binary tr ...
- 让U盘永不中毒的解决办法
一.背景: 在学校上课的时候,有个老师很潇洒的拿着一个U盘就来教室上课了.然后快上课的时候在电脑上准备播放课件.注意,这一瞬间其妙的事情发生了,课件因为他的U盘中病毒了,打不开了,老师当时笑了.后来又 ...
- ui组件--弹出层layer的使用
帮助文档 下载地址 演示地址
- poj1988(并查集)
题目链接:http://poj.org/problem?id=1988 题意:有n个箱子,初始时每个箱子单独为一列: 接下来有p行输入,M, x, y 或者 C, x: 对于M,x,y:表示将x箱子所 ...
- php 用户登录验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- .net学习笔记---lambda表达式（自执行方法）
http://www.cnblogs.com/jesse2013/p/happylambda.html#b034 lambda表达式 http://www.cnblogs.com/OceanEyes/ ...
- 解决IIS7、IIS7.5中时间格式显示的问题
今天在用IIS7的时候发现一个关于时间格式的问题,当我在ASP中使用now()时间函数的时候,日期是以"/"来分隔,而不是以"-"来分隔的,使得我在运行程序的时 ...