<!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. 颜色缩减（带Trackbar）【从毛星云Opencv3编程入门P75 P111例程改编】

    最近学了点opencv,买了毛星云的书,大力推荐哦. 颜色缩减,自己加了个Trackbar看起来更直观一些. 我一般自己先看一遍程序,脑子里有个大概印象了,再自己写一遍,这样出了错误会印象更深刻. 1 ...

  2. mysql+tomcat+spring 配置心得（从0开始搭环境）

    前几天公司竞一个标要做个POC,前端AugularJs做mobile界面,后端Spring MVC做Restful API供前端调用. 时间紧急,大家都忙,so我这个不写代码的闲人花一上午配了一套Sp ...

  3. [转]用Python读写Excel文件

    [转]用Python读写Excel文件   转自:http://www.gocalf.com/blog/python-read-write-excel.html#xlrd-xlwt 虽然天天跟数据打交 ...

  4. JAVA 多态和异常处理作业——动手动脑以及课后实验性问题

    1.  阅读以下代码(CatchWho.java),写出程序运行结果: 1)  源代码 public class CatchWho { public static void main(String[] ...

  5. python中文处理

    源码文件为utf-8格式  CODEC = 'utf-8': VS在“高级保存选项”中选择“UTF-8 65001” input(u'中文');print(u'中文')

  6. spring3表达式语言(SpEL)

    使用SpEl进行表达式操作,基本操作如下: <!--第一步,构建解析 --> ExpressionParser parser = new SpelExpressionParser(); & ...

  7. 20145236 《Java程序设计》第九周学习总结

    20145236 <Java程序设计>第九周学习总结 教材学习内容总结 第十六章 整合数据库 JDBC简介 1.JDBC是java联机数据库的标准规范.它定义了一组标准类与接口,标准API ...

  8. sap快捷搜索菜单栏

    对于像我这样的初学者来说,用好SAP菜单栏是非常重要的.正好,偶然发现了标准的菜单搜索程序,就分享下. REPORT:SSM_SEME T-CODE:SEARCH_SAP_MENU 菜单节点表:sme ...

  9. SQL Server数据库（作业）

    create datebase zuoye2gouse zuoyegocreate table student --学生表( Sno varchar(20) not null primary key, ...

  10. Metro UI（Win 8风格）页面设计小记

    一.Metro风格菜单——简单 HTML <div class="pagina "> <div class="linha"> <d ...