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

原文地址:https://www.cnblogs.com/zhaojieln/p/4255768.html