JQ 常用的相關方法事件(持續更新中)
獲取元素
**$( ) **
$ 為必須, 括號中直接填寫css選擇器即可
$( ‘#book’ ) //獲取到id名為 book 這個元素
篩選
.find ( )
搜尋所有與指定表示式匹配的元素。這個函式是找出正在處理的元素的後代元素的好方法。
find前面是當前獲取到的元素,括號中是普通的css選擇器
box.find(’.paper .event’); //在box這個元素下找到 class名 為paper 下 class名為 event的所有元素
eq( index|-index )
獲取當前鏈式操作中第N個jQuery物件,返回jQuery物件,當引數大於等於0時為正向選取,比如0代表第一個,1代表第二個。當引數為負數時為反向選取,比如-1為倒數第一個。
<p> This is just a test.</p> <p> So is this</p> //HTML 程式碼
$("p").eq(1) //獲取匹配的第二個元素
$("p").eq(-2) // 獲取匹配的倒數第二個元素
迴圈
each( callback )
等同於我們的foreach迴圈,同樣接收一個回撥函式,回撥函式接收三個引數
訪問匹配元素的樣式屬性。
css(name|pro|[,val|fn])
**說明:**當你使用CSS屬性在css()或animate()中,我們將根據瀏覽器自動加上字首(在適當的時候),比如(“user-select”, “none”); 在Chrome/Safari瀏覽器中我們將設定為"-webkit-user-select", Firefox會使用"-moz-user-select", IE10將使用"-ms-user-select".
$(“p”).css({ “color”: “#ff0011”, “background”: “blue” }); // 將所有段落的字型顏色設為紅色並且背景為藍色。
$("div").click(function() { // 使用引數name,回撥函式 來逐漸增加div的大小
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
獲取元素內容,或者設定元素的內容
html([val|fn])
val : 用於設定HTML內容的值
fn : 函式返回一個HTML字串。接受兩個引數,index為元素在集合中的索引位置,html為原先的HTML值。
$('p').html(); //返回p元素的內容。
$("p").html("Hello <b>world</b>!"); //設定所有 p 元素的內容
$("p").html(function(n){ //使用函式來設定所有匹配元素的內容。
return "這個 p 元素的 index 是:" + n;
});