jquery学习笔记--遍历

遍历：用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

$("document").ready(function () {
		// 返回指定元素的父元素
		$("#parent").click(function () {
			$("span").parent().css({
				"color": "red",
				"border": "2px solid red"
			});
		})
		// 返回指定元素的所有父元素
		$("#parents").click(function () {
			$("span").parents().css({
				"color": "green",
				"border": "2px solid green"
			});
		})
		// 返回介于指定元素之间的所有父元素
		$("#parentsUntil").click(function () {
			$("span").parentsUntil("div").css({
				"color": "green",
				"border": "2px solid green"
			});
		})
		// 返回直接子元素
		$("#children").click(function () {
			$("div").children().css({
				"color": "green",
				"border": "2px solid green"
			});
		})
		// 返回符合规则的所有直接子元素
		$("#children1").click(function () {
			$("div").children(".son").css({
				"color": "red",
				"border": "2px solid red"
			});
		})
		// 查找符合条件的后代元素
		$("#find").click(function () {
			$("div").find("span").css({
				"color": "yellow",
				"border": "2px solid yellow"
			});
		})
		// 查找所有后代元素
		$("#find1").click(function () {
			$("div").find("*").css({
				"color": "orange",
				"border": "2px solid orange"
			});
		})
		// 返回所有同胞元素
		$("#siblings").click(function () {
			$("p").siblings().css("color", "orange");
		})
		// 返回下一个同胞
		$("#next").click(function () {
			$("p").next().css("color", "orange");
		})
		// 返回介于指定元素之间的同胞
		$("#nextUntil").click(function () {
			$("p").nextUntil("b").css("color", "orange");
		})
		// 返回指定元素的第一个
		$("#first").click(function () {
			$("div p").first().css("color", "orange");
		})
		// 返回制定元素的最后一个
		$("#last").click(function () {
			$("div p").last().css("color", "orange");
		})
	})