jQuery -- 光阴似箭（四）：jQuery 遍历
jQuery -- 知识点回顾篇（四）：jQuery 遍历
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
1. 向上遍历 DOM 树，查找元素的祖先。
parent() 方法，parents() 方法，parentsUntil() 方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
//parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
//parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("#btn_parent").click(function(){
$("#myDiv3").parent().css({"color":"red","border":"3px solid red"});
});
$("#btn_parents").click(function(){
$("#myDiv3").parents().css({"color":"red","border":"3px solid red"});
});
$("#btn_parentsUntil").click(function(){
$("#myDiv3").parentsUntil("body").css({"color":"red","border":"3px solid red"});
});
});
</script>
</head>
<body>
<button type="button" id="btn_parent">parent</button><br/>
<button type="button" id="btn_parents">parents</button><br/>
<button type="button" id="btn_parentsUntil">parentsUntil</button><br/>
<div id="myDiv1" style="width:210px;height:90px;padding: 10px;border:2px solid blue;">
<div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >
<div id="myDiv3" style="width:70px;height:30px;padding: 10px;border:2px solid yellow;" >
</div>
</div>
</div>
</body>
</html>
2. 向下遍历 DOM 树，查找元素的后代。children() 方法，find() 方法。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
//find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("#btn_children1").click(function(){
$("#myDiv1").children().css({"color":"red","border":"3px solid red"});
});
$("#btn_children2").click(function(){
$("#myDiv1").children("div.class1").css({"color":"red","border":"3px solid red"});
});
$("#btn_find1").click(function(){
$("#myDiv1").find("div").css({"color":"red","border":"3px solid red"});
});
$("#btn_find2").click(function(){
$("#myDiv1").find("*").css({"color":"red","border":"3px solid red"});
});
});
</script>
</head>
<body>
<button type="button" id="btn_children1">children</button><br/>
<button type="button" id="btn_children2">children_class1</button><br/>
<button type="button" id="btn_find1">findDiv</button><br/>
<button type="button" id="btn_find2">find*</button><br/>
<div id="myDiv1" style="width:210px;height:140px;padding: 10px;border:2px solid blue;">
<div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >
<div id="myDiv3" style="width:70px;height:40px;padding: 10px;border:2px solid yellow;" >
<p id="myP1" style="width:50px;height:20px;padding: 3px;border:2px solid black;" >
</p>
</div>
</div>
<div Class="class1" style="width:140px;height:30px;padding: 10px;border:2px solid green;" >
</div>
</div>
</body>
</html>
3. 遍历元素的同胞元素：siblings() 方法，next() 方法，nextAll() 方法，nextUntil() 方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
//find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("#btn_siblings").click(function(){
$("#myDiv21").siblings().css({"color":"red","border":"3px solid red"});
});
$("#btn_next").click(function(){
$("#myDiv21").next().css({"color":"red","border":"3px solid red"});
});
$("#btn_nextAll").click(function(){
$("#myDiv21").nextAll().css({"color":"red","border":"3px solid red"});
});
$("#btn_nextUntil").click(function(){
$("#myDiv21").nextUntil("h5").css({"color":"red","border":"3px solid red"});
});
});
</script>
</head>
<body>
<button type="button" id="btn_siblings">siblings</button><br/>
<button type="button" id="btn_next">next</button><br/>
<button type="button" id="btn_nextAll">nextAll</button><br/>
<button type="button" id="btn_nextUntil">nextUntil</button><br/>
<div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
<div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
<div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
<div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
<h5>Hello</h5>
<div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
</div>
</body>
</html>
4. 过滤方法：基于其在一组元素中的位置来选择一个特定的元素。
first() 方法，last() 方法，eq() 方法，filter() 方法，not() 方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//first() 方法返回被选元素的首个元素。
//last() 方法返回被选元素的最后一个元素。
//eq() 方法返回被选元素中带有指定索引号的元素。
//filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
//not() 方法返回不匹配标准的所有元素。
$("#btn_first").click(function(){
$("#myDiv1 div").first().css({"color":"red","border":"3px solid red"});
});
$("#btn_last").click(function(){
$("#myDiv1 div").last().css({"color":"red","border":"3px solid red"});
});
$("#btn_eq").click(function(){
$("#myDiv1 div").eq(2).css({"color":"red","border":"3px solid red"});
});
$("#btn_filter").click(function(){
$("#myDiv1 *").filter("h5").css({"color":"red","border":"3px solid red"});
});
$("#btn_not").click(function(){
$("#myDiv1 *").not("h5").css({"color":"red","border":"3px solid red"});
});
});
</script>
</head>
<body>
<button type="button" id="btn_first">first</button>
<button type="button" id="btn_last">last</button>
<button type="button" id="btn_eq">eq</button>
<button type="button" id="btn_filter">filter</button>
<button type="button" id="btn_not">not</button>
<div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
<div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
<div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
<div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
<h5>Hello</h5>
<div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
</div>
</div>
</body>
</html>
jQuery -- 光阴似箭（四）：jQuery 遍历的更多相关文章
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
- jQuery组织您钞四----jQuery操作DOM
一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. ...
- jQuery通用的全局遍历方法$.each()用法实例
1.jQuery通用的全局遍历方法$.each()用法 2. test.json文件代码: 3. html代码 4.jQuery代码 <script src="jquery-1.3.1 ...
- 原生JS forEach()和map()遍历，jQuery$.each()和$.map()遍历
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
随机推荐
- 翻译：delete语句(已提交到MariaDB官方手册)
本文为mariadb官方手册:DELETE语句的译文. 原文:https://mariadb.com/kb/en/delete/ 我提交到MariaDB官方手册的译文:https://mariadb. ...
- Response.Redirect()和Response.RedirectPermanent()区别
备注:这里我用到了Response.RedirectPermanent()用于做301跳转, 如:我希望访问网站的url访问地址为:http://m.shop/abc.html ,用户输入的访问地址: ...
- Prism 学习：从配置文件中加载 Module
之前我们已经了解过,如何从指定的目录中来加载 Module(原文),现在我们来看,如何从应用程序的配置文件中来加载 Module.以这种方式来加载 Module 的优点包括:1. 被加载的 Modul ...
- linux内核里的字符串转换 ,链表操作常用函数(转)
1.对双向链表的具体操作如下: list_add ———向链表添加一个条目 list_add_tail ———添加一个条目到链表尾部 __list_del_entry ———从链表中删除相应的条目 l ...
- 阿里分布式服务框架Dubbo的架构总结
Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...
- C#设计模式之十外观模式（Facade Pattern）【结构型】
一.引言 快12点半了,要开始今天的写作了.很快,转眼设计模式已经写了十个了,今天我们要讲[结构型]设计模式的第五个模式,该模式是[外观模式],英文名称是:Facade Pattern.我们先从名字上 ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- laravel接值 get post
laravel使用一种简单的方式来访问用户提交的信息. 你可以用统一的方式来访问用户提交的信息,而不用为用户提交信息的方式操心. 引用类:use Illuminate\Support\Facades\ ...
- MySQL服务无法启动 3534
1.环境变量配置完成 2.配置文件编辑完成 3.启动服务(启动不成功,错误信息“MySQL服务无法启动 请键入 NET HELPMSG 3534 以便获得更多的帮助”) 错误原因:mysql安装目录下 ...
- 腾讯.NET&PHP面试题
在整个面试过程中,作为面试者的你,角色就是小怪兽,面试官的角色则是奥特曼,更不幸的是,作为小怪兽的你是孤身一人,而奥特曼却往往有好几个助攻,你总是被虐得不要不要的~ 作为复读一年才考上专科的我,遗憾的 ...