Verschiedene jQuery-Methoden

Die vorherigen Wörter

Verschiedene Methoden sind eigentlich Tool-Methoden, aber da es sich nicht um im jQuery-Konstruktor definierte Methoden handelt, können sie nicht als Tool-Methoden bezeichnet werden. In diesem Artikel werden die verschiedenen Methoden in jQuery ausführlich vorgestellt

Datenoperationen

[data()]

Diese Methode wird zum Speichern beliebiger Daten verwendet Zugehörige Daten oder gibt den in den Daten des angegebenen Namens gespeicherten Wert zurück, der mit dem ersten Element im Satz von Elementen übereinstimmt

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)}

Bei Verwendung natives Javascript, äquivalent zu

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

【removeData()】

　Die Methode „removeData()“ ermöglicht das Entfernen des mit .data() gebundenen Werts. Beim Aufruf mit dem Namensargument entfernt .removeData() diesen eindeutigen Wert. Beim Aufruf ohne Argumente werden alle Werte entfernt. Der interne .data()-Cache von jQuery wirkt sich nicht auf HTML5-Datenattribute im Dokument aus. Diese Attribute können mit .removeAttr() entfernt werden.

Bei Verwendung von .removeData("name"), wenn Ohne dieses Attribut Wenn Sie den Namen im internen Datencache speichern, versucht jQuery, ein Datenattribut für das Element zu finden. Um eine wiederholte Abfrage des Datenattributs zu vermeiden, setzen Sie den Namen entweder auf null oder undefiniert (z. B. .data("name", undefiniert)), anstatt .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"}

Wenn Sie natives Javascript verwenden, entspricht dies

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

Warteschlangenbetrieb

【 queue()】

Zeigt oder bedient die Funktionswarteschlange, die für das übereinstimmende Element ausgeführt wurde

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 ( )】

Alle nicht ausgeführten Elemente aus der Warteschlange entfernen

clearQueue( [queueName ] )

Operation festlegen

[each( )】

Durchlaufen Sie ein jQuery-Objekt und führen Sie eine Funktion für jedes passende Element aus

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

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

[add()]

Die Methode add() fügt Elemente zur Sammlung übereinstimmender Elemente hinzu. Das Argument der add()-Methode kann fast jedes $() akzeptieren, einschließlich eines jQuery-Selektorausdrucks, eines DOM-Elements oder einer HTML-Fragmentreferenz

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()]

Holen Sie sich das entsprechende DOM-Element, indem Sie das passende jQuery-Objekt abrufen

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

$( "li" ).get( 0 )

[index()]

Suchen Sie nach dem Indexwert eines bestimmten Elements aus den übereinstimmenden Elementen, beginnend bei 0

index( [selector或element] )

Wenn Sie der Methode .index() keine Parameter übergeben, ist der Rückgabewert die Position des ersten Elements im jQuery-Objekt relativ zu seinen Geschwisterelementen

Wenn in einer Gruppe .index() für ein Element aufgerufen wird und der Parameter ein DOM-Element oder ein jQuery-Objekt ist, ist der Rückgabewert von .index() die Position des übergebenen Elements relativ zur ursprünglichen Sammlung.

Wenn der Parameter ein Selektor ist, ist der Rückgabewert von .index() die Position des ursprünglichen Elements relativ zu dem Element, mit dem der Selektor übereinstimmt. Wenn kein passendes Element gefunden wird, gibt .index() -1 zurück

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

[toArray()]

Gibt eine Sammlung von jQuery-Objekten zurück, Array aller DOM Elemente

toArray() 这个方法不接受任何参数

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

Indexfilterung

Der Indexselektor ist der jQuery-Filterauswahlteil des Geräts. Gleichzeitig gibt es auch indexbezogene Methoden mit ähnlichen Funktionen, darunter eq(), first(), last()

[eq()]

Die eq()-Methode stimmt mit Elementen überein. Welches Element der Sammlung sich am angegebenen Index befindet. Die Methode eq() kann eine Ganzzahl als Parameter akzeptieren, mit 0 als Basis. Wenn die Ganzzahl eine negative Zahl ist, zählen Sie ab dem letzten Element in der Menge

<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()]

Die Methode first() ruft das erste Element im passenden Elementsatz ab. Diese Methode akzeptiert keine Parameter

【last()】

Die Methode last() ruft das letzte Element im ab passender Elementsatz. Die Methode akzeptiert keine Parameter

<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()]

Beenden Sie die letzte Filterung Operation in der aktuellen Kette und Rückgabe des vorherigen Status des übereinstimmenden Elements

end() 这个方法不接受任何参数

Die end()-Methode wird hauptsächlich in den verketteten Attributen von jQuery verwendet. Wenn keine Verkettung verwendet wird, rufen wir normalerweise nur das vorherige Objekt im Variablennamen auf, sodass wir den Stapel nicht manipulieren müssen. Bei Verwendung von end() können wir alle erforderlichen Methoden auf einmal aufrufen

$('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>

  
  

   

Das obige ist der detaillierte Inhalt vonVerschiedene jQuery-Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!