1. 程式人生 > 其它 >常用jQuery函式總結

常用jQuery函式總結

今天學習了jQuery,便想總結一下常用的jQuery函式,供大家參考,也供自己備用

1、$()獲取指定物件

$()裡面可以寫標籤名,也可以寫id名,例如$("#id名") ,還可以寫class名

2、.click()單擊事件

點選此元素所觸發的事件

3、.blur()離焦事件

焦點離開元素所觸發的事件

4、.focus()聚焦事件

焦點進入元素所觸發的事件

5、.css()獲取或設定元素的css樣式

函式可以有一個或兩個引數,當引數為一個時,可以獲取css指定屬性的值,例如.css("background-color"),可以獲取指定元素的背景顏色。當引數有兩個時,可以修改css指定屬性的值,例如.css("background-color","red"),可以將指定元素的背景顏色修改為紅色

6、.html()返回或設定被選元素的內容,包括其中的標籤

例如<a href="#" id="a1"><strong>這是文字內容</strong></a>,則呼叫$("#a1").html()會返回 <strong>這是文字內容</strong>,如果函式裡寫上引數,則可以給元素設定內容(不止是設定純文字內容,標籤也可以)。剛才的例子如果呼叫$("#a1").html("abc"),則會將元素修改為<a href="#" id="a1">abc</a>

7、.text()返回或設定被選元素的純文字內容

例如<a href="#" id="a1"><strong>這是文字內容</strong></a>,則呼叫$("#a1").text()會返回 這是文字內容,如果函式裡寫上引數,則可以給元素設定內容(不止是設定純文字內容,標籤也可以),剛才的例子如果呼叫$("#a1").text("abc"),則會將元素修改為<a href="#" id="a1">abc</a>

8、.val()返回或設定被選元素的value值(貌似只能作用在表單元素上)

例如<input type="text" value="元素內容" id="input1"/>

,呼叫$("#input1").val()則會返回 元素內容 ,如果函式裡寫上引數,則可以給元素設定內容,剛才的例子如果呼叫$("#input1").val("abc"),則會將元素修改為<input type="text" value="abc" id="input1"/>

9、attr()設定或返回元素的屬性值(推薦在獲取或設定元素的非固有屬性時使用)

例如<div id="div1" name="aaa">div1</div>,則呼叫$("#div1").attr("name")會返回name的值aaa,如果呼叫$("#div1").attr("name","bbb")則會將name的值設定為bbb

10、.removeAttr()刪除指定元素的屬性

例如<div id="div1" name="aaa">div1</div>,則呼叫$("#div1").removeAttr("name")會刪除name屬性

11、prop()設定或返回元素的屬性值(推薦在獲取或設定元素的固有屬性時使用)

例如<input type="button" value="點我" id="b1" /> ,則呼叫$("#b1").prop("type")會返回type的值button,如果呼叫$("#b1").attr("type","radio")則會將type的值設定為radio

12、.removeProp()刪除指定元素的屬性

例如<input type="button" value="點我" id="b1" /> ,則呼叫$("#b1").removeProp("value")會刪除value屬性

13、.addClass()為元素新增類選擇器

例如<div id="div1" name="aaa">div1</div>,則呼叫$("#div1").addClass("div4")可以將div的class設定為.div4

14、.removeClass()刪除元素的類選擇器

例如<div id="div1" name="aaa" class="div4">div1</div>,則呼叫$("#div1").removeClass("div4")可以刪除div的名叫div4的class

15、.append()將某個元素新增到指定元素的裡面,並且排在最後

例如

    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="tj" name="tianjin">天津</li>
        <li id="cq" name="chongqing">重慶</li>
    </ul>

    <ul id="love">
        <li id="fk" name="fankong">反恐</li>
        <li id="xj" name="xingji">星際</li>
    </ul>

$("#city").append($("#fk"))會將反恐放置到city的後面

16、.prepend()將某個元素新增到指定元素的裡面,並且排在最前面

例如剛才那個例子 $("#city").prepend($("#fk")) 將反恐放置到city的最前面

17、.after()將某個元素新增到指定元素之後,他們是同級兄弟關係

例如剛才那個例子 $("#tj").after($("#fk")) 將反恐插入到天津後面

18、.before()將某個元素新增到指定元素之前,他們是同級兄弟關係

例如剛才那個例子 $("#tj").before($("#fk")) 將反恐插入到天津前面

19、.remove()將某個元素刪除

例如剛才那個例子 $("#fk").remove(),則可以將這個元素刪除

20、.empty()將後代的所有元素清空,但是保留當前物件及其屬性節點

例如剛才那個例子 $("#city").empty(),則可以將其後代的所有li都清空,但是其自身ul保留了下來