Explication détaillée de jQuery function_jquery
May 16, 2016 pm 04:16 PMDans 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 :
<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)
});
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
<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>")
});
$.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 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.
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
<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());
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.
$(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
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.
<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
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
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
$.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.
$.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

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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 supprimer l'attribut height d'un élément avec jQuery ?

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

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

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

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