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"));//52console.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);//52delete 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?1.1.11"></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元素

<span style="color: #000000;">get( [index ] ) index:Number 从0开始计数，用来确定获取哪个元素<br></span>

$( "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?1.1.11"></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?1.1.11"></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() 将只会查找

中的 '.bar'，而不是继续在
• 中进行查找，结果是将匹配到的元素的背景色变成绿色

   

  内容过滤

  　　jQuery选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()

  【has()】

  　　has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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?1.1.11"></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>

  
  

   

  以上是jQuery雜項方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！