Explication détaillée de jQuery function

Dans la programmation JavaScript, les développeurs doivent généralement écrire de nombreux petits programmes pour implémenter certaines fonctions spécifiques. Par exemple, la détection du navigateur, le traitement des chaînes, l'édition des tableaux, etc. jQuery résume ces programmes couramment utilisés et propose de nombreuses fonctions pratiques.

1. Détecter le navigateur.

jQuery obtient les informations du navigateur via l'objet $.browser.

Description de la propriété msie Si c'est ie, c'est vrai, sinon c'est faux mozilla est vrai s'il s'agit d'un navigateur lié à Mozilla, sinon faux safari Si c'est le navigateur Safari, c'est vrai, sinon c'est faux poera Si c'est Opera Browser, c'est vrai, sinon c'est faux version numéro de version du navigateur Lorsqu'elles sont utilisées, les développeurs peuvent appeler directement ces propriétés pour obtenir les propriétés du navigateur. Comme suit :

Copier le code Le code est le suivant : $(function() { fonction détecter() { Si ($.browser.msie) return "IE" ; Si ($.browser.mozilla) Renvoyez "Mozilla" ; Si ($.browser.safari) retourner "Safari" ; Si ($.browser.opera) Retourner "Opéra" ; } var sBrowser = détecter(); document.write("Votre navigateur est : " sBrowser " La version est : " $.browser. version) });

2. Modèle de boîte L'objet $.boxModel est fourni dans jQuery pour détecter le modèle de boîte actuellement suivi. C'est une valeur booléenne Lorsque c'est vrai, cela signifie suivre le modèle de boîte standard du w3c. Si c'est faux, c'est le modèle de boîte ie

. var sBox = $.boxModel ? "Standard W3C" : "IE";

Document.write("Votre page prend actuellement en charge :" sBox "Modèle de boîte"); 3. Traitez les objets javascript.

En programmation JavaScript, on peut dire que toutes les variables sont des objets, tels que des chaînes, des dates et des valeurs.

jQuery fournit des méthodes d'édition pour traiter les objets associés, telles que la fonction $.trim() (suppression des espaces de début et de fin) en fait partie

i. Utilisez la méthode $each() pour parcourir

La méthode each() a été introduite précédemment, et est utilisée pour parcourir les éléments dans les sélecteurs. De même, pour les tableaux et les objets JavaScript, vous pouvez utiliser la méthode $.each() pour parcourir.

$.each(objet,fn);

Parmi eux, object est l'objet qui doit être parcouru et fn est la fonction exécutée par chaque élément de l'objet. La fonction fn peut accepter deux paramètres. Le premier paramètre est le numéro de série de l'élément du tableau ou l'attribut de l'objet. . Le deuxième paramètre est la valeur de l'élément ou de l'attribut. Exemple : utilisez la fonction $.each() pour parcourir des tableaux et des objets

Copier le code Le code est le suivant : var aArray = ["un", "deux", "trois", "quatre", "cinq"]; $.each(aArray, function(iNum, valeur) { // tableau de prélèvement document.write("numéro de série" iNum "valeur" valeur " "); }); var oObj = { un : 1, deux : 2, trois : 3, quatre : 4, cinq : 5 }; $.each(oObj, function(pro, valeur) { document.write("property" pro "value" value " ") });

Comme vous pouvez le voir dans l'exemple ci-dessus, $.each() est très pratique pour parcourir des tableaux et des objets. Par exemple, pour les attributs inconnus $.browser, utilisez $.each pour parcourir . $.each($.navigateur, fonction(iNum, valeur) {

// tableau de prélèvement document.write("propriété" iNum "valeur" valeur " "); }); Valeur :

Valeur chrome de l'attribut true

Valeur de version de l'attribut 39.0.2171.99 Valeur du kit Web d'attribut true ii. Filtrer les données

Pour les données du tableau, les développeurs doivent souvent les filtrer. Si du JavaScript pur est utilisé, une boucle for est souvent nécessaire pour les vérifier une par une. jQuery fournit la méthode $.grep(). Peut facilement filtrer les données du tableau.

La syntaxe est la suivante :

$.grep(Array,fn,[invert])

Parmi eux, array est le nom de l'objet tableau qui doit être filtré, et fn est la fonction de filtre pour chaque objet du tableau, s'il renvoie vrai, il sera conservé, sinon il sera supprimé. L'inversion facultative est une valeur booléenne Si elle est définie sur true, la fonction fn est inversée et celles qui remplissent les conditions sont supprimées.

Copier le code Le code est le suivant : var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5]; var aResult = $.grep(aArray, function(value) { valeur de retour >= 4; }); document.write(aResult.join());

Définissez d'abord le tableau aArray, puis utilisez la méthode $.grep() pour sélectionner la valeur supérieure ou égale à 4 pour obtenir un nouveau tableau Exemple 2, méthode avancée de filtrage des tableaux.

Copier le code Le code est le suivant : var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5]; var aResult = $.grep(aArray, function(value, index) { //La valeur, la valeur et le numéro d'ordre de l'élément sont jugés simultanément retour (valeur >= 4 && index > 3); }); document.write(aResult.join());

iii tableau de conversion

Souvent, les développeurs espèrent que les éléments d'un tableau pourront être transformés uniformément, par exemple en multipliant tous les éléments par 2. Bien que cela puisse être réalisé en javascript, comme une boucle for, jQuery fournit une méthode $.map () plus pratique. . Cette méthode est la suivante

$.map(array,fn) Parmi eux, array est le tableau à convertir et fn est la fonction de conversion, qui est exécutée pour chaque élément du tableau. Cette fonction peut également accepter deux fonctions, et un paramètre est la valeur de l'élément. Les deux paramètres sont les numéros de série des éléments et sont des paramètres facultatifs.

Copier le code Le code est le suivant : $(function() { var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"]; $("p:eq(0)").text(aArray.join()); aArray = $.map(aArray, function(value, index) { //Convertissez le tableau en majuscule et ajoutez le numéro de série return (index value.toUpperCase()); }); $("p:eq(1)").text(aArray.join()); cArray = $.map(aArray, fonction(valeur) { valeur de retour ; }); $("p:eq(2)").text(cArray.join()); });

Résultats d'exécution

a,b,c,d,e,f,g,h,i

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8 Après avoir utilisé la fonction $.map() pour transférer, la longueur du tableau n'est pas nécessairement la même que celle du tableau d'origine. Les éléments d'un tableau peuvent être supprimés en définissant null.

Copier le code

Le code est le suivant : $(function() { var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8]; $("p:eq(0)").text(aArray.join()); $("p:eq(1)").text("aArray length: " aArray.length " valeur: " aArray.join()); cArray =$.map(aArray,function(value){ //Retour après 1 qui est supérieur à 1, sinon supprimez-le en le définissant sur null Valeur de retour>1?valeur 1:null; }); $("p:eq(2)").text("cArray length: " cArray.length " valeur: " cArray.join()); });

En plus de supprimer des éléments, $.map peut également ajouter des éléments de tableau lors de la conversion d'un tableau.

Copier le code

Le code est le suivant : $(function() { var aArray = ["un", "deux", "trois", "quatre", "cinq"]; $("p:eq(0)").text(aArray.join()); cArray =$.map(aArray,function(value){ return value.split(""); }); $("p:eq(1)").text("cArray length: " cArray.length " valeur: " cArray.join()); });

Résultats d'exécution

un, deux, trois, quatre, cinq

Longueur du cArray : 19 valeurs : o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e Pendant le processus de conversion $.map du code ci-dessus, la méthode split("") divise les éléments en lettres iiii Rechercher des éléments du tableau

Pour les chaînes, vous pouvez utiliser indexOf() pour rechercher la position d'un caractère spécifique. Pour les éléments du tableau, JavaScript ne fournit pas de méthode similaire. Dans jQ, la fonction $.inArray() peut fournir une bonne fonction de recherche pour les éléments du tableau. La syntaxe est la suivante :

$.inArray(valeur, tableau) Parmi eux, value est l'objet que vous souhaitez rechercher et array est le tableau lui-même. S'il est trouvé, la position du premier élément correspondant dans le tableau est renvoyée. Sinon, retournez -1.

Copier le code

Le code est le suivant :

$(function() { var aArray = ["un", "deux", "trois", "quatre", "cinq"]; var cx1 = $.inArray("two", aArray); var cx2 = $.inArray("www", aArray); $("p:eq(0)").text(cx1); $("p:eq(1)").text(cx2); });

4. Obtenez le code externe Dans certains projets plus importants, les développeurs placent différents js dans différents fichiers js et chargent parfois différents codes en fonction des exigences de subvention. jQuery fournit $.getScript() pour implémenter le chargement de code externe. Comment utiliser :

$.getScript(url,[callback]) Parmi eux, l'url est l'adresse d'une ressource externe, qui peut être une adresse relative ou absolue. callback est la fonction de rappel après un chargement réussi, facultatif.

Copier le code Le code est le suivant : $(function() { $("p:eq(0)").click(function() { $.getScript("1.js"); }); $("p:eq(1)").click(function() { textfun(); }); }); Cliquez sur 1

& Lt; p & gt; cliquez sur 2 & lt;/p & gt;

Le code 1.js est

Copier le code

Le code est le suivant : alert("Chargement ok!") fonction textfun(){ alert("testfun") };

Explication détaillée de jQuery function_jquery