互聯網開(kāi)發&品牌全案設計(jì)
12年(nián) 實戰經驗,品質服務
Jquery有(yǒu)很(hěn)多(duō)方法,蘇州網站(zhàn)制(zhì)作(zuò)總結了(le)平時(shí)常用(yòng)的(de)一(yī)些(xiē)方法,分(fēn)享給大(dà)家(jiā),也(yě)順便加強下(xià)記憶。當然這(πzhè)些(xiē)方法的(de)使用(yòng)網上(shàng)都(dōu)有(yǒu),甚至總結的(de)比下(xià)面的(de)還(hái)要(yào)詳細,不(bù↓)喜勿噴哦。
1.each():遍曆函數(shù)
用(yòng)法:它是(shì)一(yī)個(gè)通(tōng)用(yòng)的(de)叠代函數(shù),∑可(kě)以用(yòng)來(lái)無縫叠代對(duì)象和(hé)數(shù)組。jQuery.each(collection, callback(indexInArray, valueOfφElement) )
<pre>
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
})
</pre>
2.append():插入節點
用(yòng)法:使用(yòng)append(content[,content])方法在每個(gè)匹配元素裡(lǐ)面的(de)末尾處插入參數(shù)內(nèi)容,參數(shù)可(kě)≈以是(shì)DOM元素,DOM元素數(shù)組,HTML字符串,或者jQuery對(duì)象
<pre>
$('#btn').click(function(){
$('#box').append('<spanid="test">測試內(nèi)容</span>');
$('.inner').append($('#box'));
})
</pre>
3.remove():删除節點
用(yòng)法:remove()方法會(huì)将元素自(zì)身(shēn)移除,同時(shí)也(yě)移除元素內(nèi)部的(de)一(yī)切,¥包括綁定事(shì)件(jiàn)及與該元素相(xiàng)關的(de)jQuery數(shù)據
<pre>
$('#btn1').click(function(){
$div = $('.inner').remove();
})
</pre>
4.attr(attributeName):增加和(hé)獲取屬性
用(yòng)法:attr(傳入特性名):獲取特性的(de)值,相(xiàng)當于DOM中的(de)getAttriεbute(),這(zhè)個(gè)方法既可(kě)以設置屬性也(yě)可(kě)以取出某個(gè)屬性。
實例:
取出屬性:console.log($('#test').attr('id'));
增加屬性:$('#test').attr('title','123');
5.removeAttr(attributeName):删除屬性
用(yòng)法:removeAttr()方法使用(yòng)原生(shēng)的(de)removeAttribu✔te()函數(shù),但(dàn)是(shì)它的(de)優點是(shì)可(kě)以直接在一(yī)個(gè)jQuery© 對(duì)象上(shàng)調用(yòng)該方法。
實例:$('#ele1').removeAttr('title data');
6.replaceWith():替換節點
用(yòng)法:replaceWith()方法用(yòng)提供的(de)內(nèi)容替換集合中所有(yǒu)匹配的(de)元素并且返回被删除元素的(de)集合
實例:
<pre>
$('#btn').click(function(){
alert($('.inner').replaceWith('<div>div</div>').html())
})
</pre>
7.type():檢查類型
用(yòng)法:type()方法用(yòng)于檢測javascript對(duì)象的(de)類型如(rú)果對(duì)象是(shì)undefined或null,則返回相(xià₹ng)應的(de)“undefined”或“null”
8.find():獲取後代元素
用(yòng)法:find()方法通(tōng)過一(yī)個(gè)選擇器(qì),jQuery對(duì)象,或元素過濾,得(de)到(dào)Ω當前匹配的(de)元素集合中每個(gè)元素的(de)後代,匹配的(de)元素将構造一(yī)個(gè)新的(de)jQuery對(duì)象
9.data():存儲數(shù)據
用(yòng)法:存儲任意數(shù)據到(dào)指定的(de)元素并且/或者返回設置的(de)值,jQuery.data( element, key, value )。
屬性:element:Element 要(yào)關聯數(shù)據的(de)DOM對(duì)象;key: String 存儲的(de)數(shù)據名;val ue:Object 新數(shù)據值
實例:$.data(document.body, 'foo', 52);console.log($.™data( document.body, 'foo'));//52
10、獲得(de)內(nèi)容 - text()、html() 以及 val()
• text() - 設置或返回所選元素的(de)文(wén)本內(nèi)容
• html() - 設置或返回所選元素的(de)內(nèi)容(包括 HTML 标記)
• val() - 設置或返回表單字段的(de)值
11.Extend()方法
用(yòng)法:這(zhè)個(gè)方法運用(yòng)有(yǒu)點難度:jquery的(de)擴展Ω方法extend是(shì)我們在寫插件(jiàn)的(de)過程中常用(yòng)的(de)方法,該方法有(yǒu)一(yī)些(xiē)重載原型。
<pre>extend(dest,src1,src2,src3...);它的(de)含義是(shì)将src1,src2,src3...合并到(dào)dest中,返回值為(wèi)合并後的(de<)dest,由此可(kě)以看(kàn)出該方法合并後,是(shì)修改了(le)dest的(de)結構的(de)。如(rú)果想要(yào)¥得(de)到(dào)合并的(de)結果卻又(yòu)不(bù)想修改dest的(de)結構,可(kě)以如(rú)下(xià)使用(yòng):</pre>
<pre>var newSrc=$.extend({},src1,src2,src3...)//也(yě)就(jiù)是(shì)将"{}"作(zuò)為(wèi)dest 參數(shù)。這(zhè)樣就(jiù)可(kě)以将src1,src2,src3...進行(xíng)合并,然後将合并結果返回給newSrc了(le)。</pre>
實例:
<pre>var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}那(nà)麽合并後的(de)結果>result={name:"Jerry",age:21,sex:"Boy"}也(yě)就(jiù)是(sh ì)說(shuō)後面的(de)參數(shù)如(rú)果和(hé)前面的(de)參數(shù)存在相(xiàng)同的(♣de)名稱,那(nà)麽後面的(de)會(huì)覆蓋前面的(de)參數(shù)值。</pre>