Maison > interface Web > js tutoriel > Fonctions de l'outil jQuery

Fonctions de l'outil jQuery

巴扎黑
Libérer: 2017-07-08 13:08:11
original
961 Les gens l'ont consulté

jquery nous fournit des fonctions d'outils pour faire fonctionner des tableaux et des objets, ce qui facilite et simplifie nos opérations sur eux. Aujourd'hui, nous allons passer en revue les fonctions de l'outil jQuery.

jQuery nous propose 5 principaux types de fonctions d'outils :

  • URL

  • StringOpérations

  • Opérations sur les tableaux et les objets

  • Opérations de test

  • Navigateur

1 : Opération d'URL :

$.param(obj)

Retour : string

Description : L'objet jquery ; est sérialisé en paramètres d'URL en fonction du nom/valeur ou de la clé/valeur et connecté avec &.

Exemple :

var obj ={name:zh,age:20};
alert(jQuery.param(obj)); =20";

2 : Opération de chaîne :

jQuery.trim(str)

Retour : chaîne ;

Description : Supprimez les espaces de début et de fin de la chaîne.

Exemple :


alert($.trim(" 123 "));

//alert "123";

3 : Tableaux et objets Opération :

(1):

&.each(obj,callback)

Description :

Méthode générale d'itération, qui peut être utilisée pour itérer les objets et le tableau.

Contrairement à la méthode $().each() qui parcourt les objets jQuery, cette méthode peut être utilisée pour parcourir n'importe quel objet.

La fonction de rappel a deux paramètres : le premier est le membre de l'objet ou l'index du tableau, et le second est la variable ou le contenu correspondant.

Si vous devez quitter chaque boucle, vous pouvez faire en sorte que la fonction de rappel renvoie false et les autres valeurs de retour seront ignorées.

Exemple :

var a =[0,1,2,3,4,5];

$.each(a,function(i,n){document.write (""+i+" et " +n +"
");});

//résultat :

/*0 et 0

1 et 1
2 et 2
3 et 3
4 et 4
5 et 5I*/

(2):

$.extend(obj,default,option)
Remarque :

Cette fonction est le plus couramment utilisée lors du développement de plug-ins pour gérer les options.

Ci-dessous, le code du plug-in Fancybox pour obtenir les options :

settings = $.extend({}, $.fn.fancybox.defaults, settings);
Copier après la connexion
La cible du code ci-dessus est un objet vide, et les paramètres par défaut sont utilisés comme premier objet, et les paramètres transmis par l'utilisateur sont fusionnés dans les paramètres par défaut et certains attributs sont soumis au paramètre. Pour les attributs non transmis dans le paramètre, la valeur par défaut est ensuite copiée vers la cible et renvoyée comme valeur de retour de la fonction. 🎜>

Voir un exemple complet :

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
Copier après la connexion
/*result:
Copier après la connexion
//Le paramètre cible doit passer un objet vide car la valeur de la cible sera éventuellement modifiée. Par exemple :
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }*/
Copier après la connexion

Le code ci-dessus utilise les valeurs par défaut comme paramètres cibles, bien que les résultats des paramètres finaux soient les mêmes, la valeur des
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(defaults, options);
Copier après la connexion
valeurs par défaut a été modifiée dans le plug-! in devrait être corrigé !

Veuillez donc faire attention à l'utilisation du paramètre cible lorsque vous l'utilisez (3) : Filtre

jQuery.grep( array, callback. , [inverser] )

Valeur de retour : Tableau

Instructions :

Utilisez la fonction de filtre pour filtrer éléments du tableau.

Cette fonction passe au moins deux paramètres : le tableau à filtrer et la fonction de filtre. La fonction de filtre doit renvoyer true pour conserver l'élément ou false pour supprimer l'élément.

Explication :

L'inversion par défaut est false, c'est-à-dire que la fonction de filtre renvoie true pour conserver l'élément. Si vous définissez invert sur true, la fonction de filtre renvoie. true pour supprimer l'élément.

L'exemple suivant montre comment filtrer les éléments d'un tableau avec un indice inférieur à 0 :

//results:[1,2]
$.grep( [0,1,2], function(n,i){
return n > 0;
});
Copier après la connexion

( 4).Convert

jQuery.map( array, callback)

Valeur de retour :

Array

Explication :

Convertir les éléments d'un tableau en un autre tableau.

La fonction de conversion en tant que paramètre sera appelée pour chaque élément du tableau, et la fonction de conversion recevra un paramètre représentant l'élément en cours de conversion.

La fonction de conversion peut renvoyer la valeur convertie, null (supprime l'élément du tableau) ou un tableau contenant la valeur développée dans le tableau d'origine.

Exemple :

var arr = [ "a", "b", "c", "d", "e" ];

$("p" ).text(arr.join(", "));

arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); });

$("p").text(arr.join(", "));

arr = jQuery.map(arr, function (a) { return a + a; }) ;

alert(arr.join(", "));

//alerte A0A0, B1B1, C2C2, D3D3, E4E4

(5)

jQuery.makeArray( obj ) ,

jQuery.inArray( valeur, tableau ) ,jQuery.merge( premier, deuxième ) ,

jQuery.unique( array ) Je ne les présenterai pas un par un,

et

JavaScript ( ) et la méthode split() est également importante. 4 : Opération de test :

(1):

$.isFunction(fn)

Retour : booléen ;

Description : Tester s'il s'agit d'une fonction ;

Exemple :

var fn =function(){};

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

Retour : Booléen;

Description : Test Qu'il s'agisse d'un tableau :

Exemple : omis

(3) :

JavaScript n'a que isNan() et isFinite() : non-nombre et infini ; 🎜>

5 : Objet Navigateur :

L'excellence de jQuery réside dans ses fonctionnalités multi-navigateurs. Habituellement, nous n'avons pas besoin d'écrire du code différent. pour différents navigateurs Code. Mais si vous êtes un développeur jQuery ou un développeur de plug-ins, vous devez gérer vous-même les différences entre les navigateurs afin de fournir aux utilisateurs des fonctionnalités multi-navigateurs.

jQuery fournit les propriétés suivantes pour l'obtention. fonctionnalités du navigateur :

tbody>

jQuery.support

1.3后版本新增
jQuery.browser 已废除

jQuery.browser.version

已废除
jQuery.boxModel 已废除
jQuery .support

Nouveau dans la version 1.3

jQuery.browser

Obsolète

jQuery.browser.version

Obsolète
    jQuery.boxModel
Obsolète

$.support :

Nouveau dans jQuery 1.3. Un ensemble de propriétés utilisées pour afficher les fonctionnalités et les bugs des différents navigateurs.
  • jQuery fournit une série de propriétés, et vous pouvez également ajouter librement vos propres propriétés. Beaucoup de ces propriétés sont de très bas niveau, il est donc difficile de dire si elles resteront efficaces dans le temps, mais elles sont principalement destinées aux développeurs de plugins et de noyaux.

  • Toutes ces valeurs d'attribut prises en charge sont implémentées via la détection de fonctionnalités, plutôt que par n'importe quelle détection de navigateur. Voici quelques excellentes ressources expliquant le fonctionnement de ces détections de fonctionnalités :
  • http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser- scripts

    http://yura.thinkweb2.com/cft/

    http://www.jibbering .com/faq/faq_notes /not_browser_detect.html

    jQuery.support comprend principalement les tests suivants :

    boxModel

     : Si cette page et le navigateur sont rendus à l'aide du W3C Modèle de boîte CSS, égal à vrai. Normalement, cette valeur est fausse en mode bizarreries d'IE 6 et IE 7. Cette valeur est nulle jusqu'à ce que le document soit prêt.

    cssFloat

     : renvoie vrai si cssFloat est utilisé pour accéder à la valeur flottante CSS. Actuellement, false est renvoyé dans IE et styleFloat est utilisé à la place.

    hrefNormalized

     : renvoie true si le navigateur renvoie le résultat intact de getAttribute("href"). Dans IE, il renverra false car ses URL ont été normalisées. htmlSerialize : Si le navigateur sérialise ces liens lors de l'insertion d'éléments de lien via innerHTML, il renverra true. Actuellement, IE renvoie false.

    leadingWhitespace : renvoie true si le navigateur conserve les caractères d'espacement de début lors de l'utilisation de innerHTML, renvoie actuellement false dans IE 6-8.

    noCloneEvent

     : renvoie vrai si le navigateur ne copie pas l'élément avec la fonction gestionnaire d'événements lors du clonage de l'élément. Actuellement, il renvoie faux dans IE.

    objectAll : true si l'exécution de

    getElementsByTagName

    ("*") sur un objet élément renverra tous les éléments descendants, actuellement dans IE 7 false.

    opacité

     : renvoie vrai si le navigateur peut interpréter correctement l'attribut de style de transparence, renvoie actuellement faux dans IE car il utilise un filtre alpha à la place.

    scriptEval

     : lors de l'utilisation de la méthode appendChild/createTextNode pour insérer du code de script, si le navigateur exécute le script, renvoie actuellement false dans IE et IE utilise la méthode .text pour insérer le code de script pour l'exécution.

    style : true si getAttribute("style") renvoie le style en ligne de l'élément. Actuellement, c'est faux dans IE car il utilise à la place cssText. tbody : renvoie vrai si le navigateur autorise les éléments du tableau à ne pas contenir d'éléments tbody. Actuellement, false est renvoyé dans IE et il insérera automatiquement le corps manquant. Il y a des articles similaires dans ce blog, veuillez consulter : Résumé de la table des matières de ma série jQuery

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Étiquettes associées:
    source:php.cn
    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
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal