Jquery基础之DOM操作

Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。

　　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：

View Code

  　构建出的DOM树如下：

　　

　　JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。

　　一、查--查找DOM节点

　　　　查找节点非常容易，使用选择器就能轻松完成各种查找工作。例：查找元素节点p返回p内的文本内容$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。

　　二、建--新建DOM节点 　　　　1、创建元素节点

　　　　　　创建元素节点并且把节点作为

元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：

　　　　　　$li1=$("

")

　　　　　　代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：

　　　　　　$("ul").append($li1); 

　　　　　　添加后页面中只能看到

• 元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

  　　　　　　PS:append()方法是添加DOM节点方法详见增--添加DOM节点。 

  　　　　2、创建文本节点

  　　　　　　使用JQuery的工厂函数$()同样能够创建文本节点，创建文本节点的JQuery代码如下：

  　　　　　　$li2=$("

• 苹果
");

　　　　　　代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：

　　　　　　$("ul").append($li2);

　　　　　　添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。

　　　　3、创建属性节点

　　　　　　创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：

　　　　　　$li3=$("

• 榴莲
");　　　　　　　

　　　　  　代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：

　　　　　　$("ul").append($li3);

　　　　　　添加后页面中能看到"·榴莲"，右键查看页面源码发现新加的属性节点有title='榴莲'属性。

　　　三、增--添加DOM节点

　　　　　　动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

　　　　1、append()方法

　　　　　　append()方法向匹配的元素内部追加内容，　方法如下：$("target").append(element);例：

　　　　　　$("ul").append("

• 香蕉
");

　　　　　　该方法查找ul元素，然后向ul中添加新建的li元素。

　　　　2、appendTo()方法

　　　　　　appendTo()方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒[操作主题的颠倒并非操作结果]操作。方法如下：$(element).appendTo(target);例：

　　　　　　 $("

• 荔枝
• ").appendTo("ul");

  　　　　　　该方法新建元素li，然后把li添加到查找到的ul元素中。

  　　　　3、prepend()方法

  　　　　　　prepend()方法将每匹配的元素内部前置要添加的元素，方法如下：$(target).prepend(element);例：

  　　　　　　$("ul").prepend("

• 芒果
")

　　　　　　该方法将查找元素ul然后将新建的li元素作为ul子节点，且作为ul的第一个子节点插入到ul中。

　　　　4、prependTo()方法

　　　　　　prependTo()方法将元素添加到每一个匹配的元素内部前置，方法如下：$(element).prependTo();例：

　　　　　　$("