标签：
DOM操作分类：
DOM Core-处理任何一种使用标记语言编写出来的文档。
DOM HTML-提供简明的记号来描述HTML元素及属性。
DOM CSS-针对CSS的操作，主要用于获取和设置style对象的各种属性。
初始页面代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 10 }); 11 </script> 12 </head> 13 <body> 14 <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> 15 <ul> 16 <li title="苹果">苹果</li> 17 <li title="橘子">橘子</li> 18 <li title="菠萝">菠萝</li> 19 </ul> 20 </body> 21 </html>
初始页面效果：
查找节点：
$(selector)：
获取元素节点。
attr()：
获取元素属性。
1 <script type="text/javascript"> 2 $(function(){ 3 //查询元素节点 4 var apple = $("ul :first-child"); 5 //获取元素节点属性 6 var title = apple.attr("title"); 7 alert(title); 8 }); 9 </script>
创建元素节点：
$():
创建元素节点（可以包含元素、属性、文本）。
1 <script type="text/javascript"> 2 $(function(){ 3 //创建元素节点 4 var $li1 = $("<li></li>"); 5 //创建元素文本节点 6 var $li2 = $("<li>苹果</li>"); 7 //创建元素属性节点 8 var $li3 = $("<li title=‘菠萝‘>菠萝</li>") 9 }); 10 </script>
插入元素节点：
append()：
向匹配的元素内部追加内容。
1 <script type="text/javascript"> 2 $(function(){ 3 $("body").append("<div>Hello World!</div>"); 4 }); 5 </script>
appendTo()：
将所有匹配的元素追加到指定的元素中。
1 <script type="text/javascript"> 2 $(function(){ 3 $("<div style=‘background-color:#f00;‘>Hello World!</div>").appendTo($("body")); 4 }); 5 </script>
prepend()：
向每个匹配的元素内部前置内容。
1 <script type="text/javascript"> 2 $(function(){ 3 $("body").prepend("<div>Hello World!</div>"); 4 }); 5 </script>
prependTo()：
将所有匹配的元素前置到指定的元素中。
1 <script type="text/javascript"> 2 $(function(){ 3 $("<div style=‘background-color:#f00;‘>Hello World!</div>").prependTo($("body")); 4 }); 5 </script>
after()：
在每个匹配的元素之后插入内容。
1 <script type="text/javascript"> 2 $(function(){ 3 $("ul").after("<div>freedom!</div>"); 4 }); 5 </script>
insertAfter()：
将所有匹配的元素插入到指定的元素之后。
1 <script type="text/javascript"> 2 $(function(){ 3 $("<div style=‘background-color:#0f0;‘>freedom!</div>").insertAfter("ul"); 4 }); 5 </script>
before()：
在每个匹配的元素之前插入内容。
1 <script type="text/javascript"> 2 $(function(){ 3 $("ul").before("<div>freedom!</div>"); 4 }); 5 </script>
insertBefore()：
将所有匹配的元素插入到指定的元素前面。
1 <script type="text/javascript"> 2 $(function(){ 3 $("<div style=‘background-color:#0f0;‘>freedom!</div>").insertBefore("ul"); 4 }); 5 </script>
标签：
原文地址：http://www.cnblogs.com/qhdxqxx/p/5129147.html
