jQuery中的DOM操作

DOM是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。简单来说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给软件设计师和开发者提供一套标准的方法，让他们能够轻松获取和操作页面中的数据、脚本和表现层对象。

1.DOM的概念:DOM是英文Document Object Model的缩写,其意思是文档对象模型,根据W3C DOM规范, DOM是一种与浏览器，平台以及语言无关的接口。

2.DOM的作用:DOM解决Netscape的JavaScript和Microsoft JScript之间的冲突,给与了web设计师和开发者一套标准的方法

3.DOM操作的分类

　　(1)DOM core(核心)

　　(2)HTML DOM

　　(3)CSS  DOM

4.使用DOM Core来获取表单对象的方法:document.getElementsByTagName("from");

5.使用DOM Core来获取某元素的src属性的方法:element.getAttribute("src");

6.设置某元素style对象颜色的方法:element.style.color="red";

7.查找节点：

 ( 1)查找元素节点

获取元素节点并打印他的文本内容：

Var $li=$(“ul li:eq(1)”);// 获取<ul>里第2个<li>节点

Var $para=$(“p”);//获取<p>节点

Var li_text=$li.text();//获取第二个<li>元素节点的文本内容

Alter(li_text);//打印文本内容

  (2)查找属性节点

  利用attr()方法来获取它的各种属性的值。Attr() 里的

参数是一个时：是要查询的属性的名称，也可以是两个。

获取属性节点并打印他的文本内容：

Var $para=$(“p”);//获取<p>节点

Var p_text=$para.attr(“title”);//获取<p>元素节点属性的title

Alter(“p_text”);//打印title属性值

8.插入节点:

方法	描述	示例
prependTo()	将所有匹配元素前置到指定元素中。	HTML代码： <p>我想说</p> ；jQuery代码：$ ("<b>你好</b>").prependTo(“p”);结果： <p><b>你好</b>我想说：</p>
after()	在每个匹配元素之后插入内容。	HTML代码： <p>我想说：</p> ；jQuery代码：$("p").after("<b>你好</b>");结果： <p>我想说： </p> <b>你好</b>
insertAfter()	将所有匹配元素插入到指定元素后面。	HTML代码： <p>我想说</p> ；jQuery代码：$ ("<b>你好</b>").insertAfter(“p”);结果： <p>我想说： </p> <b>你好</b>
before()	在每个匹配元素之前插入内容。	HTML代码： <p>我想说：</p> ；jQuery代码：$("p").before("<b>你好</b>");结果： <b>你好</b> <p>我想说：</p>
insertBefore()	将所有匹配元素插入到指定元素前面。	HTML代码： <p>我想说：</p> ；jQuery代码：$("p"). insertBefore("<b>你好</b>");结果： <b>你好</b> <p>我想说：</p>
append()	向每个匹配元素内部追加内容	HTML代码： <p>我想说</p> ；jQuery代码：$("p").append("<b>你好</b>"); 结果： <p>我想说：<b>你好</b> </p>
appendTo()	将所有匹配元素追加到指定元素中。	HTML代码： <p>我想说</p> ；jQuery代码：$ ("<b>你好</b>").appendTo(“p”); 结果： <p>我想说：<b>你好</b> </p>
prepend()	向每个匹配元素内部前置内容。	HTML代码： <p>我想说：</p> ；jQuery代码：$("p").prepend("<b>你好</b>"); 结果： <p><b>你好</b>我想说：</p>

9.删除节点:(1)remove(),(2)empty()

10.复制节点

$("ul li").click(function () {
            //注意参数true 
            $(this).clone(true).appendTo("body");
           })

11.替换节点:replaceAll()方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作。

12.attr()方法，用于获取标签元素的属性，也可以用于设置标签元素的属性值,是将原来的属性替换为新的属性，而不是追加。

13.attr()和addClass()的区别

方法	addClass()	Attr()
用途	追加样式	设置样式
对同一个网页元素操作	<p>test</p>
第一次使用	$(“p”).addClass(“high”);	$(“p”).attr(“class“,“high”);
第一次结果	<p class=“high”>test</p>
再次使用方法	$(“p”).addClass(“another”);	$(“p”).attr(“class”,“another”);
最终结果	<p class=“high another”>test</p>	<p class=“another”>test</p>

14.CSS-DOM操作的常用方法:css()、height()、offset() 、scrollTop()、scrollLeft()

15.样式中常用的方法:attr(), addClass(), removeClass(), toggleClass(), hasClass()