雜項：DOM 元素方法、資料儲存、集合操作 (jQuery 21)

※DOM 元素方法

DOM和jQuery的轉換，所以經過這個方法會變成DOM，只能用DOM的東西(除非再轉回來)
官網連結

目前有4個：
.get()：給索引值，回傳DOM節點
.index()：給DOM節點，回傳索引值，沒有回傳-1
.size()：1.8已廢棄，但還沒移除，取集合的長度用的
.toArray()：轉換成陣列

※.get()

$(function() {
    alert($('div').get(0).innerText);
    alert($('div').get()[1].innerText);
    alert($('div').get(-1).innerText);
});
----------
<div>A</div>
<div>B</div>
<div>C</div>

※.index()

var divb = document.getElementById('b');
alert($('div').index(divb));
alert($('div').index($('#b')));
alert($('p').index());
----------
<div>A</div>
<div id="b">B</div>
<div>C</div>
<p>P</p>

※.toArray()、.size()

$(function() {
    var arr = $('div').toArray();
    for(var i=0; i<arr.length; i++){
        alert(arr[i].innerText);
    }
    
    /*
    $('div').each(function(i){
        alert(arr[i].innerText);
    });
    */
    
    alert($('div').size());
});
----------
<div>A</div>
<div id="b">B</div>
<div>C</div>

※註解的each方法也是可以的

※資料儲存

官網連結

目前有2個：
.data()：儲存資料，很像java的java.util.Map
.removeData()：移除.data()設定的資料

※.data()、.removeData()

$(function(){
    $('body').data('xxx', 'x');
    $('body').data('ABC', {A:'a', B:'b', C:'c'});
    $('body').data({ooo:['o', 'oo', 'ooo']});
    
    console.log($('body').data('xxx'));// x
    console.log($('body').data('ABC').A);// a
    console.log($('body').data().xxx);// x
    console.log($('body').data().ABC.B);// b
    console.log($('body').data().ooo);// o,oo,ooo
    
    $('span').data('xxx', 'span x');
    console.log($('span').data('xxx'));// span x
    console.log($('span').data('x'));// undefined
    
    $('body').removeData('ABC');
    console.log('移除body的ABC後');
    console.log($('body').data('ABC'));// undefined
    console.log($('body').data('xxx'));// x
    console.log($('span').data('xxx'));// span x
    
    $('body').removeData();
    console.log('移除body的data後');
    console.log($('body').data('ABC'));// undefined
    console.log($('body').data('xxx'));// undefined
    console.log($('span').data('xxx'));// span x
});
----------
<span>span</span>

※集合操作

官網連結

目前有2個：
.each()：迴圈，有兩個參數，視情況可加
jQuery.param()：將json變成一個字串，方便傳遞

※.each()

$(function(){
    $('span').each(function(i, e){
        $(this).text('span' + i);
        $(e).css('color', 'blue');
    });
});
----------
<span></span>
<span></span>
<span></span>

※e就是this

※$.param()

$(function(){
    $('p:first').text($.param({xxx:'x', ooo:'o'}));// xxx=x&ooo=o
    $('p:eq(1)').text($.param({zzz: [1,2,3]}));// zzz%5B%5D=1&zzz%5B%5D=2&zzz%5B%5D=3
    $('p:last').text($.param(
        {
        eee: {a:1,b:2}, 
        ttt: [3,4,{c:5}]
        })
    );
    // eee%5Ba%5D=1&eee%5Bb%5D=2&ttt%5B%5D=3&ttt%5B%5D=4&ttt%5B2%5D%5Bc%5D=5
});
----------
<p></p>
<p></p>
<p></p>