第三章 jQuery 中的DOM操作
Dom是一种文档对象模型，DOM是一种与浏览器、平台无关的接口，使用该接口可以轻松的访问页面中的标签组件。
Dom操作的分类：Dom Core(核心)、HTML Dom 、CSS Dom
Dom 并不是专门用来处理网页，也可以用它来处理一些使用标记语言的文档。例如XML.
Dom Core组成部分：getElementById()、getElementsByTagName()、getAttribute()、setAttribute()等方法
举个例子：（1）使用DOM Core 来获取表单对象的方法：
document.getElementsByTagName("form");
（2）使用Dom Core 来获取某元素的属性的方法：
elements.getAttribute("src");
HTML Dom 出现的比javascript要早，有点：代码书写短。缺点：只能用来处理web文档
举个例子：使用HTML-Dom来获取表单对象的方法
document.forms//html Dom 提供了一个forms 对象
使用HTML-dom来获取某元素的src属性
element.src;
Css-Dom 是针对Css的操作。主要是用来获取和设置style对象的各种属性。来打到改变页面效果
element.style.color="red";
jQuery中的Dom操作：
查找节点：
（1）查找元素节点： 例如 var $li=$(" ul li:eq(1)");
（2）查找属性节点：利用jQuery选择器查找到需要的节点，就可以使用atrr()方法来获取各种属性和值。attr()方法可以一个或者两个参数。当为一个的时候为获取属性。当为两个的时候为设置属性。
创建节点：
（1）创建元素节点：例如创建一个li元素 var $li_1=$("<li></li>"),将li元素插入到ul中 $("ul").append($li_1):
（2）创建文本节点：就是在元素节点中添加属性，这里不在多说
插入节点：
（1）主要介绍方法：（a）.append()向匹配元素（内部）（追加）元素例如$("p").append("<b>你好</b>");---------->
（b ）.appendTo() 效果一样。写法上有差别
（c ）prepend() 向每个匹配元素 （内部）（前置）内容
（d）prependTo().......
（e）after()向每个匹配元素之后插入内容
（f ）insertAfter().........
（g）before() 向每个匹配元素之前插入内容
（h）insertBefore()............
删除节点：
（1）remove()方法：从DOM中删除匹配的元素。传入的参数用户根据jQUERY 表达式筛选元素
使用个该方法后，该节点所包含的所有后代节点将同时删除，返回值是一个指向已被删除的节点的引用。
例如：var $li=$("ul li:eq(0)").remove();//获取ul下面第一个li元素后，将它从网页上删除
$li.appendTo("ul");//把刚才删除的节点由添加到<ul>中
通过传入的参数来选择性的删除
例如：$("ul li").remove("li[title!=菠萝]");//将<li>元素中属性title不等于“菠萝”的 li 元素删除，也可以写成 $("ul li[title!=菠萝]").remove();
（2）empty()方法 ：并不是删除节点。而是清空节点。它能清空元素中的所有的后代节点
注意：清空节点只是清空标签里面的文本，并没有清空里面的属性。
复制节点：
（1）clone()
例如：$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前的li节点，并追加到<ul>标签里面
})
如果让新元素也有复制行为：
$(this).clone(true).appendTo("body")//复制的节点仍有复制的功能，传递的参数true,含义是复制元素的同时，复制了元素所绑定的事件。
替换节点：
（1）replaceWith()将所匹配的元素都替换成指定的HTML或者DOM元素
例如：$("p").replaceWith("<stront>哈哈</strong>");也可以使用jquery两一个方法replaceAll()作用只是颠倒了操作位置。例如：$("<stront>哈哈</strong>").replaceAll("p");
包裹节点：
（1）如果要将某个节点用其他标记包裹起来，jquery提供相应方法即wrap()
例如：$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来 ------------>单独包裹
（2）wrapAll() 整体包裹
（3）wraplnner()该方法将每一个匹配的元素的子内容）（包括文本节点）用其他结构化标签包裹起来
属性操作:
（1）在jquery 中用attr()方法来获取和设置元素属性，用removeAttrr()方法来删除元素属性。
就是传递一个参数，就是获取属性，传递两个参数就是设置属性，也可以通过名值对形式设置多个属性，类似方法还有 html().text(),height(),width().val().css().
（2）删除属性
例如：$("p").removeAttr("title");//删除p元素的title属性
样式操作：
（1）获得样式和设置样式都是通过调用attr()方法，通过传入的参数个数就可以轻易实现
（2）追加样式：addClass() 例如$("p").addClass("antohr"); .antohr{color:red;},此时CSS将包含新增加进来的样式。CSS中有规定，当给一个元素添加多个样式，就相当于合并了他们的样式 。如果设置有冲突就相当于覆盖。
（3）追加样式addClass()和设置样式attr()的区别,追加样式，是添加一种样式，设置样式是从新指定样式。
（4）移除样式 和addClass()相反 移除样式有removeClass()方法 ，传入什么属性，就移除什么class属性，多个属性要用空格隔开 要是什么都不写，就移除所有class属性
切换样式：
（1）toggle() 例如：$btn.toggle(function(){ //交替动作
................................//显示元素
},function(){
..........................//隐藏元素
})
（2）toggleClass 切换CSS样式(增加删除样式)
（3）hasClass()判断元素是否含有某个class ,如果有，则返回true ,没有返回false.
（4）text() 例如如果要为某元素设置文本内容那么需要传递一个参数。$("p").text("我是新增加的文本");
遍历节点：
（1）children()用于取得匹配元素的子元素集合。$("body").children().
children()方法只考虑只元素，而不考虑任何后代元素（将标签和文本都输出出来）
（2）next()用于取得匹配元素后面紧邻的同辈元素
（3）prev()取得匹配元素前面紧邻的同辈元素
（4）siblings()取得匹配元素前后所有的同辈元素
（5）closest()用来取得最近的匹配元素
例如：给点击目标元素的最近的li元素添加颜色 $(document).bind("click",function(e){
$("e.target").closest("li").css("color","red");
})
（6）Jquery 遍历节点的方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等
CSS-DOM操作：
（1）CSS-DOM简单来说就是读取和设置style属性，style 属性很有用但是不能通过style 来提取设置外部引用的CSS，但是jquery 可以
一些对CSS操作的方法，参见api
（2）offset() 获取元素在当前窗口的偏移量，返回的对象包含两个属性 top ,left,只对可见元素有效
例如：var offert=$("p").offset(); var left =offset.left var top=offset.top
之后。。。。正在完善