對DOM的操作包插：增、刪、改、查。
使用jQuery查找節(jié)點非常容易，通過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='蘋果'>蘋果</li>
<li title='桔子'>桔子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
var $li = $("ul li:eq(1)");
var li_txt = $li.text();
使用以上2條語句就能查找ul里第2個li元素，然后獲取這個li元素的文本內容。
var $para = $("p");
var p_txt = $para.attr("title");
使用以上2條語句就能查找p元素，然后獲取這個元素里的title屬性內容。
創(chuàng)建節(jié)點也很簡單：$(html），使用這條語句就能創(chuàng)建節(jié)點。比如
$("<li></li>")，
這樣就創(chuàng)建了li元素節(jié)點。只是在DOM操作中創(chuàng)建節(jié)點還不夠，如果想要在網頁中顯示了來，還需要將創(chuàng)建的節(jié)點插入到網頁DOM中。
- append()，向每個匹配的元素內部追加內容
- appendTo()，將所有匹配的元不追加到指定的元素中
- prepend()，向每個匹配的元素內部前置內容
- prependTp()，將所有匹配的元素前置到指定的元素中
- after(), 在每個構配的元素之后插入內容
- insertAfter(), 將所有匹配的元素插入到指定元素的后面
- before()，在每個匹配的元素之前插入內容
- insertBefore()，將所有匹配的元素插入到指定的元素之前
jQuery提供了3種刪除元素的方法，分別是remove,detach,empty。
- remove()， 作用是從DOM中刪除所匹配的元素，傳入的參數用于根據jQuery表達式來篩選元素。
$("ul li:eq(1)").remove()//獲取第2個li元素后，將它從網頁中刪除
當某個節(jié)點用remove方法刪除后，該節(jié)點所包含的后代節(jié)點將同時刪除。這個方法返回值是一個指向已被刪除的節(jié)點的引用，因此還可以在以后再使用這些元素。
remove方法還可以接收參數來選擇性地刪除元素
$("ul li").remove("li[title!=菠蘿]");//將li元素中屬性title不等于i波蘿的li元素刪除
detach（）,用法和remove一樣，但是區(qū)別就是所有邦定的事件、附加的數據等都保留下來，而remove方法之前綁定的事件會失效。
-
empty()， 這個方法只是清空節(jié)點，能清空節(jié)點元素的所有后代節(jié)點。
$("ul li:eq(1)").empty();//獲取第2個li元素節(jié)點后，清空此元素的內容。
用上面的語句清空節(jié)點之后，元素里的內容清除了，但是li元素還是在文檔中的。
jQuery中還可以使用chone方法復制節(jié)點。
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
});
clone方法接收一個bool類型參數，如果為false或為空表示不復制所綁定的事件，如果為true則表示復印事件。
jQuery提供了2個替換節(jié)點的方法：replaceWith()和replaceAll()。
$("p").replaceWith("<strong>你最不喜歡的水果是</strong>");
replaceAll和replaceWith作用相同，只是顛倒了操作后者的操作。替換后，原節(jié)點的事件會消失。
jQuery提供3個包裹節(jié)點的方未能。所謂的包裹節(jié)點意思是原來的html是這樣：<p>測試</p>，現在想在p元素之外加上div變成這樣:<div><p>測試</p></div>，這就是把p節(jié)點用div元素包裹了。
這3個方法分別為:wrap(), wrapAll(),wrapInner()。
像上面這個例子就可以這么寫：
$("p").wrap("<div></div>");
wrapAll會把所有匹配的節(jié)點用一個標簽包裹起來，而wrap會把所在匹配的節(jié)點單獨包裹一個標簽。
wrapInner會把匹配的節(jié)點里的的子元素用包裹起來
$("p").wrapInner("<div></div>")
產生的結果就是
<p><div>測試</div></p>
對DOM節(jié)點的增刪改查差不多就以上這些。接下來講講對具體的節(jié)點的操作。
- 獲取屬性和設置屬性
var $para = $("p);
var p_txt = $para.attr("title");
以上代碼獲取屬性,如果要設置性性也用這個方法只是需要傳入多個參數。
$("p").attr("title", "your title");
如果要一次性設置多個屬性，則傳入一個對象。
$("p").attr({"title" : "your title", "name" : "your name" });
刪除屬性使用removeAttr方法
$("p").removeAttr("title");
如果我們另外定義了一個class樣式，那么也可以用attr方法來設置節(jié)點的class，間接設置了樣式。但是attr方法只能替換樣式，如果要追加樣式那就需要用jQuery另外給我們提供的方法：addClass()
$("p").addClass("another")
如果p元素原來有一個樣式，那么就會再添加一個，而不會替換。
同樣也可以移除樣式
$("p").removeClass("another")
如果要移除多個樣式，那么每個class名移增加空格就可以
$("p").removeClass("one another")
同時移除了one 和 another兩個樣式。
jQuery還提供了切換樣式的方法：toggleClass();如果這個方法里傳遞的class已經存在則刪除它，如果不存在則添加它.
$("p").toggleClass("another")
如果another樣式不存在，則和addClass效果一樣；如果已經存在，則和removeClass效果一樣。
如果要判斷一個樣式是不是存在就要調用hasClass()方法，返回值為true或false
$("p").hasClass("another");
接下來介紹jQuery中的如果獲取html，文本的方法，比如網頁上有如下的節(jié)點：
<p title="選擇你最喜歡的水果"><strong>選擇你最喜歡的水果是？</strong></p>
然后用html()方法進行操作
var p_html = $("p").html();
alert(p_html);
那么會顯示<strong>選擇你最喜歡的水果是？</strong>這一段話。
如果把html方法替換成text方法，則會顯示選擇你最喜歡的水果是？這一段話。
html和text方法如果傳遞進參數，則表示把元素設置成參數里的字符串。
如查要獲取各種表單元素的值，可以使用jQuery的val()方法。
$("this").val();//其中this表示一個文本框或者密碼框
$("this").val("設置元素");
跟html(),text()方法一樣也可以設置或者獲取文本框或密碼框的值。
val方法還可以獲取下拉列表，單選框的值，如果元素為多選，則返回一個包含所有選擇的值的數組。
要設置下拉列表的選項：
$("#single").val("選擇值");
設置多選框的值：
$("#multiple").val(["choise1","choise2"]);//以數組的形式賦值
同樣，設置多選框和單選框：
$(":checkbox").val(["check1","check2"]);
$(":radio").val(["radio2"]);
選擇一個節(jié)點，如果要獲取這個節(jié)點的子元素的集合，可以使用jQuery的children()方法。
var $ul = $("ul").children();
這個方法只考濾子元素而不考慮子元素下面的元素，返回的是一個jQuery對象的數組。
獲取某個節(jié)點相鄰的下一個節(jié)點使用next()方法。
獲取某個節(jié)點相鄰的前一個節(jié)點使用prev()方法。
獲取前后所有的同輩節(jié)點使用siblings()方法
closest()方法用于獲取最近的匹配元素。首先查找自身是否匹配，如果匹配直接返回自身，如果不匹配則向上查找父元素，逐級向上查找直到匹配為止，如果都不匹配則返回空。
parent()方法返回每個匹配元素的父級元素
parents()方法返回匹配元素的所有祖先元素
css()方法可以直接讀取和設置節(jié)點中的樣式。
$("p").css("color");//獲取p元素的顏色。
$("p").css("color", "red");//設置p元素的顏色為紅色。
如果設置css樣式時的值為數字，則會直接轉化為像素值。css中的一些屬性帶有-符號，比如background-color，設置時可以寫成background-color或者backgroundColor。
獲取元素的高度或者寬度可以使用以下兩種方法：
$("element").css("height");
$("element").height();
兩者的區(qū)別是第1種方法設置的高度與樣式設置有關，可能會得到auto或者15px之類的字符串，而height()方未能獲取的高度是元素在頁面中的實際高度。
與height()方法相對應的是width()方法。這2個方法獲取到的是數字且不帶單位，單位都是像素也就是px。
jQuery還提供獲取元素所在位置的功能：offset()和position()方法
var offset = $("p").offset();//當前元素在當前窗口的偏移量
var left = offset.left;//獲取左偏移量
var top = offset.top;//獲取上偏移量
var position = $("p").position();//當前元素在最近一個position樣式屬性設置為relative或者absolute父節(jié)點的相對偏移
var left = position.left;
var top = position,top;
scrollTop()和scrollLeft()方法獲取元素的滾動條距頂端和距左端的距離，如果指定一個參數，可以控制元素的滾動條滾動到指定位置。
