锋利的jQuery读书笔记_02_jQuery中的DOM操作

/**
 * 第三章：jQuery中的DOM操作
 */
/* *
 1、DOM操作的分类
 	DOM Core
 		getElementById()/getElementsByTagName()/getAttribute()/setAttribute()
 	HTML-DOM
 		document.forms/element.src
 	CSS-DOM
 		element.style.color
 2、查找节点
 	(1)查找元素节点
 		var $li = $("ul li:eq(1)") ;	//获取<ul>里的第2个<li>节点
 		var li_txt = $li.text() ;		//获取第2个<li>元素的文本内容
 	(2)查找属性节点
 		var $para = $("p") ;			//获取<p>节点
 		var p_txt = $para.attr("title");//获取<p>元素节点属性title
 3、创建节点
 	(1)格式：$(html)
 	(2)创建元素节点
 		var $li_1 = $("<li></li>") ;	//创建第一个<li>元素
 		var $li_2 = $("<li></li>") ;	//创建第二个<li>元素
 		$(ul).append($li_1) ;			//添加到<ul>节点中，使之在网页中显示
 		$(ul).append($li_2) ;			//链式写法：$(ul).append($li_1).append($li_2) ;
 	(3)创建文本节点
 		var $li_1 = $("<li>香蕉</li>") ;	//创建第一个<li>元素，包含文本节点
 		var $li_2 = $("<li>雪梨</li>") ;	//创建第二个<li>元素，包含文本节点
 		$(ul).append($li_1) ;			//添加到<ul>节点中，使之在网页中显示
 		$(ul).append($li_2) ;			//链式写法：$(ul).append($li_1).append($li_2) ;
 	(4)创建属性节点	
 		var $li_1 = $("<li title='香蕉'>香蕉</li>") ;	//创建第一个<li>元素
 		var $li_2 = $("<li title='雪梨'>雪梨</li>") ;	//创建第二个<li>元素
 		$(ul).append($li_1) ;			//添加到<ul>节点中，使之在网页中显示
 		$(ul).append($li_2) ;			//链式写法：$(ul).append($li_1).append($li_2) ;
 4、插入节点
 	a.append(b)			向每个匹配的元素(a)内部后边追加内容(b)
 	a.appendTo(b)		将所有匹配的元素(a)追加到指定的元素(b)内容的后边
 	a.prepend(b)		向每个匹配的元素(a)内部前边追加内容(b)
 	a.prependTo(b)		将所有匹配的元素(a)追加到指定的元素(b)内容的前边
 	a.after(b)			向每个匹配的元素(a)节点后边插入内容(b)
 	a.insertAfter(b)	将所有匹配的元素(a)插入到指定的元素节点(b)后边
 	a.before(b)			向每个匹配的元素(a)节点前边插入内容(b)
 	a.insertBefore(b)	将所有匹配的元素(a)插入到指定的元素节点(b)前边
 5、删除节点
 	remove()			删除DOM中所有匹配的元素,返回一个被删除节点的引用
 	detach()			与remove()方法一样，但是返回的节点以后可以恢复，
 						不会删除该节点绑定的事件等附加数据
 	empty() 			清空所有后代节点
 6、复制节点
 	clone()
 		如果不带参数，则只复制节点
 		如果带参数true，则复制所绑定的事件
 7、替换节点
 	a.replaceWith(b)	b替换a
 	a.replaceAll(b)		a替换b
 8、包裹节点
 	a.wrap(b)			b包裹a	一个b包裹一个a
 	a.wrapAll(b)		b包裹a	一个b包裹所有的a
 	a.wrapInner(b)		a包裹b
 9、属性操作 attr()
 	(1)获取属性和设置属性
		var $para = $("p") ;				//获取<p>节点
		var p_txt = $para.attr("title") ;	//获取<p>节点title属性的值
	
		$("p").attr("title" , "myTitle") ;	//设置p的title属性值为myTitle
		$("p").attr({"title":"myTitle" , "name":"myName"}) ;//设置多个属性
	(2)删除属性
		$("p").removeAttr("title") ;	//删除<p>元素的属性title
 10、样式操作
 	(1)获取样式和设置样式
 		var p_class = $("p").attr("class") ;//获取<p>元素的class
 		$("p").attr("class" , "high") ;		//设置<p>元素的class为high
 	(2)追加样式
 		$("p").addClass("another") ;		//给<p>元素追加another样式
 	(3)移除样式
 		$("p").removeClass() ;				//删除所有的样式
 		$("p").removeClass("high") ;		//删除样式high
 		$("p").removeClass("high another") ;//删除样式high和another
 	(4)切换样式
 		toggle(function(){},function(){}) ;	//切换执行两个方法
 		$("p").toggleClass("another") ;		//重复切换样式another
	(5)判断是否含有某个样式
		$("p").hasClass("another") ;
 11、设置和获取HTML、文本和值
 	html()/text()/val()这三个方法，如果没有参数，则是获取值，如果有参数，则是设置值
 12、遍历节点
 	(1)children()方法
 		获取所有子元素，不包含其它后代元素
 	(2)next()方法
 		获取匹配元素后紧挨着的一个同辈元素
 	(3)prev()方法
 		获取匹配元素前紧挨着的一个同辈元素
 	(4)siblings()方法
 		获取匹配元素前后的所有同辈元素
 	(5)closest("selector")方法
 		该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，
 		如果匹配，返回元素本身；如果不匹配，逐级向上直到找到匹配选择器的元素。
 		如果什么都没有找到，则返回一个空的jQuery对象
 	(6)parent()/parents()/closest()方法
 		parent()	获得集合中每个匹配元素的父级元素
 		parents()	获取集合中每个匹配元素的祖先元素
 		closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
 13、CSS-DOM操作
 	(1)css()/height()/width()
 		这三个方法，如果没有参数，则是获取值，如果有参数，则是设置值
 	(2)常用的
 		offset()		获取元素在当前视窗的相对偏移
 			var offset = $("p").offset() ;	//获取<p元素>的offset()
 			var left = offset.left ;		//获取左偏移
 			var top = offset.top ;			//获取右偏移
 		position()		获取元素相对于最近的一个position样式属性设置为
 						relative或者absolute的祖先节点相对偏移
 			var position = $("p").position() ;	//获取<p元素>的position()
 			var left = position.left ;			//获取左偏移
 			var top = position.top ;			//获取右偏移
 						
 		scrollTop()/scrollLeft()		获取滚动条距离顶端/左侧的距离
 			var $p = $("p") ;	
 			var scrollTop = $p	//获取元素的滚动条距顶端的距离
 			var scrollLeft = $p	//获取元素的滚动条距左侧的距离
 			
 			$("textarea").scrollTop(300) ;//元素的垂直滚动条滚动到指定的位置
 			$("textarea").scrollTop(300) ;//元素的横向滚动条滚动到指定的位置
 
 */