Jquery有很多方法,蘇州網站制作總結了平時常用的一些方法,分享給大家,也順便加強下記憶。當然這些方法的使用網上都有,甚至總結的比下面的還要詳細,不喜勿噴哦。
1.each():遍歷函數
用法:它是一個通用的迭代函數,可以用來無縫迭代對象和數組。jQuery.each(collection, callback(indexInArray, valueOfElement) )
<pre>
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
})
</pre>
2.append():插入節點
用法:使用append(content[,content])方法在每個匹配元素里面的末尾處插入參數內容,參數可以是DOM元素,DOM元素數組,HTML字符串,或者jQuery對象
<pre>
$('#btn').click(function(){
$('#box').append('<spanid="test">測試內容</span>');
$('.inner').append($('#box'));
})
</pre>
3.remove():刪除節點
用法:remove()方法會將元素自身移除,同時也移除元素內部的一切,包括綁定事件及與該元素相關的jQuery數據
<pre>
$('#btn1').click(function(){
$div = $('.inner').remove();
})
</pre>
4.attr(attributeName):增加和獲取屬性
用法:attr(傳入特性名):獲取特性的值,相當于DOM中的getAttribute(),這個方法既可以設置屬性也可以取出某個屬性。
實例:
取出屬性:console.log($('#test').attr('id'));
增加屬性:$('#test').attr('title','123');
5.removeAttr(attributeName):刪除屬性
用法:removeAttr()方法使用原生的removeAttribute()函數,但是它的優點是可以直接在一個jQuery 對象上調用該方法。
實例:$('#ele1').removeAttr('title data');
6.replaceWith():替換節點
用法:replaceWith()方法用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合
實例:
<pre>
$('#btn').click(function(){
alert($('.inner').replaceWith('<div>div</div>').html())
})
</pre>
7.type():檢查類型
用法:type()方法用于檢測javascript對象的類型如果對象是undefined或null,則返回相應的“undefined”或“null”
8.find():獲取后代元素
用法:find()方法通過一個選擇器,jQuery對象,或元素過濾,得到當前匹配的元素集合中每個元素的后代,匹配的元素將構造一個新的jQuery對象
9.data():存儲數據
用法:存儲任意數據到指定的元素并且/或者返回設置的值,jQuery.data( element, key, value )。
屬性:element:Element 要關聯數據的DOM對象;key: String 存儲的數據名;value:Object 新數據值
實例:$.data(document.body, 'foo', 52);console.log($.data( document.body, 'foo'));//52
10、獲得內容 - text()、html() 以及 val()
? text() - 設置或返回所選元素的文本內容
? html() - 設置或返回所選元素的內容(包括 HTML 標記)
? val() - 設置或返回表單字段的值
11.Extend()方法
用法:這個方法運用有點難度:jquery的擴展方法extend是我們在寫插件的過程中常用的方法,該方法有一些重載原型。
<pre>extend(dest,src1,src2,src3...);它的含義是將src1,src2,src3...合并到dest中,返回值為合并后的dest,由此可以看出該方法合并后,是修改了dest的結構的。如果想要得到合并的結果卻又不想修改dest的結構,可以如下使用:</pre>
<pre>var newSrc=$.extend({},src1,src2,src3...)//也就是將"{}"作為dest參數。這樣就可以將src1,src2,src3...進行合并,然后將合并結果返回給newSrc了。</pre>
實例:
<pre>var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}那么合并后的結果result={name:"Jerry",age:21,sex:"Boy"}也就是說后面的參數如果和前面的參數存在相同的名稱,那么后面的會覆蓋前面的參數值。</pre>