jQuery雜項方法

前面的話

　　雜項方法其實也是工具類方法，但由於其不是定義在jQuery構造函數上的方法，所以不能稱為工具方法。本文將詳細介紹jQuery中的雜項方法

 

數據操作

【data()】

　　該方法用於在匹配元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值

data( key, value )
data( obj )
data( key )
data()

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

console.log($("body").data("foo"));//52
console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}

　　如果使用原生javascript，相當於

document.body.foo = 52;
console.log(document.body.foo);//52

【removeData()】

　　removeData()方法允許移除用.data()綁定的值。當帶name參數調用的時候，.removeData()將刪除那個特有的值，當不帶任何參數的時候，所有的值將被移除。從jQuery的內部.data() 緩存不影響任何在文檔中的HTML5的data-屬性，使用.removeAttr()可以移除這些屬性

　　當使用.removeData("name")時，如果沒有這個屬性名字是在內部數據緩存，jQuery將試圖在元素上找到一個 data-的屬性。為了避免重復查詢 data- 屬性，將這個名稱設置為無論是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()

removeData( [name] ) // [name]:String 要移除的存儲數據名
removeData( [list] ) // [list]:Array,String 一個數組或空間分隔的字符串命名要刪除的數據塊

$('body').data("test1", "VALUE-1")
         .data("test2", "VALUE-2");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}
$('body').removeData("test1");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}

　　如果使用原生javascript，相當於

document.body.foo = 52;
console.log(document.body.foo);//52
delete document.body.foo;
console.log(document.body.foo);

 

隊列操作

【queue()】

　　顯示或操作匹配的元素上已經執行的函數隊列

queue( [queueName ] ) //queueName : String 一個含有隊列名的字符串。默認是 fx，標准的動畫隊列
queue( [queueName ], newQueue ) //newQueue:Array 一個替換當前列隊內容的函數數組
queue( [queueName ], callback( next ) )//callback( next ):Function() 將要添加到隊列中的新函數。當該函數被調用時，會從彈出隊列中的下一個元素

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
var n = div.queue('fx');
console.log(n.length);//2

【clearQueue()】

　　從列隊中移除所有未執行的項

clearQueue( [queueName ] )

 

集合操作

【each()】

　　遍歷一個jQuery對象，為每個匹配元素執行一個函數

each( function(index, function(index, Element)) )

$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

【add()】

　　add()方法添加元素到匹配的元素集合。add()方法的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用

add( selector )
add( elements )
add( html )
add( jQuery object )
add( selector, context )

$('li').add('p')
$('li').add('<p id="new">new paragraph</p>')

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<div>div</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').add('div').css('background', 'lightgreen');
})
</script>

【get()】

　　通過檢索匹配jQuery對象得到對應的DOM元素

get( [index ] ) index:Number 從0開始計數，用來確定獲取哪個元素

$( "li" ).get( 0 )

【index()】

　　從匹配的元素中搜索給定元素的索引值，從0開始計數

index( [selector或element] )

　　如果不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置

　　如果在一組元素上調用 .index() ，並且參數是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對於原先集合的位置。

　　如果參數是一個選擇器， .index() 返回值就是原先元素相對於選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1

$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));

【toArray()】

　　返回一個包含jQuery對象集合中的所有DOM元素的數組

toArray() 這個方法不接受任何參數

//[<li id="foo">, <li id="bar">]
alert($('li').toArray());

 

索引過濾

　　索引選擇器是jQuery過濾選擇器的一部分。與此同時，也存在功能相似的索引相關的方法，包括eq()、first()、last()

【eq()】

　　eq()方法匹配元素的集合為指定的索引的哪一個元素。eq()方法可以接受一個整數作為參數，以0為基數。若整數為負數，則從集合中的最后一個元素開始計數　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>
<script>
$('#btn1').click(function(){
    $('li').eq(0).css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').eq(-1).css('border','1px solid blue');    
})
$('#btn3').click(function(){
    $('li').eq(2).css('border','1px solid green');    
})
</script>

【first()】

　　first()方法獲取匹配元素集合中第一個元素，該方法不接受參數

【last()】

　　last()方法獲取匹配元素集合中最后一個元素，該方法不接受參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<script>
$('#btn1').click(function(){
    $('li').first().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').last().css('border','1px solid blue');    
})
</script>

【end()】

　　終止在當前鏈的最新過濾操作，並返回匹配的元素的以前狀態

end() 這個方法不接受任何參數

　　end() 方法主要用於 jQuery 的鏈式屬性中。當沒有使用鏈式用法時，我們通常只是調用變量名上的前一個對象，所以我們不需要操作棧。使用 end() 時，我們可以一次性調用所有需要的方法

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

　　在上面的代碼中，首先在鏈式用法中只在第一個列表中查找樣式為 foo 的項目，並將其背景色變成紅色。然后 end() 返回調用 find() 之前的狀態。因此，第二次 find() 將只會查找 <ul class="first"> 中的 '.bar'，而不是繼續在 <li class="foo"> 中進行查找，結果是將匹配到的元素的背景色變成綠色

 

內容過濾

　　jQuery選擇器中包括內容過濾選擇器，而jQuery中也存在功能類似的內容過濾的方法，包括has()、filter()、is()、not()、map()、slice()

【has()】

　　has()方法用於篩選匹配元素集合中有相匹配的選擇器或DOM元素的后代元素的父元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
    </li>
    <li>list item 3</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').has('ul').css('border', '1px solid lightblue');
})
</script>

【map()】

　　map()方法通過一個函數匹配當前集合中的每個元素

　　作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input value="text">
<input value="text">
<input value="text">
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('input').map(function(index,dom){
        dom.value += index;
    });
})
</script>

【filter()】

　　filter()方法從匹配的元素集合中篩選出指定的元素，參數可以是一個選擇器字符串、一個或多個DOM元素、jQuery對象或一個函數　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').filter(':even').css('border','1px solid lightgreen')
})
</script>

　　filter()方法中作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象。如果函數返回值為true，則該元素保留；否則，該元素在匹配集合中被去除 

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').filter(function(index,dom){
        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')
            return true;
        }
    })
})
</script>    

【not()】

　　not()方法與filter()方法正好相反，它從匹配的元素集合中移除指定的元素，參數可以是一個選擇器字符串、一個或多個DOM元素、jQuery對象或一個函數　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').not(':even').css('border','1px solid lightgreen')
})
</script>

　　not()方法中作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象。如果函數返回值為true，則該元素被去除；否則，該元素在匹配集合中保留

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').not(function(index,dom){
        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')
            return true;
        }
    })
})
</script>

【is()】

　　is()方法用於判斷當前元素是否與參數相匹配，如果匹配，則返回true；否則，返回false。參數可以是一個選擇器，DOM元素，jQuery對象或函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
$('li').click(function(){
    if($(this).is(':contains("2")')){
        $(this).css('border','1px solid black')
    }
})
</script>    

　　is()方法中作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象。如果函數返回true，is()方法也返回true，如果函數返回false，is()方法也返回false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<div id="result"></div>
<script>
var i = 0;
$('li').click(function(){
    ++i;
    if($(this).is(function(index,dom){
        $('#result').html(dom.innerHTML);
        if(i%2){
            return true;    
        }
    })){
         $(this).css('border','1px solid black')
    }
})
</script>

【slice()】

　　slice()方法根據指定的下標范圍，過濾匹配的元素集合，並生成一個新的jQuery對象　

　　slice(start[,end])方法接受兩個參數：start和end

　　start是一個整數，從0開始計數的下標。代表將要被選擇的元素的起始下標。如果指定的下標是一個負數，那么代表從末尾開始計數

　　end是一個整數，從0開始計數的下標。代表將要被選擇的元素的結束下標。如果指定的下標是一個負數，那么代表從末尾開始計數。如果忽略此參數，則選擇的范圍是從start開始，一直到最后

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').slice(2,4).css('background', 'red');
})
</script>