淺談jQuery中的工具方法

• length:獲取元素的個數

<div id='d1'>Hello</div>
<div>Hi</div>
<div>MyName</div>
<div>What</div>
<div>where</div>

<script>
    console.log($('div').length);//5
</script>

• get(index):index表示傳入的索引值，根據傳入指定的索引值在一個集合中找元素

<div>hello</div>
<div class='c1'>hi</div>
<div>good</div>

<script>
    console.log($('div').get(1));//找到的是class爲c1的元素
</script>

• $().index(element):該方法只能jQuery對象調用，括號接收的參數也只能是jQuery對象，找到返回該元素所在的索引值位置，找不到返回-1

<div id='d1'></div>
<div></div>
<div></div>

<script>
   console.log($('div').index($('#d1')));//找到的是索引值爲0
</script>

• $.inArray(value,array,fromIndex)方法：主要獲取傳入的元素在一個集合中的位置，找到返回該位置對應的索引值，找不到返回-1；value傳入的必須不能是jQuery對象；array傳入的能夠爲jQuery對象也能夠是DOM對象，還能傳入數組

<div>Hello</div>
<div class='c1'>Hi</div>
<div>Good</div>

<script>
    console.log($.inArray(document.getElementsByClassName('c1')[0],$('div')));//找到的是索引值爲1
</script>

• $().toArray()方法：只能傳入一個jQuery對象，把一個jQuery對象轉換成數組形式

<div class='c1'>Hello</div>
<div>good</div>
<div>ok</div>

<script>
    console.log($('div').toArray());//輸出結果:[div.c1, div, div,]
</script>

• $.makeArray(obj)方法：傳入的是一個對象，能夠是jQuery對象，也能夠是DOM對象，而後會返回一個數組形式的集合

<div>Hello</div>
<div class='c1'>Hi</div>
<div>Good</div>

<script>
    console.log($.makeArray($('div')));//輸出結果：[div, div.c1, div]
</script>

• $():工廠函數的調用，返回jQuery對象；$.inArray():也是一個對象，jQuery的全局對象
• each(function(index,domElement){}):能夠用它來遍歷一個jQuery對象的集合，遍歷完成以後，返回的是DOM對象，index返回的是索引值，domElement返回的是索引值對應的元素

<div>html</div>
<div>css</div>
<div>javascript</div>

<script>
    var $divs=$('div');
    $divs.each(function(index,domElement){
        console.log(index,domElement);
    /*輸出結果：0   <div>html</div>
               1   <div>css</div>
               2   <div>javascript</div>*/    
    });
</script>

• $.each(obj,function(index,domElement){})：能夠用來遍歷一個類數組對象的集合，obj傳入的能夠是jQuery對象，也能夠是dom對象，index能夠獲取對應的索引值，domElement獲取的是索引值對應的元素,返回的是DOM對象

<div>Hello</div>
<div>Hi</div>
<div>good</div>

<script>
    $.each($('div'),function(index,domElement){
        console.log(index,domElement);
        /*
        輸出結果：  0  <div>Hello</div>
                   1  <div>Hi</div>
                   2  <div>good</div> 
        */
    })
</script>

• $.trim:去掉字符串中開始和結束的空格

var str='  good   morning   you   ';
console.log($.trim(str));//輸出結果：good   morning   you