前端编程提高之旅（十四）----jquery DOM操作

            正如乐帝在《招聘后台投递设置联动按钮迭代开发总结》提到web前端js开发分为页面间通信、页面内交互、后端接口存取数据的操作。对于一个页面开发核心在于对DOM的操作。别忘了网页从历史上和本质上来说都是在线的文档而已。DOM操作是对文档的操作，自然而然就成为网页js开发的核心了。

    传统上来说，DOM操作分为三类：DOM core、HTML-DOM、CSS-DOM。

• DOM core在任何使用DOM程序设计语言都可以使用。常见的javascript方法如getElementById()、getElementsByClassName()、getAttribute()、setAttribute()都属于此类。
• HTML-DOM是专门使用js为HTML编写脚本时用到的方法，常见的简明如element.src写法。写法上相对于DOM core要简洁不少。
• CSS-DOM主要用于获取和设置style对象各种属性。

Jquery中DOM操作，乐帝将其分两种：HTML-DOM、CSS-DOM。

整个DOM操作都可以从一句典型HTML语句展开，上帝说要有光，就有了hmtl元素，接着就有了附加的各种可预见的操作。如下图：

一、jquery中的HTML-DOM操作

1.节点操作

（1）插入节点

对于节点的插入操作方法可以分两类，类似中国小学教育“把”字句与“被”字句用法，根据前面jquery对象的主被动划分。

（2）删除节点

主要涉及两个方法的区别：remove方法与detach方法。这两个方法区别在于使用remove方法删除节点后，再次添加此节点引用，原本绑定在此节点的事件、数据都会失效。而后者可以保留下来。

下面举个例子：

<input type="checkbox" id="cr"/> <label for="cr">我已经阅读了上面制度.</label>

$(document).ready(function(){
	var $cr = $("#cr");  //jQuery对象
	var cr = $cr.get(0); //DOM对象，获取 $cr[0]
	$cr.click(function(){
		if(this.checked){ //DOM方式判断
			alert("感谢你的支持!你可以继续操作!");
		}
	})
});

      上述代码后，分别加入以下代码：

	// var removeCr = $cr.remove();
	var removeCr =$cr.detach();
	$("body").append(removeCr);

            当采用remove方法删除节点，再对其引用添加时，没有单击事件被绑定。而采用detach方法删除节点，再添加，仍然保留了单击事件。当然涉及删除再添加并需要绑定事件的场景，目前项目中还没有遇到。

   （3）复制节点

    复制节点采取clone方法，而clone方法参数如果为true的话，除了复制节点外，节点上绑定的事件也会一并复制。仍然延续上述例子，添加如下代码：

// var cloneCr = $cr.clone();
	var cloneCr = $cr.clone(true);
	$("body").append(cloneCr);

            当有参数true时，被复制的元素的绑定方法也一并被被复制了，而没有参数则没有绑定方法被复制。

   （4）替换节点

    替换节点有两种方法：replaceWith方法、replaceAll方法。这两个方法也满足上述主动、被动关系。

    仍然延续上述代码，使用例子：

$cr.replaceWith("<p>hi</p>");

             此时替换的节点没有绑定事件，需要重新绑定事件。

    （5）包裹节点

     包裹节点又分为两类：外部包裹方法、内部包裹方法。区别在于是对选定元素进行包裹，还是对其内部元素包裹（wrapInner方法）。外部包裹又分为整个用一个方法包裹（wrapAll方法），还是每个选定元素都包裹（wrap方法）。

   对下述例子，分别采用三种方法：

<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
	<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>

// $("strong").wrap("<b></b>");
	  // $("strong").wrapAll("<b></b>");
	  $("strong").wrapInner("<b></b>");

         通过查看HTML结构，可知包裹的区别。

  （6）遍历节点

   遍历的方法可从dom结构为树形结构理解。从树的上到下，分别会用到上级元素：祖先元素获取方法（parents方法）、父级元素获取方法（parent方法）；同级元素获取的三个方法：next方法、prev方法、sibling方法、closest方法；子级元素方法：children方法。

   2.属性操作

   属性操作主要用到一个attr方法，用于获取设置属性；一个removeAttr方法用于移除属性。

   仍然延续上述例子，输入以下代码：

$("li:eq(0)").attr("title","apple");
$("li:eq(0)").removeAttr("title");

     可知属性操作方法的使用。

   3.样式操作

   这里的样式操作主要从class增删查找，连带改变class定义的css样式。

   仍延续上述例子，添加一个css类：

.test{
	color: red;
}

     对上述例子分别采用四种操作：

$("li:eq(0)").addClass("test");
	 var hasClass = $("li:eq(0)").hasClass("test");
	 // $("li:eq(0)").toggleClass("test");
	 $("li:eq(0)").removeClass("test");

    上述操作分别代表添加类、判断类是否存在、移除或添加类的切换、移除类。

  3.获取各种元素的值

  这里主要涉及到val方法。无论是文本框、下拉列表还是单选框，都可以返回元素值。这个统一性使得再遇到此类情况，不用再现查。

   二、CSS-DOM操作

   这里主要涉及三类方法：css方法、宽高设置的方法、定位的几个方法。

   css获得高度与height获得高度区别在于，css获得的是与样式设置有关的高度，而height获得的是元素整体高度。不会受样式影响。

   offset方法是获取元素相对当前视窗的相对便宜，返回对象包含两个属性，top与left，只对可见元素有效。scrollTop方法与scrollLeft方法用于获得元素的滚动条相对顶端和左侧的距离。

   仍延续上例，具体使用方法：