3 《锋利的jQuery》jQuery中的DOM操作

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