Maison interface Web js tutoriel Explication détaillée de jQuery function_jquery

Explication détaillée de jQuery function_jquery

May 16, 2016 pm 04:16 PM
jquery

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 :

          <script type="text/javascript">
                $(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 "<br> 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 :

<script type="text/javascript">
          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 "<br>");
            });
            var oObj = {
un : 1,
                  deux : 2,
trois : 3,
               quatre : 4,
               cinq : 5
            };
                $.each(oObj, function(pro, valeur) {
                                                                                                                                         document.write("property" pro "value" value "<br>")
            });
                                                                                     

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


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 :

<script type="text/javascript">
            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 :
<script type="text/javascript">
                $(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 :

<script type="text/javascript">
                $(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 : <script type="text/javascript">                 $(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 :


<script type="text/javascript">
                $(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 : <script type="text/javascript">
                $(function() {
                        $("p:eq(0)").click(function() {
                           $.getScript("1.js");
                });
                     $("p:eq(1)").click(function() {
                        textfun();
                });
            });
                                                                                                                                                                                                                                                                                     <p>Cliquez sur 1</p>
& 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")
};


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Feb 27, 2024 pm 06:45 PM

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide

Comment utiliser la méthode de requête PUT dans jQuery ? Comment utiliser la méthode de requête PUT dans jQuery ? Feb 28, 2024 pm 03:12 PM

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ? Comment supprimer l'attribut height d'un élément avec jQuery ? Feb 28, 2024 am 08:39 AM

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Analyse approfondie : les avantages et les inconvénients de jQuery Analyse approfondie : les avantages et les inconvénients de jQuery Feb 27, 2024 pm 05:18 PM

Analyse approfondie : les avantages et les inconvénients de jQuery

Utilisez jQuery pour modifier le contenu textuel de toutes les balises Utilisez jQuery pour modifier le contenu textuel de toutes les balises Feb 28, 2024 pm 05:42 PM

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Comprendre le rôle et les scénarios d'application de eq dans jQuery Comprendre le rôle et les scénarios d'application de eq dans jQuery Feb 28, 2024 pm 01:15 PM

Comprendre le rôle et les scénarios d'application de eq dans jQuery

Comment savoir si un élément jQuery possède un attribut spécifique ? Comment savoir si un élément jQuery possède un attribut spécifique ? Feb 29, 2024 am 09:03 AM

Comment savoir si un élément jQuery possède un attribut spécifique ?

See all articles