<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#div1,

			#div3 {

				width: 400px;

				height: 300px;

				border: 3px solid orange;

				background: #33B2C7;

				float: left;

			}

			#head:after {

				content: '';

				display: block;

				clear: both;

				overflow: hidden;

			}

			#div2,

			#div4 {

				width: 300px;

				height: 200px;

				border: 3px solid goldenrod;

				background: #004099;

			}

			p {

				width: 200px;

				height: 100px;

				border: 3px solid olivedrab;

				background: #0000FF;

				color: white;

			}

			.bd * {

				display: block;

				border: 2px solid gray;

				margin-top: 20x;

			}

			.fl {

				background: orangered;

			}

		</style>

		<script src="jquery-2.2.4.min.js"></script>

		<script>

			$(window).load(function() {

				/*---向下遍历---*/

				//查找第一层级的子元素

				$('#div1').children('p').css({

					'background': 'red'

				});

				//查找所有的子元素

				$('#div1').find('p').css({

					'background': 'red'

				});

				/*------end-----*/

				/*-------向上遍历-----*/

				//次层级父元素

				$('a').parent('#pId').css("background", 'orange');

				//所有的父元素

				$('a').parents().css("border", '1px solid orange');

				//父元素直到某元素

				//				$('a').parentsUntil($('#div3')).html("parentUntil加的");

				/*---------end-------*/

				/*-----同级遍历-----*/

				/* siblings ,next,nextuntil,nextAll,pre, preAll, preUntil*/

				//所有同级

				$('h4').siblings().text(function(i, old) {

					return old + "----siblings()添加的";

				});

				$('h4').next().text(function(i, old) {

					return old + "-----next()添加的";

				})

				$('h4').nextAll().text(function(i, old) {

					return old + "-----nextAll()添加的";

				})

				$('h3').nextUntil('h6', 'h5').text(function(i, old) {

					return old + "------nextUntil('h6', 'h5')添加的";

				})

				$('h3').prev().text(function(i, old) {

					return old + "-----prev()添加的";

				})

				$('h3').prevAll().text(function(i, old) {

					return old + "-------prevAll()添加的";

				})

				$('h4').prevUntil('h1', 'h3').text(function(i, old) {

						return old + "-----prevUntil('h1', 'h3')";

					})

					/*------------------*/

				/*-----直接选择----*/

				/*first last 【filter('p')传入选择器】 【eq(0)传入index】 【not 传入选择器]*/

				var fl = $('.fl');

				fl.first().html(function(i, old) {

					return old + "-----first() 添加的"

				});

				fl.eq(2).html(function(i, old) {

					return old + "-----eq(2) 添加的";

				});

                var p = $('p');

				p.filter('#xx').html(function(i, old) {

					return old + "-----filter('#xx')添加的";

				});

				p.not('#xx').html(function(i, old) {

					return old + "-----not('#xx') 添加的的";

				});

			})

		</script>

	</head>

	<body>

		<div id="head">

			<div id="div1">div1

				<div id="div2">div2

					<p>

						<a>Hello</a>

					</p>

				</div>

				<p><a>机构数量工具</a></p>

			</div>

			<div id="div3">div1

				<div id="div4">div2

					<p id="pId">

						<a>Hello</a>

					</p>

				</div>

			</div>

		</div>

		<div class="bd">

			<p>p</p>

			<h1>H1</h1>

			<h2>H2</h2>

			<h3>H3</h3>

			<h4>H4</h4>

			<h5>H5</h5>

			<h6>H6</h6>

		</div>

		<div class="fl">

			<p>直接选元素1</p>

		</div>

		<div class="fl">

			<p>直接选元素2</p>

		</div>

		<div class="fl">

			<p id="xx">直接选元素3</p>

		</div>

		<div class="fl">

			<p>直接选元素4</p>

		</div>

	</body>

</html>

　　

jQuery 元素遍历的更多相关文章

  1. 前端（jQuery）（8）-- jQuery元素遍历

    1.向下遍历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  3. jquery元素插入、删除、清空

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  4. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  5. Jquery节点遍历

    jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...

  6. jQuery使用（十一）：jQuery实例遍历与索引

    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...

  7. jquery元素插入、删除、清空、找父子级元素

    1)jquery元素插入 <!--位置1--> <div id='test'> <!--位置2--> <div>测试</div> <! ...

  8. jQuery的遍历

    jQuery有众多的方法,但是有些方法过于累赘,所以就精简了一些重要的方法,记住这些方法的(名字,功能,参数) jQuery的遍历 1.add() 将元素添加到集合中 2.children() 返回被 ...

  9. 深入学习jQuery元素过滤

    × 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...

随机推荐

  1. RemoteWebDriver管理

    直接贴代码: @Parameters({"BrowserType","NodeIP","NodePort"}) public void be ...

  2. Unity5.3官方VR教程重磅登场-系列2

    作者:王寒链接:https://zhuanlan.zhihu.com/p/20485529来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 欢迎继续我们的学习. 北京时间 ...

  3. EF Core » 关系

    对初学者理解关系很有用,先留下来,有时间边看边翻译. Caution 注意 This documentation is for EF Core. For EF6.x and earlier relea ...

  4. OneProxy与其它数据库中间件的对比

    OneProxy 优点 性能 缺点 闭源,被商业公司掌控,到时候随别人蹂躏 可维护性极差,缺乏友好的出错信息,光维护这个环节就被他人掌控 定价不明 有没有这样的公司? 大到10wtps,但是没人能理解 ...

  5. 2.2 利用项目模板创建ASP.NET MVC项目

    1.启动VS2012,点击“文件|新建|项目”. 2.在新建项目的窗口中,选择ASP.NET MVC 4应用程序. 3.在新ASP.NET MVC 4项目窗口中的“选择模板”列表中选择“基本”模板,在 ...

  6. CSS小结

    一.1. css必须写在<head></head>里面的<style></style>里面 2. css 由选择器 + 规则组成, 规则由属性和值组成 ...

  7. robotframework笔记15

    资源和变量文件 用户关键字和变量 测试用例文件 和 测试套件 初始化文件只能用于文件在哪里 了,但 资源文件 提供一种机制来分享它们. 自 资源文件结构非常接近测试用例文件,它是 容易创建它们. 变量 ...

  8. (15)odoo配置文件详解

    openerp-server.conf ---------------- [options]; addons模块的查找路径addons_path = E:\GreenOdoo8.0\source\op ...

  9. hdu------(4300)Clairewd’s message(kmp)

    Clairewd’s message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  10. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...