對(duì)DOM的操作包插：增蟆沫、刪歉秫、改蛾洛、查。
使用jQuery查找節(jié)點(diǎn)非常容易雁芙，通過(guò)jQuery選擇器完成轧膘。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-3.1.0.js"></script>
</head>
<body>
<p title="選擇你最喜歡的水果.">你最喜歡的水果是？</p>
<ul>
<li title='蘋(píng)果'>蘋(píng)果</li>
<li title='桔子'>桔子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
使用以上2條語(yǔ)句就能查找ul里第2個(gè)li元素兔甘，然后獲取這個(gè)li元素的文本內(nèi)容谎碍。
var $para = $("p");
var p_txt = $para.attr("title");
使用以上2條語(yǔ)句就能查找p元素，然后獲取這個(gè)元素里的title屬性內(nèi)容洞焙。
創(chuàng)建節(jié)點(diǎn)也很簡(jiǎn)單：$(html）蟆淀，使用這條語(yǔ)句就能創(chuàng)建節(jié)點(diǎn)。比如
$("<li></li>")澡匪，
這樣就創(chuàng)建了li元素節(jié)點(diǎn)扳碍。只是在DOM操作中創(chuàng)建節(jié)點(diǎn)還不夠，如果想要在網(wǎng)頁(yè)中顯示了來(lái)仙蛉，還需要將創(chuàng)建的節(jié)點(diǎn)插入到網(wǎng)頁(yè)DOM中笋敞。
- append()，向每個(gè)匹配的元素內(nèi)部追加內(nèi)容
- appendTo()荠瘪，將所有匹配的元不追加到指定的元素中
- prepend()夯巷，向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
- prependTp()，將所有匹配的元素前置到指定的元素中
- after(), 在每個(gè)構(gòu)配的元素之后插入內(nèi)容
- insertAfter(), 將所有匹配的元素插入到指定元素的后面
- before()哀墓，在每個(gè)匹配的元素之前插入內(nèi)容
- insertBefore()趁餐，將所有匹配的元素插入到指定的元素之前
jQuery提供了3種刪除元素的方法，分別是remove,detach,empty篮绰。
- remove()后雷， 作用是從DOM中刪除所匹配的元素，傳入的參數(shù)用于根據(jù)jQuery表達(dá)式來(lái)篩選元素吠各。
$("ul li:eq(1)").remove()//獲取第2個(gè)li元素后臀突，將它從網(wǎng)頁(yè)中刪除
當(dāng)某個(gè)節(jié)點(diǎn)用remove方法刪除后，該節(jié)點(diǎn)所包含的后代節(jié)點(diǎn)將同時(shí)刪除贾漏。這個(gè)方法返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用候学，因此還可以在以后再使用這些元素。
remove方法還可以接收參數(shù)來(lái)選擇性地刪除元素
$("ul li").remove("li[title!=菠蘿]");//將li元素中屬性title不等于i波蘿的li元素刪除
detach（）,用法和remove一樣纵散，但是區(qū)別就是所有邦定的事件梳码、附加的數(shù)據(jù)等都保留下來(lái)隐圾，而remove方法之前綁定的事件會(huì)失效。
-
empty()掰茶， 這個(gè)方法只是清空節(jié)點(diǎn)暇藏，能清空節(jié)點(diǎn)元素的所有后代節(jié)點(diǎn)。
$("ul li:eq(1)").empty();//獲取第2個(gè)li元素節(jié)點(diǎn)后濒蒋，清空此元素的內(nèi)容叨咖。
用上面的語(yǔ)句清空節(jié)點(diǎn)之后，元素里的內(nèi)容清除了啊胶，但是li元素還是在文檔中的甸各。
jQuery中還可以使用chone方法復(fù)制節(jié)點(diǎn)。
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
});
clone方法接收一個(gè)bool類(lèi)型參數(shù)焰坪，如果為false或?yàn)榭毡硎静粡?fù)制所綁定的事件趣倾，如果為true則表示復(fù)印事件。
jQuery提供了2個(gè)替換節(jié)點(diǎn)的方法：replaceWith()和replaceAll()某饰。
$("p").replaceWith("<strong>你最不喜歡的水果是</strong>");
replaceAll和replaceWith作用相同儒恋，只是顛倒了操作后者的操作。替換后黔漂，原節(jié)點(diǎn)的事件會(huì)消失诫尽。
jQuery提供3個(gè)包裹節(jié)點(diǎn)的方未能。所謂的包裹節(jié)點(diǎn)意思是原來(lái)的html是這樣：<p>測(cè)試</p>炬守，現(xiàn)在想在p元素之外加上div變成這樣:<div><p>測(cè)試</p></div>牧嫉，這就是把p節(jié)點(diǎn)用div元素包裹了。
這3個(gè)方法分別為:wrap(), wrapAll(),wrapInner()减途。
像上面這個(gè)例子就可以這么寫(xiě)：
$("p").wrap("<div></div>");
wrapAll會(huì)把所有匹配的節(jié)點(diǎn)用一個(gè)標(biāo)簽包裹起來(lái)酣藻，而wrap會(huì)把所在匹配的節(jié)點(diǎn)單獨(dú)包裹一個(gè)標(biāo)簽。
wrapInner會(huì)把匹配的節(jié)點(diǎn)里的的子元素用包裹起來(lái)
$("p").wrapInner("<div></div>")
產(chǎn)生的結(jié)果就是
<p><div>測(cè)試</div></p>
對(duì)DOM節(jié)點(diǎn)的增刪改查差不多就以上這些鳍置。接下來(lái)講講對(duì)具體的節(jié)點(diǎn)的操作辽剧。
- 獲取屬性和設(shè)置屬性
var $para = $("p);
var p_txt = $para.attr("title");
以上代碼獲取屬性,如果要設(shè)置性性也用這個(gè)方法只是需要傳入多個(gè)參數(shù)。
$("p").attr("title", "your title");
如果要一次性設(shè)置多個(gè)屬性税产，則傳入一個(gè)對(duì)象怕轿。
$("p").attr({"title" : "your title", "name" : "your name" });
刪除屬性使用removeAttr方法
$("p").removeAttr("title");
如果我們另外定義了一個(gè)class樣式，那么也可以用attr方法來(lái)設(shè)置節(jié)點(diǎn)的class辟拷，間接設(shè)置了樣式撞羽。但是attr方法只能替換樣式，如果要追加樣式那就需要用jQuery另外給我們提供的方法：addClass()
$("p").addClass("another")
如果p元素原來(lái)有一個(gè)樣式梧兼，那么就會(huì)再添加一個(gè)放吩，而不會(huì)替換智听。
同樣也可以移除樣式
$("p").removeClass("another")
如果要移除多個(gè)樣式羽杰，那么每個(gè)class名移增加空格就可以
$("p").removeClass("one another")
同時(shí)移除了one 和 another兩個(gè)樣式渡紫。
jQuery還提供了切換樣式的方法：toggleClass();如果這個(gè)方法里傳遞的class已經(jīng)存在則刪除它，如果不存在則添加它.
$("p").toggleClass("another")
如果another樣式不存在考赛，則和addClass效果一樣惕澎；如果已經(jīng)存在，則和removeClass效果一樣颜骤。
如果要判斷一個(gè)樣式是不是存在就要調(diào)用hasClass()方法唧喉，返回值為true或false
$("p").hasClass("another");
接下來(lái)介紹jQuery中的如果獲取html，文本的方法忍抽，比如網(wǎng)頁(yè)上有如下的節(jié)點(diǎn)：
<p title="選擇你最喜歡的水果"><strong>選擇你最喜歡的水果是八孝？</strong></p>
然后用html()方法進(jìn)行操作
var p_html = $("p").html();
alert(p_html);
那么會(huì)顯示<strong>選擇你最喜歡的水果是？</strong>這一段話鸠项。
如果把html方法替換成text方法干跛，則會(huì)顯示選擇你最喜歡的水果是？這一段話祟绊。
html和text方法如果傳遞進(jìn)參數(shù)楼入，則表示把元素設(shè)置成參數(shù)里的字符串。
如查要獲取各種表單元素的值牧抽，可以使用jQuery的val()方法嘉熊。
$("this").val();//其中this表示一個(gè)文本框或者密碼框
$("this").val("設(shè)置元素");
跟html(),text()方法一樣也可以設(shè)置或者獲取文本框或密碼框的值。
val方法還可以獲取下拉列表扬舒，單選框的值阐肤，如果元素為多選，則返回一個(gè)包含所有選擇的值的數(shù)組讲坎。
要設(shè)置下拉列表的選項(xiàng)：
$("#single").val("選擇值");
設(shè)置多選框的值：
$("#multiple").val(["choise1","choise2"]);//以數(shù)組的形式賦值
同樣泽腮，設(shè)置多選框和單選框：
$(":checkbox").val(["check1","check2"]);
$(":radio").val(["radio2"]);
選擇一個(gè)節(jié)點(diǎn)，如果要獲取這個(gè)節(jié)點(diǎn)的子元素的集合衣赶，可以使用jQuery的children()方法诊赊。
var $ul = $("ul").children();
這個(gè)方法只考濾子元素而不考慮子元素下面的元素，返回的是一個(gè)jQuery對(duì)象的數(shù)組府瞄。
獲取某個(gè)節(jié)點(diǎn)相鄰的下一個(gè)節(jié)點(diǎn)使用next()方法碧磅。
獲取某個(gè)節(jié)點(diǎn)相鄰的前一個(gè)節(jié)點(diǎn)使用prev()方法。
獲取前后所有的同輩節(jié)點(diǎn)使用siblings()方法
closest()方法用于獲取最近的匹配元素遵馆。首先查找自身是否匹配鲸郊，如果匹配直接返回自身，如果不匹配則向上查找父元素货邓，逐級(jí)向上查找直到匹配為止秆撮，如果都不匹配則返回空。
parent()方法返回每個(gè)匹配元素的父級(jí)元素
parents()方法返回匹配元素的所有祖先元素
css()方法可以直接讀取和設(shè)置節(jié)點(diǎn)中的樣式换况。
$("p").css("color");//獲取p元素的顏色职辨。
$("p").css("color", "red");//設(shè)置p元素的顏色為紅色盗蟆。
如果設(shè)置css樣式時(shí)的值為數(shù)字，則會(huì)直接轉(zhuǎn)化為像素值舒裤。css中的一些屬性帶有-符號(hào)喳资，比如background-color，設(shè)置時(shí)可以寫(xiě)成background-color或者backgroundColor腾供。
獲取元素的高度或者寬度可以使用以下兩種方法：
$("element").css("height");
$("element").height();
兩者的區(qū)別是第1種方法設(shè)置的高度與樣式設(shè)置有關(guān)仆邓，可能會(huì)得到auto或者15px之類(lèi)的字符串，而height()方未能獲取的高度是元素在頁(yè)面中的實(shí)際高度伴鳖。
與height()方法相對(duì)應(yīng)的是width()方法节值。這2個(gè)方法獲取到的是數(shù)字且不帶單位，單位都是像素也就是px榜聂。
jQuery還提供獲取元素所在位置的功能：offset()和position()方法
var offset = $("p").offset();//當(dāng)前元素在當(dāng)前窗口的偏移量
var left = offset.left;//獲取左偏移量
var top = offset.top;//獲取上偏移量
var position = $("p").position();//當(dāng)前元素在最近一個(gè)position樣式屬性設(shè)置為relative或者absolute父節(jié)點(diǎn)的相對(duì)偏移
var left = position.left;
var top = position,top;
scrollTop()和scrollLeft()方法獲取元素的滾動(dòng)條距頂端和距左端的距離察署，如果指定一個(gè)參數(shù)，可以控制元素的滾動(dòng)條滾動(dòng)到指定位置峻汉。
