常用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"/>
<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保留了下來