jQuery基础之三 -- 操作DOM

什么是 DOM？
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
Core DOM    定义了一套标准的针对任何结构化文档的对象
XML DOM     定义了一套标准的针对 XML 文档的对象
HTML DOM  定义了一套标准的针对 HTML 文档的对象。

1.查找节点

查找元素节点： var $li = $("ul li:eq(1)");查找<ul>里第二个<li>节点
查找属性节点： var p_txt = $("p").attr("title");获取p元素节点的属性title

2.创建节点 $(html)

创建元素节点： $(html); //根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象返回
   var $li_1 = $("<li></li>");
   var $li_2 = $("<li></li>");
   $("ul").append($li_1).append($li_2);

创建文本节点： 
   var $li_1 = $("<li>aaa</li>"); //即包含元素节点，又包含文本节点
   var $li_2 = $("<li>bbb</li>");
   $("ul").append($li_1).append($li_2);

创建属性节点： 
   var $li_1 = $("<li title='aaa'>aaa</li>"); //即包含元素节点，又包含文本节点, 还包含属性节点
   var $li_2 = $("<li title='bbb'>bbb</li>");
   $("ul").append($li_1).append($li_2);

当HTML字符串是没有属性的元素时, 内部使用document.createElement创建元素, 比如:
//jQuery内部使用document.createElement创建元素:
$("<div/>").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

 否则使用innerHTML方法创建元素:
//jQuery内部使用innerHTML创建元素:
$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>").appendTo(testDiv);

3.插入节点

append();       向每个匹配的元素的内部追加内容 eg: $("p").append("<b>bbbb</b>"); <p>pppp <b>bbbb</b> </p>
appendTo();     将所有匹配的元素追加到指定的元素上eg: $("<b>bbbb</b>").appendTo("p"); <p>pppp <b>bbbb</b> </p>
prepend();      向每个匹配的元素的内部前置内容eg: $("p").prepend("<b>bbbb</b>"); <p> <b>bbbb</b> pppp</p>
prependTo();    将所有匹配的元素前置到指定的元素上eg: $("<b>bbbb</b>").prependTo("p"); <p> <b>bbbb</b> pppp</p>
after();        在每个匹配的元素之后插入内容eg: $("p").after("<b>bbbb</b>"); <p>pppp</p> <b>bbbb</b>
insertAfter();  将所有匹配的元素插入到指定的元素后面eg: $("<b>bbbb</b>").insertAfter("p"); <p>pppp</p> <b>bbbb</b>
before();       在每个匹配的元素之前插入内容eg: $("p").before("<b>bbbb</b>"); <b>bbbb</b> <p>pppp</p>
insertBefore(); 将所有匹配的元素插入到指定的元素前面eg: $("<b>bbbb</b>").insertBefore("p"); <b>bbbb</b> <p>pppp</p>

4.删除节点

remove(); //所有后代节点将同时被删除
   var $li=$("ul li:eq(1)").remove();
   $li.appendTo("ul");
   $("ul li").remove("li[title!=aaa]"); //将元素不等于aaa的<li>元素删除
empty(); //清空元素中的所有后代节点
   $("ul li:eq(1)").empty(); //清空此元素里的内容，注意是元素里

5.复制节点

$("ul li").click(function(){
   $(this).clone(true).appendTo("ul"); //参数true的含义是复制元素的同时复制元素中所绑定的事件，否则不具备任何行为
});

6.替换节点

//如果在替换前绑定了事件，替换后原先绑定的事件和被替换的元素一起消失，需要在新元素上重新绑定事件  
replaceWith(); $("p").replaceWith("<strong>aaa</strong>"); //将所有匹配的元素都替换成指定的HTML或者DOM元素
replaceAll(); $("<strong>aaa</strong>").replaceAll("p"); //与replaceWith相同，只是颠倒了操作

7.包裹节点

wrap();      将所有元素单独包裹 $("strong").wrap("<b></b>"); <b> <strong>aaaaaa</strong> </b>, <b> <strong>aaaaaa</strong> </b>
wrapAll();   将所有元素一起包裹 $("strong").wrapAll("<b></b>"); <b> <strong>aaaaaa</strong> <strong>aaaaaa</strong> </b>
wrapInner(); 包裹所有匹配元素的子内容 $("strong").wrapInner("<b></b>"); <strong> <b>aaaaaa</b> </strong>
unwrap();    移除并替换指定元素的父元素$("p").unwrap();  移除<p>的父元素

8.属性操作

获取属性和设置属性
   var txt=$("p").attr("title");
   $("p").attr("title", "your title");
   $("p").attr("title":"your title", "name":"your name");
删除属性
   $("p").removeAttr("title");

9.样式操作

获取样式和设置样式
   var p_class=$("p").attr("class");
   $("p").attr("class", "your class");
追加样式
   $("p").addClass("your class");
移除样式
   $("p").removeClass(); //全部样式被移除
   $("p").removeClass("your class");
   $("p").removeClass("class1 class2");
切换样式
   $("p").toggleClass("your class"); //如果类名存在则删除它，如果类名不存在则添加它
判断是否含有某个样式
   $("p").hasClass("your class"); //返回true或者false 等价于$("p").is(.myClass);

10.设置和获取HTML、文本和值

$("p").html();  //获取p元素的HTML代码
$("p").html("<strong>xxxxxxxx</strong>"); //设置p元素的HTML代码
text(); val();方法同html();方法

另外，val();方法在表单操作中，能使select, checkbox, radio相应的选项被选中，如：
$("single").val("select 1");
$("multiple").val("select 1", "select 2");
$(":checkbox").val("check2", "check3");
$(":radio").val("radio2");

11.遍历节点

each();  对 jQuery 对象进行迭代，为每个匹配元素执行函数
     $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 
     $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
     $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})      //为索引分别为0，1，2的p元素分别设定不同的字体颜色。
     $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})//实现表格的隔行换色效果

过滤：
first();       将匹配元素集合缩减为集合中的第一个元素 $('li').first()
last();        将匹配元素集合缩减为集合中的最后一个元素 $('li').last()
has(expr);     将匹配元素集合缩减为包含特定元素的后代的集合。$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色
hasClass(class); 检查当前的元素是否含有某个特定的类，如果有，则返回true。  if ( $("div").hasClass("protected") ){....}
is(expr);        根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。$("input[type='checkbox']").parent().is("form")
eq(index);       将匹配元素集合缩减为位于指定索引的新元素  $("p").eq(1)获取匹配的第二个元素
not(expr);       从匹配元素集合中删除元素  $("p").not("#selected").css('background-color', 'red');
slice(start [,end]);    将匹配元素集合缩减为指定范围的子集,start从0开始  $("p").slice(0, 2).wrapInner("<b></b>"); //第1，2个p元素里面内容将被包裹 
map(callback);	        把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
           $("p").append( $("input").map(function(){return $(this).val();}).get().join(",")); //<p>John, password, http://ejohn.org/</p> 
filter(expr | fn);      将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
           $("div").css("background", "#c8ebcc")
           .filter(".middle")
           .css("border-color", "red"); 改变所有 div 的颜色，然后向类名为 "middle" 的类添加边框

查找：
children([expr]); 取得匹配元素的子元素集合，children方法只考虑子元素而不考虑任何后代元素$("div").children() || $("div").children(".selected")
closest([expr]);  从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
    $(document).bind("click", function(){
      $(e.target).closest("li").css("color", "red"); //给点击的目标元素的最近的li元素添加颜色
    });
find([expr]);     获得当前匹配元素集合中每个元素的后代，由选择器进行筛选
   $("p").find("span").css('color','red'); 搜索所有段落中的后代 span 元素，并将其颜色设置为红色
next([expr]);     取得匹配元素后面紧邻的同辈元素 $("p").next() || $("p").next(".selected")
nextAll([expr]);  取得匹配元素后面所有的同辈元素 $("div:first").nextAll().addClass("after");
nextUntil([expr]);获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止 $('#term-2').nextUntil('dt').css('background-color', 'red');给#term-2后面直到dt前的元素加上红色背景
prev([expr]);     取得匹配元素前面紧邻的同辈元素
prevAll([expr]);  取得匹配元素前面所有的同辈元素 
prevUntil([expr]);获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止
siblings([expr]); 取得匹配元素前后所有的同辈元素 $("div").siblings() || $("div").siblings(".selected")

offsetParent([expr]); 搜索DOM树中元素的祖先，并构造一个由最近的定位祖先元素包围的jQuery对象,返回父元素中第一个其position设为relative或者absolute的元素
parent([expr]);       获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）$("p").parent() || $("p").parent(".selected")
parents([expr]);      获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选） $("span").parents()找到每个span元素的所有祖先元素。
parentsUntil([expr]); 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止 $('li.item-a').parentsUntil('.level-1').css('background-color', 'red');


串联
contents(); 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
            $("p").contents().not("[nodeType=1]").wrap("<b/>"); 查找所有文本节点并加粗
            $("iframe").contents().find("body").append("I'm in an iframe!"); 往一个空框架中加些内容
end();      回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
            $("p").find("span").end() 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
add(expr [,context]);   将元素添加到匹配元素的集合中 $("p").add("span")添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
andSelf();  $("div").find("p").andSelf().addClass("border"); //div自己和p元素都被添加了边框，包括选择器自己

12.CSS-DOM操作

$("p").css("color");
$("p").css("color", "red");
$("p").css({"fontSize":"30px", "backgroundColor":"#888888"}); //如果属性中带有"-"符号，可以写成"font-size"或"fontSize", 也可以直接写成fontSize，建议带引号
offset(); //获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，top和left，只对可见元素有效
          var p = $("p:last");
          var offset = p.offset();
          p.html( "left: " + offset.left + ", top: " + offset.top );
position(); //获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，其中返回的对象包含两个属性，top和left
         var p = $("p:first");
         var position = p.position();
         $("p:last").html( "left: " + position.left + ", top: " + position.top );
scrollTop(); //获取元素的滚动条距顶端的距离
scrollLeft();//获取元素的滚动条距左侧的距离