DOM操作分

（1）DOM Core（核心）：document.geElementsByTagName("form");/ element.getAttribute("src");

（2）HTML-DOM：document.forms; / element.src;

（3）CSS-DOM：element.style.color="red";

查找节点：

查找$(ul li:eq(1)).text()文本值；

获取$("p").attr("title")的属性值;

创建节点：

var $li_1=$("<li></li>");

var $li_2=$("<li>香蕉</li>");

var $li_3=$("<li title='香蕉'>香蕉</li>"); //注意：title用的单引号

插入节点：

$(“p”).append(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).appendTo(“p”);   //内部的后面

$(“p”).prepend(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).prependTo(“p”)  //内部的前面

$(“p”).after(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).insertAfter(“p”); //外部的后面

$(“p”).before(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).insertBefore(“p”); //外部的前面

一种是创建新的HTML元素，然后插入。另一只也可以获取html元素，然后插入，即理解为移动节点。

比如：$("ul").prepend($("ul li:eq(2)"));

删除节点：

（1）remove();该节点本身以及后代被删除，但该方法返回值是一个指向已被删除的节点的引用。因此还可以继续使用。

var $li=$("ul li:eq(1)").remove(); $li.appendTo("ul");

（2）empty();清空节点，只是后代节点。

复制节点：

$("ul li").click(function(){ $(this).clone().appendTo("ul");})

被复制的li不具备点击复制行为，如果需要新元素也具有复制功能则：$(this).clone(true).appendTo("body");

替换节点：

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");等价于 $("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

包裹节点：

（1）wrap(); //$("strong").wrap("<b></b>");  每一个strong标签都被b标签包裹

（2）wrapAll(); // $("strong").wrapAll("<b></b>"); 所有strong标签被一个b标签包裹。如果中间并列其他标签元素的，也都移至一并包裹起来。

（3）wrapInner(); //$("strong").wrapInner("<b></b>"); 顺序是：strong标签>b标签>原strong标签里的子元素

属性操作：

var p_txt=$("p").attr("title");

$("p").attr("title","you title");

$("p").attr({"title":"you title","name":"test"});

删除属性：

$("p").removeAttr("title");

样式操作：

var p_class=$("p").attr("class");

$("p").attr("class","high");   //是替换样式而不是追加样式。

$("strong").addClass("high");  //追加样式。

$("strong").removeClass("high");

$("strong").removeClass("high").removeClass("another"); 等价于 $("strong").removeClass("high another");

$("strong").removeClass();  //将class的值全部删掉

$("strong").toggleClass("another");//切换样式

$("strong").hasClass("another");  //返回布尔值 也可以用 $("strong").is(".another");

html();

text(); //注意：相比html，text是纯文本值

val(); //值 value

val()方法还有另一个用处，就是它能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中。

下拉单选：$("#single").val("选择2号"); //$("#single option:eq(1)").attr("selected",true);

下拉多选：$("#multiple").val(["选择2号","选择3号"]);

$(":checkbox").val(["check2","check3"]);

$(":radio").val(["radio2"]);//$("[value=radio2]:radio").attr("checked",true);

注意使用val跟使用attr的区别：？

val方法是从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会被选中。如：

<option value="选择2号">选择1号</option>

<option value="选择1号">选择2号</option>

无论是val("选择1号")还是val("选择2号");都会是后面一个option