jQuery节点

1.节点关系

1.1 children()方法
本方法选中某一个元素的所有直接子元素。
语法：$(‘selector’).children()
例如：
$("#box").children().css(“background-color”,“red”);
将#box中所有的子元素背景色都变红

注意：children()里面可以加参数，参数需要是选择器。
            表示既是这个元素的子元素，又满足参数选择器的元素。
	    $("#box").children(".teshu").css("background-color","red");

1.2 find()方法
由于children()只能查找子元素，如果是孙子元素是找不到的。
所以jQuery提供了find()"寻找"的方法。

作用：在某个节点中查找符合选择器要求的后代节点
实例：
	    $("div").click(function(){	
		    //$(this)没有引号，表示触发监听的这个元素，这个元素是某一个div	
		    $(this).find("li").css("background-color","red");
	    });
	    同样的find()里面也可以加选择器。

1.3 parent()方法
作用：表示查找当前节点的直属父节点
实例：$(“p”).click(function(){
$(this).parent().css(“background-color”,“red”);
});
//把点击的p标签的父级元素背景改成红色

1.4 parents()方法
作用：表示查找当前节点的所有祖先节点，直到html节点为止。
实例：$(“p”).click(function(){
$(this).parent().css(“background-color”,“red”);
});
//把点击的p标签的所有祖先节点背景改成红色

1.5 siblings()方法
作用：访问当前节点的所有兄弟节点（除本身之外）
实例：
$(“li”).click(function(){
//常见用法，排他操作。
$(this).addClass(‘selected’).siblings().removeClass(“selected”);
});

1.6 next()、prev()、nextAll()和prevAll()方法
next() 后一个亲兄弟
prev() 前一个亲兄弟
nextAll() 后所有亲兄弟
prevAll() 前所有亲兄弟
实例：
$(this).next().css(“background-color”,“red”);//其他格式一样，以此类推

1.7 节点关系综合查找
现在我们已经知道，在jQuery中可以通过连续打点来调用节点的关系方法。
但是这个操作必须存在一个前提，那就是：
一定要知道当前正在操作的元素是谁

实例：点击一个p节点
	    令这个节点的父元素中所有的p元素显示"我开心"。
	    而其他父元素中所有的p都显示"呜呜呜"
代码：
	$("p").click(function(){	
		//自己开心，自己的兄弟们开心。
		//自己的父亲的兄弟（是另外两个div）的儿子们呜呜呜	
		$(this).html("开心").siblings().html("开心")
					.parent().siblings().children().html("呜呜呜");});

注意：监听是批量的，但是你操作的元素是唯一的，是跟你触碰到的元素有关系这个元素。

2.节点顺序和遍历

2.1 index()方法
index()方法用来获取当前元素在其兄弟节点中的排名，从0开始。
语法：$(‘selector’).index()
例如：

 $(".teshu").click(function(){
			    alert($(this).index());
		    }); 

	    //获得点击节点在其兄弟节点中的排名。

2.2 对应
jquery中的对应实际上指的是eq()函数，他的作用是获取集合中指定序号的节点
需要说明的一点就是序号是从0开始。

语法：$('selector').eq(index)
例如：$('p').eq(2)//表示获取这个p集合中的第三个p
扩展：而之所以在这里称eq为对应，是因为eq能够实现下面的小效果

	点击box1中的p的时候，我们想让box2中对应的p颜色变红 
	$(".box1 p").click(function(){
		$(".box2 p").eq($(this).index()).css("background-color","red");
	}); 

2.3 each()方法
作用：遍历每个节点，然后执行里面的回调函数。

作用：遍历每个节点，然后执行里面的回调函数。
	注意：回调函数中如果存在$(this)，那么它指的是【遍历中当前这一次的这个节点】。
	语法：$('selector').each(func)	
	实例：
			$("div").each(function(){	
				$(this).children().eq(2).css("background-color","red");
			});
	解释：
			$("div")选择了一堆div。然后让每个div依次成为$(this)，然后执行后面的语句。
			所以上述代码的作用是让每一个div中第三个子元素背景色变红。

补充：delay()函数表示延迟：
	$().delay(600).animate();
	$().delay(600).fadeOut(); 
	$().delay(600).show(400); //均表示动画延迟600ms执行

3.节点操作

3.1 内部插入append()、appendTo()、prepend()、prependTo()方法

作用：这四个方法都用来在某个节点内部插入新内容
语法：
A.append(B); //向【A节点内部现有内容之后】追加【B节点】
B.appendTo(A); //将【B节点】追加到【A节点内部现有内容之后】
A.prepend(B); //向【A节点内部现有内容之前】追加【B节点】
B.prependTo(A); //将【B节点】追加到【A节点内部的现有内容之前】

说明：四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点。
例如：
	    $('span').append($('<b>这是后添加的b标签</b>'));
	    
	    //这句话表示要在span内部追加一个b标签，其含义和下面的代码相同。
	    $('<b>这是后添加的b标签</b>').appendTo($('span'));

3.2 外部插入after()、before()、insertAfter()、insertBefore()

作用：相比于前面的四个方法的作用，这四个方法可以认为是给当前节点添加兄弟
语法：
A.after(B); //在【A节点之后】添加【同级节点B】
A.before(B); //在【A节点之前】添加【同级节点B】
A.insertAfter(B); //把【A节点】添加到【B节点之后】
A.insertBefore(B); //将【A节点】添加到【B节点之前】

说明：四个方法所表达的含义大致相同，只不过在语法上略有出入。其中AB均为节点。
	

补充：
	    A.after(B)等价于B.insertAfter(A)			最终B在A的后面
	    A.before(B)等价于B.insertBefore(A)		最终B在A的前面

3.3 改变节点位置

对于jq来说操作的实际上要么是节点，要么是节点组。那么有一条原则在操作节点的时候我们就必须遵守：
通过搜索获得的节点在页面中只能同一时刻出现在一个位置。
这就是beixi总结的‘节点守恒定律’。
简单举个例子来说明一下这个定律：

假设存在HTML结构：
	<div id="box1">	
		<p class="xiaoming">我是小明</p>
	</div>
	<div id="box2">
	</div>
现在执行命令：
	$("#box2").append($(".xiaoming"));
	则HTML页面将变为：
	<div id="box1">
	</div>
	<div id="box2">
		<p class="xiaoming">我是小明</p>
	</div>

特别需要说明的是，在jq中并没有提供所谓的change之类的方法。
因此改变节点的位置还是需要通过append这种方法来实现。

3.4 包裹wrap()

作用：给自己增加一个父类(开发中基本没啥用)
语法：A.warp(B)
实例：

	假设HTML结构：
		<p>哈哈</p>
	施加命令：
		$("p").wrap("<div></div>");
	变为：
		<div>
			<p>哈哈</p>
		</div>

3.5 删除节点empty()、remove()

作用：empty()表示删除指定节点中的内容，而remove()则表示移除自己
语法：
A.empty() 等价于 A.html(‘’);
A.remove();

3.6 克隆clone()

作用：相当于js中的cloneNode操作，即克隆的节点在页面中没有自己的位置。
需要通过append等操作才能够追加到页面当中。
语法：
A.append(B.clone)