<!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. 深入理解React(二) —— 数据流和事件原理

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...

  2. unity3d magnitude的意义

    http://blog.csdn.net/fzhlee/article/details/8663564   magnitude (Read Only) 返回向量的长度,也就是点P(x,y,z)到原点( ...

  3. Unity3D研究院编辑器之不实例化Prefab获取删除更新组件（十五）

    http://www.xuanyusong.com/archives/3727 感谢楼下的牛逼回复更正一下,我表示我也是才知道.. 其实不需要实例化也能查找,你依然直接用GetComponentsIn ...

  4. 连续型变量的推断性分析——t检验

    连续型变量的推断性分析方法主要有t检验和方差分析两种,这两种方法可以解决一些实际的分析问题,下面我们分别来介绍一下这两种方法 一.t检验(Student's t test) t检验也称student ...

  5. Javascript脚本应该放在哪里？

    1.<head> <srcipt>在被调用的时候才执行(页面加载前执行)</script> </head> 2. <srcipt>在被调用的 ...

  6. memset,memcpy,memcmp用法

    void* memset(void *s, int ch, size_t n); 将s所指向的某一块内存中的前n个字节的内容全部设置为ch指定的ASCII值. 例如:memset(lpMyStruct ...

  7. PHP读取文件夹目录，按时间排序，大小排序，名字排序

    工作中有时候会遇到文件存储数据,但是在前台显示的时候又因为没有数据库,无法使用上传或最后一次修改日期字段排序,所以有了如下代码: <?php $dir = "./";//目录 ...

  8. PHP框架学习错误总结

    错误一: Fatal error: “Uncaught exception 'Zend_Controller_Response_Exception' with message 'Cannot send ...

  9. hdu-----(1532)Drainage Ditches(最大流问题)

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. content.boundingRectWithSize计算出来的高度不准

      计算出来的高度会少一行的高度,最后一行会显示不全.减掉padding会解决这个问题.   let padding = self.reviewText.textContainer.lineFragm ...