<!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. on delete cascade 和on update cascade

    这是数据库外键定义的一个可选项,用来设置当主键表中的被参考列的数据发生变化时,外键表中响应字段的变换规则的.update 则是主键表中被参考字段的值更新,delete是指在主键表中删除一条记录:on ...

  2. libsvm 之 easy.py（流程化脚本）注释

    鉴于该脚本的重要性,很有必要对该脚本做一个全面的注释,以便可以灵活的使用libsvm. #!/usr/bin/env python # 这种设置python路径的方法更为科学 import sys i ...

  3. java 多线程7（线程的停止）

    notify(): 是很温和的唤醒线程的方法,它不可以指定清除哪一个异常 interrupt(): 粗暴的方式,强制清除线程的等待状态,被清除的线程会接收到一个InterruptedException ...

  4. 设置DIV最小高度以及高度自适应随着内容的变化而变化

    <!--退租账单--> <div id="bilsli" onmouseover="showBill(this)"> #bilsli{ ...

  5. selenium+python笔记10

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ 我们多添加一些测试场景,比如:删除邮件,查找邮件,发送邮件等等 &qu ...

  6. Java开发Maven环境配置和介绍

    最近很火热的12306的订票软件go-home,我也下载了一份下来了,使用了一下,也从svn中把代码down下来了,但是在eclipse中竟然出错了,依赖的jar包都没有找到,后来才知道人家是用mav ...

  7. node.js应用Redis数据库

    node.js下使用Redis,首先: 1.有一台安装了Redis的服务器,当然,安装在本机也行 2.本机,也就是客户端,要装node.js 3.项目要安装nodejs_redis模块 注意第 3 点 ...

  8. [redis] 普通 RedisPool 的 CRUD 实现

    参考链接: redisTemplate 操作 Maven中Spring-Data-Redis存储对象(redisTemplate) 1.配置RedisTempate类 配置文件 <?xml ve ...

  9. Scrum项目6.0

    sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉很好. 其他人可以了解你的团队在做些什么,并得到重要反馈. 演示是一种社会活动,不同的团队可以在这里相互交流,讨论 ...

  10. nginx服务器在IE下载时，apk,ipa文件变成zip的解决方法

    前端时间公司官方换了服务器,由Apache换成了Nginx.大概看了下,程序运行,文件下载都没问题,过了!正常上线,OK! But,今天突然发现,在IE浏览器下下载APK和IPA的文件是会被自动识别为 ...