自己總結的(de)jQuery經常使用的(de)方法(需要(yào / yāo)記憶)

2018-02-02 關鍵詞:蘇州網站制作  蘇州網站建設  蘇州網站設計  蘇州做網站   3103

Jquery有很多方法,蘇州網站制作總結了(le/liǎo)平時(shí)常用的(de)一(yī / yì /yí)些方法,分享給大(dà)家,也(yě)順便加強下記憶。當然這(zhè)些方法的(de)使用網上(shàng)都有,甚至總結的(de)比下面的(de)還要(yào / yāo)詳細,不(bù)喜勿噴哦。

1.each():遍曆函數

用法:它是(shì)一(yī / yì /yí)個(gè)通用的(de)叠代函數,可以(yǐ)用來(lái)無縫叠代對象和(hé / huò)數組。jQuery.each(collection, callback(indexInArray, valueOfElement) )
<pre>
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
})

</pre>

2.append():插入節點
用法:使用append(content[,content])方法在(zài)每個(gè)匹配元素裏面的(de)末尾處插入參數内容,參數可以(yǐ)是(shì)DOM元素,DOM元素數組,HTML字符串,或者jQuery對象
<pre>

$('#btn').click(function(){
$('#box').append('<spanid="test">測試内容</span>');
$('.inner').append($('#box'));
})

</pre>

3.remove():删除節點
用法:remove()方法會将元素自身移除,同時(shí)也(yě)移除元素内部的(de)一(yī / yì /yí)切,包括綁定事件及與該元素相關的(de)jQuery數據
<pre>
$('#btn1').click(function(){
$div = $('.inner').remove();
})
</pre>

4.attr(attributeName):增加和(hé / huò)獲取屬性
用法:attr(傳入特性名):獲取特性的(de)值,相當于(yú)DOM中的(de)getAttribute(),這(zhè)個(gè)方法既可以(yǐ)設置屬性也(yě)可以(yǐ)取出(chū)某個(gè)屬性。
實例:
取出(chū)屬性:console.log($('#test').attr('id'));
增加屬性:$('#test').attr('title','123');

5.removeAttr(attributeName):删除屬性
用法:removeAttr()方法使用原生的(de)removeAttribute()函數,但是(shì)它的(de)優點是(shì)可以(yǐ)直接在(zài)一(yī / yì /yí)個(gè)jQuery 對象上(shàng)調用該方法。
實例:$('#ele1').removeAttr('title data');

6.replaceWith():替換節點
用法:replaceWith()方法用提供的(de)内容替換集合中所有匹配的(de)元素并且返回被删除元素的(de)集合
實例:
<pre>
$('#btn').click(function(){
alert($('.inner').replaceWith('<div>div</div>').html())
})
</pre>

7.type():檢查類型
用法:type()方法用于(yú)檢測javascript對象的(de)類型如果對象是(shì)undefined或null,則返回相應的(de)“undefined”或“null”

8.find():獲取後代元素
用法:find()方法通過一(yī / yì /yí)個(gè)選擇器,jQuery對象,或元素過濾,得到(dào)當前匹配的(de)元素集合中每個(gè)元素的(de)後代,匹配的(de)元素将構造一(yī / yì /yí)個(gè)新的(de)jQuery對象

9.data():存儲數據
用法:存儲任意數據到(dào)指定的(de)元素并且/或者返回設置的(de)值,jQuery.data( element, key, value )。
屬性:element:Element 要(yào / yāo)關聯數據的(de)DOM對象;key: String 存儲的(de)數據名;value:Object 新數據值
實例:$.data(document.body, 'foo', 52);console.log($.data( document.body, 'foo'));//52

10、獲得内容 - text()、html() 以(yǐ)及 val()
• text() - 設置或返回所選元素的(de)文本内容
• html() - 設置或返回所選元素的(de)内容(包括 HTML 标記)
• val() - 設置或返回表單字段的(de)值

11.Extend()方法
用法:這(zhè)個(gè)方法運用有點難度:jquery的(de)擴展方法extend是(shì)我們在(zài)寫插件的(de)過程中常用的(de)方法,該方法有一(yī / yì /yí)些重載原型。
<pre>extend(dest,src1,src2,src3...);它的(de)含義是(shì)将src1,src2,src3...合并到(dào)dest中,返回值爲(wéi / wèi)合并後的(de)dest,由此可以(yǐ)看出(chū)該方法合并後,是(shì)修改了(le/liǎo)dest的(de)結構的(de)。如果想要(yào / yāo)得到(dào)合并的(de)結果卻又不(bù)想修改dest的(de)結構,可以(yǐ)如下使用:</pre>
<pre>var newSrc=$.extend({},src1,src2,src3...)//也(yě)就(jiù)是(shì)将"{}"作爲(wéi / wèi)dest參數。這(zhè)樣就(jiù)可以(yǐ)将src1,src2,src3...進行合并,然後将合并結果返回給newSrc了(le/liǎo)。</pre>
實例:
<pre>var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}那麽合并後的(de)結果result={name:"Jerry",age:21,sex:"Boy"}也(yě)就(jiù)是(shì)說(shuō)後面的(de)參數如果和(hé / huò)前面的(de)參數存在(zài)相同的(de)名稱,那麽後面的(de)會覆蓋前面的(de)參數值。</pre>






首頁 網站建設 小程序 品牌設計 服務項目 案例展示 售後保障 聯系方式 新聞中心 關于(yú)我們 人(rén)才招聘
我們的(de)優勢

細緻入微的(de)前期服務
精準的(de)策劃服務
精湛的(de)網頁設計
穩定 可靠 極速的(de)域名和(hé / huò)服務器
任何問題,24小時(shí)回複并處理

版權所有:蘇州謝謝網絡傳媒有限公司  京ICP證000000号   

首頁 電話 服務項目