1. 程式人生 > >JQ 常用的相關方法事件(持續更新中)

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;
    });