Résumé de quelques méthodes courantes fournies avec jQuery_jquery

Méthode elle-même ($.each,$.map,$.contains,$ajax)

Outils et méthodes communs

(1)$.trim

La méthode $.trim est utilisée pour supprimer les espaces en excès au début et à la fin de la chaîne.

Copier le code Le code est le suivant :

$.trim(' Bonjour ') // Bonjour

(2)$.contient

La méthode $.contains renvoie une valeur booléenne indiquant si un élément DOM (deuxième paramètre) est un élément subordonné d'un autre élément DOM (premier paramètre).

Copier le code Le code est le suivant :

$.contains(document.documentElement, document.body);
// vrai
$.contains(document.body, document.documentElement);
// faux

(3) $.each, $.map

La méthode $.each est utilisée pour parcourir des tableaux et des objets, puis renvoyer l'objet d'origine. Il accepte deux paramètres, qui sont la collecte de données et la fonction de rappel.

Copier le code Le code est le suivant :

$.each([ 52, 97 ], fonction( index, valeur ) {
console.log( index ": " valeur );
});
// 0 : 52
// 1 : 97
var obj = {
p1 : "bonjour",
p2 : "monde"
};
$.each( obj, fonction( clé, valeur ) {
console.log( key ": " valeur );
});
// p1 : bonjour
// p2 : monde

Il convient de noter que les instances d'objets jQuery ont également une méthode each ($.fn.each) et que les deux ont des fonctions similaires.

La méthode $.map est également utilisée pour parcourir des tableaux et des objets, mais elle renverra un nouvel objet.

Copier le code Le code est le suivant :

var a = ["a", "b", "c", "d", "e"];
une = $.map(une, fonction (n, je){
return (n.toUpperCase() i);
});
// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

La méthode $.inArray renvoie la position d'une valeur dans le tableau (en commençant à 0). Si la valeur ne figure pas dans le tableau, -1 est renvoyé.

Copier le code Le code est le suivant :

var une = [1,2,3,4];
$.inArray(4,a) // 3

(5)$.extend

La méthode $.extend est utilisée pour fusionner plusieurs objets dans le premier objet.

Copier le code Le code est le suivant :

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"

Une autre utilisation de $.extend consiste à générer un nouvel objet pour hériter de l'objet d'origine. A ce stade, son premier paramètre doit être un objet vide.

Copier le code Le code est le suivant :

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
var o = $.extend({},o1,o2);
o
// Objet {p1 : "c", p2 : "b">

Par défaut, l'objet généré par la méthode extend est une « copie superficielle », c'est-à-dire que si une propriété est un objet ou un tableau, seul un pointeur vers l'objet ou le tableau sera généré et la valeur ne sera pas copiée. Si vous souhaitez une "copie complète", vous pouvez passer la valeur booléenne true dans le premier paramètre de la méthode extend.

Copier le code Le code est le suivant :

var o1 = {p1:['a','b']};
var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);
o1.p1[0]='c';
o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"]

Dans le code ci-dessus, o2 est une copie superficielle et o3 est une copie profonde. Par conséquent, si les propriétés du tableau d'origine sont modifiées, o2 changera avec lui, mais pas o3.

(6)$.proxy

La méthode $.proxy est similaire à la méthode bind d'ECMAScript 5. Elle peut lier le contexte de la fonction (c'est-à-dire cet objet) et les paramètres et renvoyer une nouvelle fonction.

L'utilisation principale de jQuery.proxy() est de lier des objets contextuels à des fonctions de rappel.

Copier le code Le code est le suivant :

var o = {
Tapez : "objet",
Test : fonction(événement) {
console.log(this.type);
>
};
$("#bouton")
.on("click", o.test) // Aucune sortie
.on("click", $.proxy(o.test, o)) // objet

Dans le code ci-dessus, la première fonction de rappel ne lie pas le contexte, donc le résultat est vide et il n'y a pas de sortie ; la deuxième fonction de rappel lie le contexte à l'objet o, et le résultat est objet.

Une autre façon équivalente d'écrire cet exemple est :

Copier le code Le code est le suivant :

$("#button").on( "clic", $.proxy(o, test))

Le $.proxy(o, test) dans le code ci-dessus signifie lier la méthode test de o à o.

Cet exemple montre qu'il existe deux manières principales d'écrire la méthode proxy.

Copier le code Le code est le suivant :

jQuery.proxy(fonction, contexte)
// ou
jQuery.proxy(contexte, nom)

La première façon d'écrire consiste à spécifier l'objet contextuel (contexte) pour la fonction (fonction), et la deuxième façon d'écrire consiste à spécifier l'objet contextuel (contexte) et l'un de ses noms de méthode (nom).

Regardez un autre exemple. Dans des circonstances normales, l'objet this dans le code suivant pointe vers l'objet DOM où se produit l'événement click.

Copier le code Le code est le suivant :

$('#myElement').click(function() {
$(this).addClass('aNewClass');
});

Si nous voulons que la fonction de rappel s'exécute de manière retardée et utilise la méthode setTimeout, le code fonctionnera mal, car setTimeout provoque l'exécution de la fonction de rappel dans l'environnement global, ce qui pointera vers l'objet global.

Copier le code Le code est le suivant :

$('#myElement').click(function() {
setTimeout(fonction() {
​​​​ $(this).addClass('aNewClass');
}, 1000);
});

Ceci dans le code ci-dessus pointera vers la fenêtre de l'objet global, provoquant une erreur.

À ce stade, vous pouvez utiliser la méthode proxy pour lier cet objet à l'objet myElement.

Copier le code Le code est le suivant :

$('#myElement').click(function() {
setTimeout($.proxy(function() {
          $(this).addClass('aNewClass');
}, ceci), 1000);
});

(7)$.data, $.removeData

La méthode

$.data peut être utilisée pour stocker des données sur les nœuds DOM.

Copier le code Le code est le suivant :

//Enregistrer les données
$.data(document.body, "foo", 52 );
//Lire les données
$.data(document.body, "foo");
// Lire toutes les données
$.data(document.body);

Le code ci-dessus stocke une paire clé-valeur sur le corps de l'élément de la page Web, avec le nom de clé "foo" et la valeur de clé 52.

La méthode $.removeData est utilisée pour supprimer les données stockées dans la méthode $.data.

Copier le code Le code est le suivant :

$.data(div, "test1", "VALUE-1");
$.removeData(div, "test1");

(8)$.parseHTML, $.parseJSON, $.parseXML

La méthode $.parseHTML est utilisée pour analyser des chaînes dans des objets DOM.

La méthode $.parseJSON est utilisée pour analyser une chaîne JSON dans un objet JavaScript, similaire au JSON.parse() natif. Cependant, jQuery ne fournit pas de méthode similaire à JSON.stringify(), c'est-à-dire qu'il ne fournit pas de méthode pour convertir des objets JavaScript en objets JSON.

La méthode $.parseXML est utilisée pour analyser une chaîne dans un objet XML.

Copier le code Le code est le suivant :

var html = $.parseHTML("bonjour, je m'appelle jQuery.");
var obj = $.parseJSON('{"name": "John"}');
var xml = "";
var xmlDoc = $.parseXML(xml);

(9)$.makeArray

La méthode $.makeArray convertit un objet de type tableau en un véritable tableau.

Copier le code Le code est le suivant :

var a = $.makeArray(document.getElementsByTagName("div"));
(10)$.merge

La méthode $.merge est utilisée pour fusionner un tableau (deuxième paramètre) dans un autre tableau (premier paramètre).

Copier le code Le code est le suivant :

var a1 = [0,1,2];
var a2 = [2,3,4];
$.merge(a1, a2);
a1
// [0, 1, 2, 2, 3, 4]
(11)$.maintenant

La méthode $.now renvoie le nombre de millisecondes correspondant à l'heure actuelle à partir de 00:00:00 UTC le 1er janvier 1970, ce qui équivaut à (new Date).getTime().

Copier le code Le code est le suivant :

$.maintenant()
// 1388212221489

Méthodes pour déterminer le type de données

jQuery fournit une série de méthodes d'outils pour déterminer les types de données afin de compenser les lacunes de l'opérateur typeof natif de JavaScript. La méthode suivante évalue les paramètres et renvoie une valeur booléenne.

jQuery.isArray() : s'il s'agit d'un tableau.
jQuery.isEmptyObject() : s'il s'agit d'un objet vide (ne contient pas de propriétés énumérables).
jQuery.isFunction() : s'il s'agit d'une fonction.
jQuery.isNumeric() : s'il s'agit d'un tableau.
jQuery.isPlainObject() : Qu'il s'agisse d'un objet généré à l'aide de "{}" ou de "new Object" au lieu d'un objet fourni nativement par le navigateur.
jQuery.isWindow() : s'il s'agit d'un objet fenêtre.
jQuery.isXMLDoc() : détermine si un nœud DOM se trouve dans un document XML.
Voici quelques exemples.

Copier le code Le code est le suivant :

$.isEmptyObject({}) // vrai
$.isPlainObject(document.location) // faux
$.isWindow(fenêtre) // vrai
$.isXMLDoc(document.body) // faux

En plus des méthodes ci-dessus, il existe également une méthode $.type qui peut renvoyer le type de données d'une variable. Son essence est d'utiliser la méthode Object.prototype.toString pour lire l'attribut [[Class]] à l'intérieur de l'objet (voir la section Objet de la "Bibliothèque standard").

Copier le code Le code est le suivant :

$.type(/test/) // "expression rationnelle"

Opération Ajax

$.ajax

L'objet jQuery définit également une méthode Ajax ($.ajax()) pour gérer les opérations Ajax. Après avoir appelé cette méthode, le navigateur enverra une requête HTTP au serveur.

$.ajax() peut être utilisé de plusieurs manières, la plus courante étant de fournir un paramètre d'objet.

Copier le code Le code est le suivant :

$.ajax({
asynchrone : vrai,
URL : '/url/vers/json',
Tapez : 'OBTENIR',
données : { identifiant : 123 },
Type de données : 'json',
délai d'attente : 30000,
succès : successCallback,
erreur : errorCallback,
complet : completCallback
})
fonction successCallback(json) {
$('

').text(json.title).appendTo('body');
>
fonction errorCallback (xhr, statut) {
console.log('Quelque chose s'est mal passé !');
>
fonction completeCallback(xhr, statut){
console.log('La requête Ajax est terminée.');
>

Le paramètre objet du code ci-dessus a plusieurs attributs, les significations sont les suivantes :

async : cet élément est par défaut true. S'il est défini sur false, cela signifie qu'une requête synchrone est émise.
cache : cet élément a la valeur par défaut true. S'il est défini sur false, le navigateur ne mettra pas en cache les données renvoyées par le serveur. Notez que le navigateur lui-même ne mettra pas en cache les données renvoyées par la requête POST, donc même s'il est défini sur false, il ne sera efficace que pour les requêtes HEAD et GET.
url : URL côté serveur. C'est le seul attribut obligatoire, d'autres attributs peuvent être omis.
type : verbe HTTP utilisé pour envoyer des informations au serveur. La valeur par défaut est GET. Les autres verbes incluent POST, PUT et DELETE.
dataType : le type de données demandé au serveur, qui peut être défini sur texte, html, script, json, jsonp et xml.
data : Données envoyées au serveur Si la méthode GET est utilisée, cet élément sera converti en chaîne de requête et ajouté à la fin de l'URL.
success : fonction de rappel lorsque la requête est réussie. Les paramètres de la fonction sont les données renvoyées par le serveur, les informations d'état et l'objet d'origine qui a émis la requête.
timeout : nombre maximum de millisecondes à attendre. Si la demande n'est pas revenue après ce délai, le statut de la demande sera automatiquement modifié en échec.
erreur : fonction de rappel lorsque la demande échoue. Les paramètres de la fonction sont l'objet d'origine qui a émis la demande et les informations d'état renvoyées.
complete : une fonction de rappel qui sera exécutée indépendamment du succès ou de l'échec de la demande. Les paramètres de la fonction sont l'objet d'origine qui a émis la demande et les informations d'état renvoyées.
Parmi ces paramètres, l'url peut être indépendante et utilisée comme premier paramètre de la méthode ajax. En d’autres termes, le code ci-dessus peut également s’écrire comme suit.

Copier le code Le code est le suivant :

$.ajax('/url/to/json',{
Tapez : 'OBTENIR',
Type de données : 'json',
succès : successCallback,
erreur : errorCallback
})

Méthode d'écriture simple

Il existe également des moyens simples d'écrire la méthode ajax.

$.get() : Faites une requête GET.
$.getScript() : lit un fichier de script JavaScript et exécutez-le.
$.getJSON() : émettez une requête GET pour lire un fichier JSON.
$.post() : Effectuez une requête POST.
$.fn.load() : lit un fichier html et le place dans l'élément actuel.
De manière générale, ces méthodes pratiques acceptent trois paramètres dans l'ordre : l'URL, les données et la fonction de rappel en cas de succès.

(1)$.get(), $.post()

Ces deux méthodes correspondent respectivement à la méthode GET et à la méthode POST de HTTP.

Copier le code Le code est le suivant :

$.get('/data/people.html', fonction(html){
$('#target').html(html);
});
$.post('/data/save', {nom : 'Rebecca'}, fonction (resp){
console.log(JSON.parse(resp));
});

La méthode get accepte deux paramètres, à savoir l'URL côté serveur et la fonction de rappel une fois la requête réussie. La méthode post a un autre paramètre entre ces deux paramètres, qui représente les données envoyées au serveur.

La méthode d'écriture ajax correspondant à la méthode de publication ci-dessus est la suivante.

Copier le code Le code est le suivant :

$.ajax({
Tapez : 'POST',
URL : '/data/save',
Données : {nom : 'Rebecca'},
Type de données : 'json',
Succès : fonction (resp){
console.log(JSON.parse(resp));
>
});

(2)$.getJSON()

Une autre façon simple d'écrire la méthode ajax est la méthode getJSON. Lorsque le serveur renvoie des données au format JSON, cette méthode peut être utilisée à la place de la méthode $.ajax.

Copier le code Le code est le suivant :

$.getJSON('url/to/json', {'a': 1}, function(data){
console.log(données);
});

Le code ci-dessus est équivalent à l'écriture suivante.

Copier le code Le code est le suivant :

$.ajax({
Type de données : "json",
URL : '/url/vers/données',
données : {'a' : 1},
Succès : fonction(données){
console.log(données);
>
});

(3)$.getScript()

La méthode $.getScript est utilisée pour charger un fichier de script côté serveur.

Copier le code Le code est le suivant :

$.getScript('/static/js/myScript.js', function() {
FunctionFromMyScript();
});

Le code ci-dessus charge d'abord le script myScript.js à partir du serveur, puis exécute la fonction fournie par le script dans la fonction de rappel.

La fonction de rappel de getScript accepte trois paramètres, qui sont le contenu du fichier de script, les informations d'état de la réponse HTTP et l'instance d'objet ajax.

Copier le code Le code est le suivant :

$.getScript( "ajax/test.js", fonction (data, textStatus, jqxhr){
console.log( data ); // Contenu de test.js
console.log( textStatus ); // Succès
console.log( jqxhr.status ); // 200
});

getScript est un moyen simple d'écrire la méthode ajax, il renvoie donc un objet différé et vous pouvez utiliser l'interface différée.

Copier le code Le code est le suivant :

jQuery.getScript("/path/to/myscript.js")
.done(function() {
               // ...
})
.fail(function() {
               // ...
});

(4)$.fn.load()

$.fn.load n'est pas une méthode outil de jQuery, mais une méthode définie sur l'instance d'objet jQuery, qui est utilisée pour obtenir le fichier HTML côté serveur et le placer dans l'élément actuel. Étant donné que cette méthode appartient également au fonctionnement ajax, elle sera discutée ici ensemble.

Copier le code Le code est le suivant :

$('#newContent').load('/foo.html');

La méthode $.fn.load peut également spécifier un sélecteur, placer la partie du fichier distant qui correspond au sélecteur dans l'élément actuel et spécifier une fonction de rappel une fois l'opération terminée.

Copier le code Le code est le suivant :

$('#newContent').load('/foo.html #myDiv h1:first',
Fonction(html) {
console.log('Contenu mis à jour !');
});

Le code ci-dessus charge uniquement la partie de foo.html qui correspond à "#myDiv h1:first". Une fois le chargement terminé, la fonction de rappel spécifiée sera exécutée.

Événement Ajax

jQuery fournit les méthodes suivantes pour spécifier des fonctions de rappel pour des événements AJAX spécifiques.

.ajaxComplete() : La requête ajax est terminée.
.ajaxError() : erreur de requête Ajax.
.ajaxSend() : avant l'émission de la requête ajax.
.ajaxStart() : la première requête ajax commence à être émise, c'est-à-dire qu'il n'y a pas encore de requête ajax à terminer.
.ajaxStop() : une fois que toutes les requêtes ajax sont terminées.
.ajaxSuccess() : une fois la requête ajax réussie.
Vous trouverez ci-dessous des exemples.

Copier le code Le code est le suivant :

$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});

Valeur de retour

La méthode ajax renvoie un objet différé, et vous pouvez utiliser la méthode then pour spécifier une fonction de rappel pour l'objet (voir la section "Objet différé" pour une explication détaillée).

Copier le code Le code est le suivant :

$.ajax({
URL : '/data/people.json',
Type de données : 'json'
}).then(function (resp){
console.log(resp.people);
})

JSONP

En raison de la « même restriction de domaine » dans le navigateur, la méthode ajax ne peut effectuer des requêtes HTTP qu'au nom de domaine de la page Web actuelle. Cependant, en insérant un élément de script (

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript