http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js
js中如何創建html節點和屬性
創建流程：
1、創建節點：document.createElement();
2、添加節點的屬性:setAttribute
3、把節點加入到文檔中
涉及到的方法：
document.createElement(); 創建元素
setAttribute() ? ?設置屬性和屬性值
innerHTML ? ?給節點添加文本
appendChild() ? ?加入文檔
document.querySelector('body'); // 獲取文檔中第一個body元素
jQuery節點創建與屬性的處理
創建元素節點
$("html結構")
例子：$("");
創建文本節點
例子：$("
我是文本節點
");創建屬性節點
$("
我是文本節點
");DOM內部插入append()與appendTo()父子關系處理,在結尾插入
動態創建的元素是不夠的，它只是臨時存放在內存中，最終我們需要放到頁面文檔并呈現出來。
所以jq定義了2個方法將元素當作某一個元素的子元素插入到文檔中
append(content)向每個匹配的元素追加內容
append()前面是被插入的對象，后面是要在對象內插入的元素內容
A.append(B) ? 把B插入到A中
appendTo(content)
A.appendTo(B) ? 把A插入到B中
appendTo()前面是要插入的元素內容，而后面是被插入的對象
DOM外部插入after()與before()兄弟關系處理
.after(content) ? ? ?在匹配元素集合中的每個元素后面插入指定內容，作為兄弟節點
例子：
$be.before('
測試before，前面
'); 在be元素前面，插入p標簽.before(content)在匹配元素集合中的每個元素前面插入指定內容，作為兄弟節點
$af.after('
測試after,后面
'); 在af元素后面，插入p標簽備注：
1、before與after都是用來對相對選中元素外部增加相鄰的兄弟節點
2、2個方法都是都可以接收HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面
3、2個方法都支持多個參數傳遞after(div1,div2,....) 可以參考右邊案例代碼
DOM內部插入prepend()與prependTo() ?父子關系，在被選元素前面插入
.prepend(content) ? ?將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).
例子：
$(".aaron1").prepend("
測試prepend333
"); // 在.aaron1的元素內部插入元素，作為第一個直接子元素.prependTo(被選元素) ? ?正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表達式或動態創建的標記，待插入內容的容器作為參數。同.appendTo()
$("
測試prependTo444
").prependTo($(".aaron2")); // 把內容插入到.aaron2元素中，作為第一個子元素以下都是父子關系，父元素和直接子元素
append()向每個匹配的元素內部追加內容
prepend()向每個匹配的元素內部前置內容
appendTo()把所有匹配的元素追加到另一個指定元素的集合中
prependTo()把所有匹配的元素前置到另一個指定的元素集合中
DOM外部插入insertAfter()與insertBefore()
.insertBefore(content) ?／／在目標元素前面插入集合中每個匹配的元素
例子：
$("
測試insertBefore
").insertBefore($(".test1")); ／／將前面元素插入到.test1中，作為兄弟元素.insertAfter(content) ? ? ／／在目標元素后面插入集合中每個匹配的元素
$("
測試afterBefore
").insertAfter($(".test2")); ／／ 將前面元素插入到.test2中，作為兄弟元素.before()和.insertBefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。 對于before()選擇表達式在函數前面，內容作為參數，而.insertBefore()剛好相反，內容在方法前面，它將被放在參數里元素的前面
.after()和.insertAfter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。 對于after()選擇表達式在函數的前面，參數是將要插入的內容。對于 .insertAfter(), 剛好相反，內容在方法前面，它將被放在參數里元素的后面
.before、after與insertBefore。insertAfter的除了目標與位置的不同外，后面的不支持多參數處理
DOM節點刪除之empty()的基本用法
.empty() ?移除指定元素當子節點,，但是不移除自身元素
例子： $("#test").empty() ? 移除#test元素下的所有子元素，包括后代元素，但是并不會刪除#test這個元素本身
DOM節點刪除之remove()的有參用法和無參用法
.remove(無參數) ／／刪除該指定元素和指定元素下的所有后代元素
.remove(有參數） ?／／可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點
例子： $("p").remove("p:contains('3')"); ? // 刪除p元素，以及p元素內部所有的元素除了包含文本3的元素，其他所有刪除
empty方法
嚴格地講，empty()方法并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點
empty不能刪除自己本身這個節點
remove方法
該節點與該節點所包含的所有后代節點將同時被刪除
提供傳遞一個篩選的表達式，刪除指定合集中的元素
DOM節點刪除之保留數據的刪除操作detach()
3個刪除方法
empty():清空匹配的元素集合中所有的子節點，自身節點和事件都未被刪除。
remove():這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。
detach()：這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。與remove()不同的是，綁定的事件和數據會保留
綁定事件等數據不會刪除，會存儲在內存中
$("div").detach() ?刪除div以及div下的所有元素，不刪除事件和數據，返回div對象
$("div").empty() ?清空div下的所有元素，不刪除事件，返回div對象
$("div").remove() ?刪除div以及div下的所有元素，刪除事件和數據，返回div對象
備注：刪除事件和數據的依據就是是否在內存中，在內存中，就是事件沒有被刪除／不在內存中，就是被刪除
什么意思呢？
比如說p.remove() ?p的自身點擊事件不在保留，點擊p沒有任何反應
p.detach() p的自身點擊事件還保留，可以點擊p進行事件處理
DOM拷貝clone()
.clone()方法深度 復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點。
如果要復制匹配元素的事件和數據，需要指定一個參數true，默認是false，不克隆事件和數據
HTML部分
JavaScript部分
$("div").on('click', function() {//執行操作})
//clone處理一
$("div").clone()//只克隆了結構，事件丟失
//clone處理二
$("div").clone(true) //結構、事件與數據都克隆
.clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數據
元素數據（data）內對象和數組不會被復制，將繼續被克隆元素和原始元素共享。深復制的所有數據，需要手動復制每一個。
var$p1=$("p:first").clone(); //克隆出來的p元素沒有點擊事件，淺拷貝
var$p2=$("p:last").clone(true); // 克隆出來的p元素有點擊事件，深拷貝
DOM替換replaceWith()和replaceAll()
.replaceWith(new content) ：用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合
.replaceAll(target) ?：用集合的匹配元素替換每個目標元素
.replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別
.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序
.replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對象，所以可以和其他方法鏈接使用
.replaceWith()方法返回的jQuery對象引用的是替換前的節點，而不是通過replaceWith/replaceAll方法替換后的節點
$p1.replaceWith("
replaceWith替換
"); //用后面的內容替換$p1元素$("
replaceAll替換
").replaceAll($p2); // 用前面的內容替換后面的$p2元素DOM包裹wrap()方法
.wrap(包裹的元素) //在所選擇元素的外邊包含一個父元素
$(this).wrap("
") // 給$this對象外面包裹一個父元素div.wrap( function ) ：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
使用后的效果與直接傳遞參數是一樣，只不過可以把代碼寫在函數體內部，寫法不同而已
$(this).wrap(function(){
return"
"; // 給$this對象外面包裹一個父元素div})
備注：.wrap()函數可以接受任何字符串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套了好幾層深，但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便之后使用鏈式方法。be額
DOM包裹unwrap()方法
.unwrap()將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。
$("p").unwrap(); // 清楚p元素的直接父元素，不是所有祖先元素
DOM包裹wrapAll()方法
wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個父元素，針對這樣的處理，JQuery提供了一個wrapAll方法
$('p').wrapAll('
') ?// 給所有的p元素都加了一個div父元素結果：
p元素
p元素
.wrapAll( function ) ：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象
$('p').wrapAll(function() {
return '
})
用wrap也可以給所有p元素增加div，但不是同一個div（有多少個p就加了多少個div）。而wrapALL能給所有p元素增加一個共同的div
請注意：$(this)只給當前對象加，不遍歷所有的
$("p").wrapAll("
"); 給所有的p元素套同1個div作為父元素$(this).wrapAll("
"); 給當前p元素套同1個div作為父元素$("p").wrap("
");? 給所有的p元素套上不同的div作為父元素$(this).wrap("
"); 給當前的p元素套上div作為父元素DOM包裹wrapInner()方法
.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構
$("div").wrapInner("
新的p元素
")? // 給div元素下所有的元素增加一個包裹層p元素，p是div的唯一直接子元素$("div").wrapInner(function(){
return"
通過function添加
";? // 給div元素下所有元素增加一個包裹層p元素})
jQuery遍歷之children()方法
.children() 查找被選擇元素的所有直接子元素
$("div").children(); // 查找div元素下的所有直接子元素
$("div").children("a"); // 查找div元素下所有是a的直接子元素
jQuery遍歷之find()方法
.children()是父子關系查找，.find()是后代關系（包含父子關系）
.find（"*"）找到所匹配元素中的所有后代元素
重要：參數不能為空
$("div").find("*"); // 查找到所有div元素下到所有后代元素
$("div").find("span"); // 查找到所有div元素下到是span到后代元素
find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數。如果我們需要實現對所有后代元素的取回，可以傳遞通配選擇器 '*'。
find只在后代中遍歷，不包括自己。
選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。
jQuery遍歷之parent()方法
.parent() 方法 ?// 查找選擇元素的直接父元素
例子：
$(".level-3").parent() // 篩選出.level-3所對應的元素的父親元素
jQuery是一個合集對象，所以通過parent是匹配合集中每一個元素的父元素
例子：加了一個選擇器，以便來進行篩選
$('.item-a').parent(':last') // 篩選出 .item-a所對應的元素父元素的最后一個父元素
.parents() 方法找到選定元素的祖先元素
jQuery遍歷之closest()方法
closest()方法接受一個匹配元素的選擇器字符串,所以必須要有一個參數（選擇器字符串）
從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素
例子:
$("div").closet("li') ?// 查找div元素上方的所有li元素
jQuery是一個合集對象，所以通過closest是匹配合集中每一個元素的祖先元素
parents() 和closest() 方法的區別
起始位置不同：.closest開始于當前元素 .parents開始于父元素
遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象
jQuery遍歷之next()方法 （緊跟著的兄弟元素）
jQuery是一個合集對象，如果想快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合，此時可以用next()方法
next()無參數允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據匹配的元素創建一個新的 jQuery 對象。
next(選擇器) 有參數
例子：$('.item-2').next(':first') ? // 找到.item-2中的兄弟元素然后篩選出第一個li，加上藍色的邊
jQuery遍歷之prev()方法 （前面緊跟的兄弟元素）
.prev() // 無參數 ? 選擇該元素前面的兄弟元素集合
.prev(選擇器) // 有參數 ，選擇該元素前面兄弟元素中指定的兄弟元素
$('.item-3').prev(':last') ?找到所有class=item-2的li，然后篩選出最后一個，加上藍色的邊
重要：上面例子表示找到item-3前面的相鄰元素集合，再找這些元素中的最后一個
jQuery遍歷之siblings()
.siblings(無參數)取得一個包含匹配的元素集合中每一個元素的同輩元素的元素集合
例子：$(".item-2").siblings() ? ? ?// 表示找到.item-2的所有同輩元素
.sibling(選擇器） 篩選出同輩元素
例子：$('.item-2').siblings(':last') ?// 找到.item-2的所有同輩元素中的最后一個元素
jQuery遍歷之add()方法
.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。
該方法表示往被選擇的元素中插入一行新的元素
例子：$('li').add('p') ?// 表示把p元素插入到$("li")中
jQuery遍歷之each()
each是一個for循環的包裝迭代器
each通過回調的方式處理，并且會有2個固定的實參，索引與元素
each回調方法中的this指向當前迭代的dom元素
$("li").each(function(index, element) {
index 索引 0,1
element是對應的li節點 li,li
this 指向的是li
})
