Jquery DOM操作

节点操作

查找节点：
(1) children()：获取匹配的子元素集合
示例：遍历输出ul所有 子节点的文本值

 $("ul").children().each(function(){
	alert($(this).text());
 });

(2) next()：获取匹配元素的后一个同辈元素
nextAll()：获取匹配元素的后面所有同辈元素
示例：

$("#p1").next().css();	-->选取#p1的下一个同辈元素

(3) prev()：获取匹配元素的前一个同辈元素
prevAll()：获取匹配元素的产面所有同辈元素
示例：

$("#p1").prevAll().css();	-->选取#p1前面的所有同辈元素

(4) siblings()：获取匹配元素以外的所有同辈元素
示例：

$("#p1").siblings().css();	

插入节点：
示例标签：

<p id="p1">我是原来的内容</p>

(1)append与appendTo：将内容插入到选中元素结束之前
例如：

	$("#p1").append("<b>内容</b>");
	//或者
	$("<b>内容</b>").appendTo("#p1");
//结果是：
	<p id="p1">我是原来的内容<b>内容</b></p>

(2)prepend与prependTo()：将内容插入到选中元素开始之后
例如：

	$("#p1").prepend("<b>内容</b>");
	//或者
	$("<b>内容</b>").prependTo("#p1");
//结果是：
	<p id="p1"><b>内容</b>我是原来的内容</p>

(3)after：将内容插入到选中元素结束之后
例如：

	$("#p1").after("<b>内容</b>");
//结果是：
	<p id="p1">我是原来的内容</p><b>内容</b>

(4)before：将内容插入到选中元素结束之前
例如：

	$("#p1").before("<b>内容</b>");
//结果是：
	<b>内容</b><p id="p1">我是原来的内容</p>

创建节点：
语法：

$("新节点");

例如：

$("<li>文本</li>")		$("<a>文本</a>")		//注意：没有文本就是空节点

复制节点：

clone()

查找节点:

find()

示例：

$("#sel1").find("option").clone().appendTo("#sel2");		//含义：复制sel1下面的option到sel2控件中去
$("#div1").find("p").css();				//含义：设置#div1里面的p元素的样式

删除节点：选取的节点将会被删除掉，包含里面的内容一并删除

remove()

清空节点：选取的节点中的内容会被清除掉，但节点本身还在（相当于删除的是子元素）

empty()

语法：

$("#div1").empty();		//清空div1节点中的内容
$("#ul1:eq(2)").remove();	//删除ul下的第3个li节点

包裹节点:
(1) wrap()
示例：

$("h1").wrap("<h1><h1>");

效果：

<h1><p>哈哈，我来啦!!!</p></h1>
<h1><p>哈哈，我来啦!!!</p></h1>

(2) wrapAll()
示例：

$("h1").wrapAll("<h1><h1>");

效果：

<h1>
	<p>哈哈，我来啦!!!</p>
	<p>哈哈，我来啦!!!</p
</h1>

(3) wrapInner()
示例：

$("h1").wrapInner("<h1><h1>");

效果：

<p><h1>哈哈，我来啦!!!</h1></p>
<p><h1>哈哈，我来啦!!!</h1></p>

属性和样式操作

(1) attr()和prop()：获取或设置属性
区别：
prop()：只针对固有属性
语法：
获取属性的值：

$("选择器").attr("属性");		如：$("#p1").attr("title");

设置属性的值：

$("选择器").attr("属性","值");		如：$("#p1").attr("name","p");

(2)移除属性：removeAttr();
语法：

	$("选择器").removeAttr("属性");
	$("选择器").removeAttr("属性1 属性n");
例如：
	$("#p1").removeAttr("title num class");		-->移除p1的title num  class三个属性

(3)addClass()：追加样式
语法：

	$("选择器").addClass("样式");		//注意：只能引用.开头的类样式
例如：
	$("#div1").addClass("f");

(4)removeClass()：移除样式
语法：

$("选择器").removeClass("样式");
例如：
$("#div1").removeClass("f");

html()
相当于javaScritp中的inenrHTML属性
语法：
获取：

$("选择器").html();		//没有value属性的标签，都通过html可以获取（包含：标签、文本）

设置：

	$("选择器").html("内容");	//html标签是可以解析的
例如：
	$("#p1").html("<b>内容</b>");

text()
相当于javaScript中的innerText属性
与html()的区别：
text获取：
忽略标签，只获取文本
text设置：
标签也会当成文本显示

val()
相当于javaScript中value属性
注意：
只有表单才有value属性，有value属性的才能用val()方法来获取或设置

val()获取：
		var  变量名 = $("#txtname").val();
val()设置：
		$("#txtname").val("admin");

CSS_DOM：

(1) css()：获取或设置css属性
opacity属性：设置透明度
示例：

$("#div1").css("opacity","0.5");

(2) height()：设置高度
(3) width()：设置宽度

(4) offset()：获取元素在当前窗口的偏移量 top和left只对可见元素有效
示例：

var d = $("#div1").offset();
alert(d.left + "/" + d.top);

事件

事件的绑定：

 on()   //3.0之后用on

  bind()   

语法：

$("选择器").on("事件",function(){  
	.................
});

事件的移除：

 off()    // 对应的绑定方法是：on()

  unbind()	  //	对应的绑定方法是：bind()

语法：

$("选择器").of("事件");

例如：

$("#btn1").off('click');		//移除btn1的点击事件，off只能移除on绑定的事件

事件的合成：移入移出
toggle()：1.9已经被 移除

 hover()

语法：

$("选择器").hover(function(){......} ,  function(){...............});

hover()默认触发事件：
mouseenter和mouseleave

自己使用事件：

$("#txt1").focus(function(){........}).blur(function(){........});
$("#div").mouseover(function(){..........}).mouseout(function(){.......})

事件冒泡：

event.stopPropagation();

事件对象的属性：
1、event.type：获取事件类型
2、event.target：最初触发事件的dom元素
3、event.pageX：鼠标相对于文档的左边缘的位置
4、event.pageY：鼠标相对于文档的右边缘的位置
5、event.which：获取鼠标或者按的键
例如：

//鼠标在文档区域移动时，获取它的坐标点
	$(document).on('mousemove',function(event){
		//获取鼠标的坐标
		var x = event.pageX;
		var y = event.pageY;
	});

动画

(1)隐藏、显示
hide(速度，回调函数)：隐藏
show(速度,回调函数)：显示
toggle(速度,回调函数)：隐藏、显示
注意：速度与回调函数都是可选参数
示例：

$("选择器").hide();
$("选择器").hide(3000);		//指定动画时间
$("选择器").hide(3000,function(){......});	//动画完成后执行的函数

(2)淡出、淡入
fadeIn(速度，回调函数)：淡入
fadeOut(速度，回调函数)：淡出
fadeToggle(速度，回调函数)：淡入/淡出
fadeTo(速度,透明度)：设置透明度

(3)滑动
slideDown（速度，回调函数）：向下滑动
slideUp（速度，回调函数）：向上滑动
slideToggle（速度，回调函数）：向下,上滑动

(5)停止动画

stop()

语法：

$("选择器").stop();

自定义动画：

animate(属性，完成时间);

示例：

$("#div1").animate({top:'600px',left:'1300px',color:'pink','background-color':'orangered'},8000);

注意：
动画涉及颜色必须引入: jquery.color.js
属性涉及-要用引号引起来(‘background-color’:‘orangered’)