Zusammenfassung der praktischen jQuery-Funktion use_jquery

Dieser Artikel fasst die allgemeinen praktischen Funktionen von jQuery in Form von Beispielen zusammen. Teilen Sie es als Referenz mit allen. Konkrete Beispiele sind wie folgt:

1. Schnur zuschneiden

$('#id').val($.trim($('#someid').val()))

2. Durchsuchen Sie die Sammlung

könnte so geschrieben werden:

var anArray = ['one','two'];
for(var n = 0; n < anArray.length; n++){
  
}

Es ist auch möglich zu schreiben:

var anObject = {one: 1, two: 2};
for(var p in anObject){
  
}

Aber mit der Funktion $.each können Sie es so schreiben:

var anArray = ['one','two'];
$.each(anArray, funtion(n, value){
  
})
var anObject = {one: 1, two: 2};
$.each(anObjct, function(name,value){
  
})

3. Filterarray

Verwenden Sie die Methode $.grep(), um das Array zu filtern. Schauen wir uns zunächst die Definition der grep-Methode an:

grep: function(elems, callback, inv){
  var ret = [], retVal;
  inv = !!inv;
  for(var i = 0; length = elems.length; i < length; i++){
    retVal = !!callback(elems[i],i)
    if(inv !== retVal){
      ret.push(elems[i]);
    }
  }
  return ret;
}

Im obigen Beispiel:
① Der zweite Parameter der grep-Methode ist die Rückruffunktion. Die Rückruffunktion empfängt zwei Parameter, einen ist das Element des Arrays und der andere ist der Index des Arrays.
② Der dritte Parameter inv der grep-Methode ist standardmäßig undefiniert, daher ist !!inv falsch, dh der Standardwert von inv ist falsch

Beispiel 1: Array vom Typ int

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
})
console.log(arr);//结果是：4 5 6

Was wird das Ergebnis sein, wenn der dritte Parameter von grep explizit auf true gesetzt wird?

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
}, true)
console.log(arr);//结果是：1 2 3

Es ist ersichtlich, dass die Array-Elemente, die die Rückruffunktion nicht erfüllen, herausgefiltert werden, wenn der dritte Parameter der grep-Methode auf true gesetzt ist.

Beispiel 2: Objekttyp-Array

var arr = [
  {
    first: "Jeffrey",
    last: 'Way'
  },{
    first: 'Allison',
    last: 'Way'
  },{
    first: 'John',
    last: 'Doe'
  },{
    first: 'Thomas',
    last: 'Way'
  };
  arr = $.grep(arr, function(obj, index){
    return obj.last === 'Way';
  });
  console.log(arr);
];

4. Array konvertieren

Verwenden Sie $.map(arr, callback), um die Callback-Funktion für jedes Element des Arrays aufzurufen und ein neues Array zurückzugeben

Füge 1 zu jedem Element des Arrays hinzu:

var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})

Konvertieren Sie das String-Array in ein Integer-Array und bestimmen Sie, ob das Array-Element eine Zahl ist:

var strings = ['1', '2', '3','4','S','6'];
var values = $.map(strings, function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;
})

Fügen Sie das konvertierte Array mit dem ursprünglichen Array zusammen:

var chars = $.map(['this','that'], function(value){return value.split(' ')});

5. Gibt den Index des Array-Elements zurück

Verwenden Sie $.inArray(value, array), um den Index des ersten Vorkommens des übergebenen Werts, also den Index, zurückzugeben.

var index = $.inArray(2, [1, 2, 3]);

6. Konvertieren Sie das Objekt in ein Array

$.makeArray(object) konvertiert das übergebene Array-ähnliche Objekt in ein Javascript-Array.

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
  var elems = document.getElementsByTagName("div");
  var arr = jQuery.makeArray(elems);
  arr.reverse();
  $(arr).appendTo(document.body);
</script>

7. Holen Sie sich ein Array ohne doppelte Elemente

Verwenden Sie $.unique(array), um ein Array zurückzugeben, das aus eindeutigen Elementen im ursprünglichen Array besteht.

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
//把到所有div，get方法转换成javascript数组，总共6个div
var divs = $("div").get();
//再把3个class名为dup的div合并到前面的6个div
divs = divs.concat($(".dup").get());
alert(divs.length); //9个div
//过滤去掉重复
divs = jQuery.unqiue(divs);
alert(divs.length);//6个div

8. 2 Arrays zusammenführen

$.merge(array1, array2) führt das zweite Array mit dem ersten Array zusammen und gibt das erste Array zurück.

var a1 = [1, 2];
var a2 = [2, 3];
$.merge(a1, a2);
console.log(a1);//[1, 2, 2, 3]

9. Serialisieren Sie das Objekt in eine Abfragezeichenfolge

$.param(params) konvertiert das eingehende JQuery-Objekt oder Javascript-Objekt in String-Form.

$(document).ready(function(){
 personObj=new Object();
 personObj.firstname="John";
 personObj.lastname="Doe";
 personObj.age=50;
 personObj.eyecolor="blue"; 
 $("button").click(function(){
  $("div").text($.param(personObj));
 });
});

Ergebnis: Vorname=John&Nachname=Doe&Alter=50&Augenfarbe=blau

10. Einige Urteilsfunktionen

$.isArray(o) Wenn o ein Javascript-Array ist, wird „true“ zurückgegeben. Wenn es sich um ein Array-ähnliches JQuery-Objektarray handelt, wird „false“ zurückgegeben $.isEmptyObject(o) Gibt „true“ zurück, wenn o ein Javascript-Objekt ist, das keine Attribute enthält
$.isFunction(o) gibt true zurück, wenn o eine Javascript-Funktion ist
$.isPlainObject(o) Gibt „true“ zurück, wenn o ein Objekt ist, das durch {} oder new Object()
erstellt wurde $.isXMLDoc(node) Wenn der Knoten ein XML-Dokument oder ein Knoten in einem XML-Dokument ist, wird true
zurückgegeben

11. Bestimmen Sie, ob ein Element in einem anderen Element enthalten ist

Der zweite Parameter von $.contains(container, CONTAINEE) ist enthalten

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

12. Speichern Sie den Wert auf einem Element

$.data(element, key, value) Das erste ist das Javascript-Objekt und das zweite und dritte sind der Schlüsselwert.

//得到一个div的javascript对象
var div = $("div")[0];
//把键值存储到div上
jQuery.data(div, "test",{
  first: 16,
  last: 'pizza'
})
//根据键读出值
jQuery.data(div, "test").first
jQuey.data(div, "test").last

13. Entfernen Sie den auf einem Element gespeicherten Wert

<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
var div = $( "div" )[ 0 ];
//存储值
jQuery.data( div, "test1", "VALUE-1" );
//移除值
jQuery.removeData( div, "test1" );

14. Kontext der gebundenen Funktion

jQuery.proxy(function, context) gibt eine neue Funktion zurück, der Kontext ist context.

 $(document).ready(function(){
 var objPerson = {
  name: "John Doe",
  age: 32,
  test: function(){
   $("p").after("Name: " + this.name + "<br> Age: " + this.age);
  }
 };
 $("button").click($.proxy(objPerson,"test"));
});

Wenn Sie oben auf die Schaltfläche klicken, wird die Testmethode ausgeführt, der Kontext der Testmethode wird jedoch festgelegt.

15. JSON analysieren

jQuery.parseJSON(json) Der erste Parameter json ist vom Typ string.

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

16. Ausdrucksbewertung

Manchmal können Sie jQuery.globalEval(code) verwenden, wenn Sie möchten, dass ein Code im globalen Kontext ausgeführt wird. Der Codetyp ist String.

function test() {
 jQuery.globalEval( "var newVar = true;" )
}
test();

17. Dynamisches Ladeskript

$(selector).getScript(url,success(response,status)) wird zum dynamischen Laden von js-Dateien verwendet. Der erste Parameter ist der Dateipfad von js. Der zweite Parameter ist optional und stellt den Rückruf für den erfolgreichen Erhalt dar js-Datei.

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
 console.log( data ); // Data returned
 console.log( textStatus ); // Success
 console.log( jqxhr.status ); // 200
 console.log( "Load was performed." );
});

Ich glaube, dass das, was in diesem Artikel beschrieben wird, einen gewissen Referenzwert für die jQuery-Programmierung aller hat.