Résumé de la fonction pratique de jQuery usage_jquery

Cet article résume les fonctions pratiques courantes de jQuery sous forme d’exemples. Partagez-le avec tout le monde pour votre référence. Des exemples spécifiques sont les suivants :

1. Couper la ficelle

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

2. Parcourez la collection

pourrait s'écrire ainsi :

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

Il est également possible d'écrire :

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

Mais avec la fonction $.each, vous pouvez l'écrire comme ceci :

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

3. Tableau de filtres

Utilisez la méthode $.grep() pour filtrer le tableau. Regardons d'abord la définition de la méthode grep :

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

Dans l'exemple ci-dessus :
① Le deuxième paramètre de la méthode grep est la fonction de rappel. La fonction de rappel reçoit deux paramètres, l'un est l'élément du tableau et l'autre est l'index du tableau.
② Le troisième paramètre inv de la méthode grep n'est pas défini par défaut, donc !!inv est faux, c'est-à-dire que la valeur par défaut de inv est fausse

Exemple 1 : tableau de type int

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

Quel sera le résultat si le troisième paramètre de grep est explicitement défini sur true ?

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

On peut voir que lorsque le troisième paramètre de la méthode grep est défini sur true, les éléments du tableau qui ne répondent pas à la fonction de rappel seront filtrés.

Exemple 2 : tableau de type objet

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. Convertir le tableau

Utilisez $.map(arr, callback) pour appeler la fonction de rappel pour chaque élément du tableau et renvoyer un nouveau tableau

Ajoutez 1 à chaque élément du tableau :

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

Convertissez le tableau de chaînes en un tableau d'entiers et déterminez si l'élément du tableau est un nombre :

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

Fusionner le tableau converti dans le tableau d'origine :

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

5. Renvoie l'index de l'élément du tableau

Utilisez $.inArray(value, array) pour renvoyer l'indice de la première occurrence de la valeur transmise, c'est-à-dire l'index.

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

6. Convertir l'objet en tableau

$.makeArray(object) convertit l'objet de type tableau transmis en un tableau Javascript.

<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. Obtenez un tableau sans éléments en double

Utilisez $.unique(array) pour renvoyer un tableau composé d'éléments uniques dans le tableau d'origine.

<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. Fusionner 2 tableaux

$.merge(array1, array2) fusionne le deuxième tableau dans le premier tableau et renvoie le premier tableau.

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

9. Sérialisez l'objet dans une chaîne de requête

$.param(params) convertit l'objet jquery ou l'objet javascript entrant sous forme de chaîne.

$(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));
 });
});

Résultat : firstname=John&lastname=Doe&age=50&eyecolor=blue

10. Quelques fonctions de jugement

$.isArray(o) Si o est un tableau javascript, il renvoie true S'il s'agit d'un tableau d'objets jquery de type tableau, il renvoie false
. $.isEmptyObject(o) Renvoie vrai si o est un objet javascript qui ne contient pas d'attributs
$.isFunction(o) renvoie true si o est une fonction javascript
$.isPlainObject(o) Renvoie vrai si o est un objet créé via {} ou new Object()
$.isXMLDoc(node) Si le nœud est un document XML ou un nœud dans un document XML, il renvoie true

11. Déterminer si un élément est contenu dans un autre élément

Le deuxième paramètre de $.contains(container, containee) est contenu

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

12. Stocker la valeur sur un élément

$.data(element, key, value) Le premier est l'objet javascript, et les deuxième et troisième sont la valeur clé.

//得到一个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. Supprimer la valeur stockée sur un élément

<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. Contexte de la fonction liée

jQuery.proxy(function, context) renvoie une nouvelle fonction function, le contexte est contexte.

 $(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"));
});

Ci-dessus, lorsque vous cliquez sur le bouton, la méthode de test est exécutée, mais le contexte de la méthode de test est défini.

15. Analyser JSON

jQuery.parseJSON(json) Le premier paramètre json est de type string.

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

16. Évaluation des expressions

Parfois, si vous souhaitez qu'un morceau de code soit exécuté dans le contexte global, vous pouvez utiliser jQuery.globalEval(code). Le type de code est une chaîne.

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

17. Script de chargement dynamique

$(selector).getScript(url,success(response,status)) est utilisé pour charger dynamiquement les fichiers js. Le premier paramètre est le chemin du fichier js. Le deuxième paramètre est facultatif et représente le rappel pour obtenir avec succès le fichier js. js fichier.

$.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." );
});

Je crois que ce qui est décrit dans cet article a une certaine valeur de référence pour la programmation jQuery de chacun.