淺談jQuery中的工具方法

莊國琳發表於2018-09-11
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

相關文章