<!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. 删除内容并不能删除field structure -- features_revert

    把内容删了但field structure还在, 在manage_field界面,field还在.http://drupal.stackexchange.com/questions/21501/rev ...

  2. 多重比对multiple alignment

    之前只接触过双序列比对,现在需要开始用多序列比对了. 基本概念:多序列比对 - 百科 常用的 multiple alignment 软件: Muscle ClustalW T-coffee 软件之间的 ...

  3. DedeCMSV57数据库结构文档

        表名:dede_addonarticle(ENGINE=MyISAM/CHARSET=gbk) 说明:Top 字段名 说明描述 具体参数 aid 文章ID mediumint(8) unsig ...

  4. Wifi-Direct

    参考链接:http://developer.android.com/guide/topics/connectivity/wifip2p.html 国内镜像开发文档:http://wear.techbr ...

  5. jmeter 建立一个网络服务的测试计划

    如何创建一个 测试计划 测试一个网络服务. 你会 创建5个用户发送请求到一页. 同时,你会告诉用户运行测试两次. 的总数 请求用户请求(5)x(1)x(重复2次)= 10 HTTP请求. 来 建立测试 ...

  6. python 练习 20

    #!/usr/bin/python # -*- coding: UTF-8 -*- from sys import stdout n = int(raw_input("input numbe ...

  7. (30)odoo中的快捷标签

    * 快捷标签   提供快捷标签是为了简化代码的编码,把复杂的工作封装化   * 找到封装化的源码:  openerp/tools/convert.py   xml_import      self._ ...

  8. Unique Paths II [LeetCode]

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  9. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  10. BZOJ1029: [JSOI2007]建筑抢修(贪心)

    题目链接:BZOJ1029: [JSOI2007]建筑抢修 题解:贪心思想,按结束时间从小到大排序,选花费时间尽量短的建筑维修,用堆维护. #include<stdio.h> #inclu ...