jQuery DOM操作
創(chuàng)建元素
只需要把DOM字符串傳入$方法即可返回一個(gè)jQuery對(duì)象
var obj = $('<div class="test"><p><span>Done</span></p></div>');
添加元素
1..append()
append(content[,content]) / .append(function(index,html))
可以一次添加多個(gè)內(nèi)容泳姐，內(nèi)容可以是DOM對(duì)象放可、HTML string氓栈、 jQuery對(duì)象
如果參數(shù)是function痴晦，function可以返回DOM對(duì)象、HTML string移层、 jQuery對(duì)象钦睡，參數(shù)是集合中的元素位置與原來(lái)的html值
$( ".p" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );
2..prepend()
.prepend(content[,content]) / .prepend(function(index,html))
向?qū)ο箢^部追加內(nèi)容，用法和append類似帖努，內(nèi)容添加到最開(kāi)始
$( "div" ).prepend( "<p>Test</p>" );
3..before()
.before([content][,content]) / .before(function)
在對(duì)象前面(不是頭部，而是外面粪般，和對(duì)象并列同級(jí))插入內(nèi)容拼余，參數(shù)和append類似
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );
4.after()
.after([content][,content]) / .after(function（index）)
和before相反，在對(duì)象后面(不是尾部亩歹，而是外面匙监，和對(duì)象并列同級(jí))插入內(nèi)容凡橱，參數(shù)和append類似
$( "divr" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
刪除元素
1.remove()
.remove([selector])
刪除被選元素（及其子元素）
$('div').remove('.test');
2..empty()
.empty()
清空被選擇元素內(nèi)所有子元素
$('body').empty();
修改元素
1..html()
html([string])
這是一個(gè)讀寫(xiě)兩用的方法，用于獲取/修改元素的innerHTML
當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候亭姥，返回元素的innerHTML
當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候稼钩，修改元素的innerHTML為參數(shù)值
$('div').html(,<p>123</p>)
$('div').html('123')
2.text()
和html方法類似，操作的是DOM的innerText值
$('div').text('123')
$node.text()和$node.html()有什么區(qū)別达罗？
html()讀取到的是元素中所有的內(nèi)容坝撑，包括html標(biāo)簽也當(dāng)成文本一樣讀取 ,而.text()是只讀取其中的文本內(nèi)容，不包括html標(biāo)簽;
簡(jiǎn)單點(diǎn)說(shuō)粮揉，html（）里面可以是元素巡李，也可以是文本，text（）只是文本
jQuery 操作屬性&CSS
1..val()
這是一個(gè)讀寫(xiě)雙用的方法滔蝉，用來(lái)處理input的value击儡，當(dāng)方法沒(méi)有參數(shù)的時(shí)候返回input的value值塔沃，當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候蝠引，方法修改input的value值為參數(shù)值
$('input').val()
$('input').val('Value');
2.attr()
.attr(attributeName)
獲取元素特定屬性的值
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
3.removeAttr()
為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點(diǎn)是可以直接在一個(gè) jQuery 對(duì)象上調(diào)用該方法，并且它解決了跨瀏覽器的屬性名不同的問(wèn)題蛀柴。
$('div').removeAttr('id');
4..prop()/.removeProp()
這兩個(gè)方法是用來(lái)操作元素的property的
$( div ).prop( "checked" )
5..css()
.css()
這是個(gè)和attr非常相似的方法螃概，用來(lái)處理元素的css
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
$( div ).css( "background-color", "yellow" );
6..addClass(className) / .removeClass(className)
.addClass(className) / .addClass(function(index,currentClass))
為元素添加class，不是覆蓋原class鸽疾，是追加吊洼，也不會(huì)檢查重復(fù)
$( "p" ).addClass( "myClass yourClass" );
7.removeClass([className]) / ,removeClass(function(index,class))
移除元素單個(gè)/多個(gè)/所有class
$( "p" ).removeClass( "myClass yourClass" );
8..hasClass(className)
檢查元素是否包含某個(gè)class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
9.toggleClass(className)
toggle是切換的意思制肮，方法用于切換冒窍，有就切換成移除，沒(méi)有就切換成添加
$( "div" ).toggleClass( "bounce" )
jQuery 對(duì)象和原生 Dom 對(duì)象有什么區(qū)別豺鼻？如何相互轉(zhuǎn)換综液？
Dom原生對(duì)象和jQuery對(duì)象的聯(lián)系、區(qū)別儒飒、相互轉(zhuǎn)換：
- 聯(lián)系：
1谬莹、jQuery對(duì)象：通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象；
2桩了、兩者之間可以相互轉(zhuǎn)換附帽； - 區(qū)別：
1、jquery選擇器得到的jquery對(duì)象和標(biāo)準(zhǔn)的 javascript中的document.getElementById()取得的dom對(duì)象是兩種不同的對(duì)象類型井誉，兩者不等價(jià)蕉扮；
2、jQuery無(wú)法使用DOM對(duì)象的任何方法颗圣，同理DOM對(duì)象也不能使用jQuery里的方法. 亂使用會(huì)報(bào)錯(cuò)喳钟。
例如：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：獲取ID為id的元素內(nèi)的html代碼爪模。這兩段代碼結(jié)果相同，但中間的取值過(guò)程不同荚藻。
即：$("#id").innerHTML屋灌、document.getElementById("id").html()之類的寫(xiě)法都是錯(cuò)誤的。
- 相互轉(zhuǎn)換：
jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象---兩種轉(zhuǎn)換方式：[index]和.get(index)
1应狱、jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象共郭，通過(guò)[index]的方法
如：var $v = $("#v") ; //jQuery對(duì)象
var v = $v[0]; //DOM對(duì)象
alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
2、jQuery本身提供疾呻，通過(guò).get(index)方法
如：var $v = $("#v"); //jQuery對(duì)象
var v = $v.get(0); //DOM對(duì)象
alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象:
對(duì)于DOM對(duì)象除嘹，只需用$()把DOM對(duì)象包裝起來(lái)，就可得到j(luò)Query對(duì)象
如：var v=document.getElementById("v"); //DOM對(duì)象
var $v=$(v); //jQuery對(duì)象
- 需要注意：jQuery無(wú)法使用DOM對(duì)象的任何方法岸蜗，同理DOM對(duì)象也不能使用jQuery里的方法. 亂用會(huì)影響代碼執(zhí)行尉咕。
jQuery 方法
1..each()
.each( function(index, Element) )
遍歷一個(gè)jQuery對(duì)象，為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)
$( "p" ).each(function( index ) {
console.log( index + ":" + $(this).text() );
});
2.$.extend()
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()璃岳，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)）年缎。
如果只有一個(gè)參數(shù)提供給$.extend()，這意味著目標(biāo)參數(shù)被省略铃慷。在這種情況下单芜，jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象。這樣犁柜，我們可以在jQuery的命名空間下添加新的功能洲鸠。這對(duì)于插件開(kāi)發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$.extend( object1, object2 )
console.log(object1)
3.clone()
..clone( [withDataAndEvents ] )
.clone()方法深度復(fù)制所有匹配的元素集合，包括所有匹配元素馋缅、匹配元素的下級(jí)元素扒腕、文字節(jié)點(diǎn)
$('.hello').clone().appendTo('.goodbye');
.4..clone()
index() / .index(selector)/ .index(element)
從給定集合中查找特定元素index
Search for a given element from among the matched elements.
沒(méi)參數(shù)返回第一個(gè)元素index
如果參數(shù)是DOM對(duì)象或者jQuery對(duì)象，則返回參數(shù)在集合中的index
如果參數(shù)是選擇器萤悴，返回第一個(gè)匹配元素index瘾腰，沒(méi)有找到返回-1
console.log( $( "p" ).index() )
5.ready()
當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行稚疹。
雖然JavaScript提供了load事件居灯，當(dāng)頁(yè)面呈現(xiàn)時(shí)用來(lái)執(zhí)行這個(gè)事件，直到所有的東西内狗，如圖像已被完全接收前怪嫌，此事件不會(huì)被觸發(fā)。
在大多數(shù)情況下柳沙，只要DOM結(jié)構(gòu)已完全加載時(shí)岩灭，腳本就可以運(yùn)行。傳遞處理函數(shù)給.ready()方法赂鲤，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù)噪径，因此柱恤，這里是進(jìn)行所有其它事件綁定及運(yùn)行其它 jQuery 代碼的最佳地方。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時(shí)找爱，（例如梗顺，取得圖片的大小需要在圖片被加載完后才能知道），就需要將這樣的代碼放到 load 事件中车摄。
下面兩種語(yǔ)法全部是等價(jià)的：
$(document).ready(handler)
$(handler)
$(function(){
console.log("hello'');
});
window.onload和$(document).ready有什么區(qū)別寺谤？document.onDOMContentLoaded呢?
window.onload和$(document).ready都是頁(yè)面加載時(shí)我們就去執(zhí)行一個(gè)函數(shù)或者動(dòng)作，具體細(xì)節(jié)上還是有區(qū)別的
最基本區(qū)別
- 1.執(zhí)行時(shí)間
window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后再去執(zhí)行吮播。
$(document).ready()時(shí)DOM結(jié)構(gòu)回執(zhí)完畢后就執(zhí)行变屁，不必等到加載完畢舆乔。 - 2.編寫(xiě)個(gè)數(shù)不同
window.onload不同同時(shí)編寫(xiě)多個(gè)谢鹊，如果有多個(gè)window.onload方法鸠信，只會(huì)執(zhí)行一個(gè)
$(document).ready()可以同時(shí)編寫(xiě)多個(gè)当窗，并且可以得到執(zhí)行 - 3.簡(jiǎn)化寫(xiě)法
window.onload沒(méi)有簡(jiǎn)化寫(xiě)法
$(document).ready(function(){})可以簡(jiǎn)寫(xiě)成$(function(){});
$(document).ready()方法和window.onload方法有相似的功能，但是在執(zhí)行時(shí)機(jī)方面是有區(qū)別的宵膨。window.onload方法是在網(wǎng)頁(yè)中所有的元素（包括元素的關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行运杭，即JavaScript此時(shí)才可以訪問(wèn)網(wǎng)頁(yè)中的任何元素逗爹。而通過(guò)jQuery中的$(document).ready()方法注冊(cè)的事件處理程序谷市，可以在DOM完全就緒時(shí)就可以被調(diào)用蛔垢。此時(shí)击孩，網(wǎng)頁(yè)的所有元素對(duì)jQuery而言都是可以訪問(wèn)的迫悠，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢巩梢。
document.onDOMContentLoaded
在頁(yè)面中觸發(fā)[DOMContentLoaded]事件時(shí)觸發(fā)创泄。此時(shí)，文檔被加載和解析括蝠，并且DOM被完全構(gòu)造鞠抑，但鏈接的資源（例如圖像，樣式表和子幀）可能尚未被加載忌警。
范例：
點(diǎn)擊 icon 后會(huì)切換播放和暫停兩種狀態(tài)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" >
<style>
.iconfont {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<span class="play-pause">
<i class="iconfont icon-pause "></i></span>
<script>
$('.play-pause').on('click', function(){
var $iconfont =$(this).find('.iconfont')
$iconfont.toggleClass('icon-pause').toggleClass('icon-play')
})
</script>
</body>
</html>
比起原生js的實(shí)現(xiàn)簡(jiǎn)化了很多
作者：彭榮輝
鏈接：http://www.reibang.com/u/0f804364a8a8
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有搁拙。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處法绵。
