Jquery

Télécharger ce document sur www.krymo.com/download.html

JQUERY

www.krymo.com


Tutoriel

jQuery est une bibliothèque JavaScript.
jQuery simplifie grandement la programmation JavaScript.
jQuery est facile à apprendre.

Exemple
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

Essayer ce code !

www.krymo.com


Présentation

Le but de jQuery est de rendre plus facile à utiliser JavaScript sur votre site web.

Ce que vous devriez déjà savoir
Avant de commencer à étudier jQuery, vous devriez avoir une connaissance de base de:

•HTML
•CSS
•JavaScript

Si vous voulez étudier ces sujets d'abord, nos autres tutoriels .

Qu'est-ce que jQuery?
jQuery est un poids léger , « écrire moins, faire plus », de la bibliothèque JavaScript.

Le but de jQuery est de rendre JavaScript plus facile à utiliser sur votre site web.

jQuery prend en charge beaucoup de tâches courantes qui nécessitent de nombreuses lignes de code JavaScript à accomplir, et il s'enroule dans les méthodes
que vous pouvez appeler avec une seule ligne de code.

jQuery simplifie aussi beaucoup de choses compliquées à partir de JavaScript, telles que les appels AJAX et la manipulation du DOM.

La bibliothèque jQuery possède les fonctions suivantes:

•HTML / DOM manipulation
•CSS manipulation
•Méthodes d'événements HTML
•Effets et animations

www.krymo.com


•AJAX
•Utilitaires

Astuce: En outre, jQuery a des plugins pour presque n'importe quelle de ces tâches.

Pourquoi jQuery?
Il ya beaucoup d'autres frameworks JavaScript, mais jQuery semble être la plus populaire, et aussi la plus extensible.

Bon nombre des plus grandes entreprises utilisent du jQuery , comme:

•Google
•Microsoft
•IBM
•Netflix

Est-ce que jQuery fonctionne dans tous les navigateurs?

L'équipe de jQuery sait tout de cross-browser problèmes, et ils ont écrit ces connaissances dans la bibliothèque jQuery.
jQuery fonctionnera pareil dans tous les principaux navigateurs.

www.krymo.com


Installation

Ajout de jQuery pour vos pages Web
Il ya plusieurs façons de commencer à utiliser jQuery sur votre site web. Vous pouvez:

•Téléchargez la bibliothèque jQuery à partir jQuery.com
•Inclure jQuery à partir d'un CDN, comme Google

Téléchargement jQuery
Il existe deux versions de jQuery disponiblent pour le téléchargement:

•Version de production - c'est pour votre site Web en direct car il a été minifié et comprimé.
•La version de développement - c'est pour les tests et le développement (code non compressé et lisible)

Les deux versions peuvent être téléchargées à partir jQuery.com .

La bibliothèque jQuery est un fichier unique JavaScript, et vous y faites référence à la balise HTML <script> (notez que la balise <script> doit être à l'intérieur
de la section <head>):

<head>
<script src="jquery-1.8.3.min.js"></script>
</head>

Astuce: Placez le fichier téléchargé dans le même répertoire que les pages où vous souhaitez l'utiliser.

Vous vous demandez pourquoi nous n'avons pas de type = "text / javascript" dans la balise <script>?

Ceci n'est pas nécessaire en HTML5. JavaScript est le langage de script par défaut en HTML5 et dans tous les navigateurs modernes!

www.krymo.com


Alternatives à Télécharger
Si vous ne souhaitez pas télécharger et héberger jQuery vous-même, vous pouvez l'inclure à partir d'un CDN (Content Delivery Network).

Google et Microsoft jQuery hôte.

Pour utiliser jQuery depuis Google ou Microsoft, utilisez l'une des méthodes suivantes:

Google CDN:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>

Téléchargez la dernière version disponible avec Google CDN:

Si vous regardez l'URL de Google ci-dessus - la version de jQuery est spécifié dans l'URL (1.8.3). Si vous souhaitez utiliser la dernière version de jQuery,
vous pouvez supprimer un numéro de la fin de la chaîne de version (par exemple 1.8), puis Google renvoie la dernière version disponible dans la série
1.8 (1.8.0, 1.8. 1, etc), ou vous pouvez le prendre jusqu'au nombre entier (1), et Google renvoie la dernière version disponible de la série 1 (de 1.1.0 à
1.9.9).

Microsoft CDN:
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">
</script>
</head>
Un grand avantage de l'utilisation de jQuery hébergé par Google ou Microsoft:

De nombreux utilisateurs ont déjà téléchargé jQuery de Google ou de Microsoft lors de la visite un autre site. En conséquence, il sera chargé à partir du
cache quand ils visitent votre site, ce qui conduit à temps de chargement plus rapide. En outre, la plupart CDN sera s'assurer qu'une fois qu'un
utilisateur demande un fichier d'elle, elle sera servie par le serveur le plus proche d'eux, ce qui entraîne également le temps de chargement plus rapide.

www.krymo.com


Syntaxe

Avec jQuery vous sélectionnez (requête) des éléments HTML et effectuez des «actions» sur eux.

Syntaxe jQuery
La syntaxe jQuery est faite sur mesure pour la sélection des éléments HTML et l'effectuation de certaines actions sur l'élément (s).

La syntaxe de base est la suivante: $ ( sélecteur ). l'action ()

•Un signe $ pour définir / accès jQuery
•A ( sélecteur ) à "requête (ou trouver)" éléments HTML
•Un jQuery action de () à effectuer sur l'élément (s)

Exemples:

. $ (This) hide () - se cache l'élément courant.

. $ ("P") hide () - masque tous les éléments <p>.

. $ (". Test") hide () - cache tous les éléments avec class = "test".

$ ("# Test") hide () -. Cache l'élément avec id = "test".

Êtes-vous familiarisé avec les sélecteurs CSS?

jQuery utilise la syntaxe CSS pour sélectionner des éléments. Vous en apprendrez plus sur la syntaxe de sélection dans le prochain chapitre de ce
tutoriel.

www.krymo.com


L'événement du document Ready
Vous avez sans doute remarqué que toutes les méthodes jQuery dans nos exemples, sont à l'intérieur d'un document prêt à l'événement:


// les méthodes jQuery se placent ici...

});

Ceci, pour éviter que tout code jQuery s'exécute avant que le document est fini de charger (prêt).

Il est de bonne pratique d'attendre que le document soit entièrement chargé et prêt, avant de travailler avec jQ.Cela vous permet également d'avoir votre code
JavaScript avant que le corps de votre document, dans la section head.

Voici quelques exemples d'actions qui peuvent échouer si les méthodes sont exécutées avant que le document soit totalement chargé:

•Essayer de cacher un élément qui n'est pas encore créé
•Essayer d'obtenir la taille d'une image qui n'est pas encore chargé

Astuce: L'équipe de jQuery a également créé une méthode encore plus courte pour l'événement document prêt:

$(function(){

// appeler les méthodes jQuery ici...

});

Utilisez la syntaxe que vous préférez. Nous pensons que l'événement du document prêt est plus facile à comprendre à la lecture du code.

www.krymo.com


Sélecteurs

les sélecteurs jQuery sont une des parties les plus importantes de la bibliothèque jQuery.

Ces sélecteurs vous permettent de sélectionner et de manipuler du HTML .

Avec les sélecteurs jQuery, vous pouvez trouver des éléments en fonction de leur id, classes, types, les attributs, les valeurs d'attributs et bien plus encore. Il
est basé sur des existants(sélecteurs CSS) , et en plus, il a quelques sélecteurs propres personnalisés.

Tous les types de sélecteurs dans jQuery, commencent par le signe dollar et les parenthèses: $ ().

Le sélecteur élément
Le sélecteur d'élément jQuery sélectionne les éléments en fonction de leurs noms de balises.

Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci:

$("p")

Exemple

Lorsqu'un utilisateur clique sur un bouton, tous les éléments <p> sera cachée:

Exemple
$("button").click(function(){
$("p").hide();
});
});

www.krymo.com


Le # id sélecteur
Le jQuery # id sélecteur utilise l'attribut id d'une balise HTML pour trouver l'élément spécifique.

Un id doit être unique dans une page, vous devez donc utiliser le sélecteur # id si vous souhaitez trouver un seul élément unique.

Pour trouver un élément avec un id spécifique, écrivez un caractère dièse, suivi par l'id de l'élément:

$("#test")

Exemple

Quand un utilisateur clique sur un bouton, l'élément avec id = "test" sera cachée:

Exemple
$("#test").hide();
});
});

Le sélecteur. Class
Le sélecteur de classe jQuery retrouve des éléments avec une classe spécifique.

Pour trouver des éléments avec une classe spécifique, écrivez un personnage d'époque, suivi du nom de la classe:

$(".test")

Exemple

Quand un utilisateur clique sur un bouton, les éléments avec class = "test" seront cachés:

www.krymo.com


Exemple
$(".test").hide();
});
});

Exemples de sélecteurs jQuery
Syntaxe Description

$ ("*") Sélectionne tous les éléments

$ (this) Sélectionne l'élément HTML en cours

$ ("p.intro") Sélectionne tous les éléments <p> avec class = "intro"

$ ("p: first") Sélectionne l'élément <p> premier

$ ("ul li: first") Sélectionne l'élément <li> premier de la première liste <ul>

$ ("ul li: first-child") Sélectionne l'élément <li> premier de chaque <ul>

$ ("[href]") Sélectionne tous les éléments avec un attribut href

$ ("a [target = '_blank']") Sélectionne tous les éléments <a> avec une valeur d'attribut cible égal à "_blank"

Sélectionne tous les éléments <a> avec une valeur d'attribut cible est-il égal à
$ ("a [target! = '_blank']")
"_blank"

www.krymo.com


Es
sa
$ (": button") Sélectionne tous les éléments et les éléments <button> <input> de type = "button" ye
z-
le

Es
sa
$ ("tr: même») Sélectionne tous les éléments, même <tr> ye
z-
le

Es
sa
$ ("tr: impair") Sélectionne tous les éléments impairs <tr> ye
z-
le

Fonctions dans un fichier séparé
Si votre site contient un grand nombre de pages, et vous voulez que vos fonctions jQuery soient faciles à entretenir, vous pouvez mettre vos fonctions jQuery
dans un fichier séparé. Js.

Lorsque nous démontrons dans ce tutoriel jQuery, les fonctions sont directement ajoutés dans la section <head>.Cependant, il est parfois préférable de les
placer dans un fichier séparé, comme ceci (utiliser l'attribut src pour désigner le fichier js.):

Exemple
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="mes_fonctions_jquery.js"></script>
</head>

www.krymo.com


Méthodes pour les évenements

jQuery est fait sur mesure pour répondre aux événements dans une page HTML.

Quels sont les événements?
Toutes les différentes actions des visiteurs d'une page Web qui peuvent répondre aux événements sont appelés ainsi.

Un événement représente le moment précis où quelque chose se passe.

Exemples:

•le déplacement d'un curseur sur un élément
•la sélection d'un bouton radio
•cliquant sur un élément

Le terme "feux" est souvent utilisé avec les événements. Exemple: «L'événement keypress se déclenche au moment où vous appuyez sur une touche".

Voici quelques événements communs DOM:

Événements de la souris Événements Clavier Evénements formulaire Document / Fenêtre événements

cliquez sur Appuyer sur une touche soumettre charger

Double cliquer Aller en bas changer redimensionner

Entrée du pointeur Aller en haut concentrer faire défiler

Sortie du pointeur brouiller décharger

www.krymo.com


Syntaxe

Pour affecter un événement click à tous les paragraphes d'une page, vous pouvez faire ceci:

$("p").click();

L'étape suivante consiste à définir ce qui doit se passer lorsque l'événement se déclenche. Vous devez passer une fonction à l'événement:

// les actions se placent ici!!
});

Méthodes couramment utilisées dans les événements jQuery
$ (Document). Ready ()

L'$ (document). Ready () nous permet d'exécuter une fonction lorsque le document est entièrement chargée. Cet événement est déjà expliqué dans la syntaxe
jQuery .

cliquez sur ()

La méthode click () attache une fonction de gestionnaire d'événements à un élément HTML.

La fonction est exécutée lorsque l'utilisateur clique sur l'élément HTML.

L'exemple suivant explique: Quand un événement se déclenche clic sur un élément <p>; masquer l'élément <p> actuelle:

Exemple
$(this).hide();
});

www.krymo.com


dblclick ()

Le dbclick () accorde une fonction de gestionnaire d'événements à un élément HTML.

La fonction est exécutée lorsque l'utilisateur double-clique sur l'élément HTML:

Exemple
$("p").dblclick(function(){
$(this).hide();
});

mouseenter ()

Le mouseenter () accorde une fonction de gestionnaire d'événements à un élément HTML.

La fonction est exécutée lorsque le pointeur de la souris entre dans l'élément HTML:

Exemple
$("#p1").mouseenter(function(){
alert("vous entrez dans le paragraphe 1!");
});

mouseleave ()

Le mouseleave () accorde une fonction de gestionnaire d'événements à un élément HTML.

La fonction est exécutée lorsque le pointeur de la souris quitte l'élément HTML:

Exemple
$("#p1").mouseleave(function(){
alert("Bye! Vous quittez le paragraphe 1!");
});

www.krymo.com


mousedown ()

Le mousedown () accorde une fonction de gestionnaire d'événements à un élément HTML.

La fonction est exécutée lorsque le bouton gauche de la souris est enfoncé, tandis que la souris est sur l'élément HTML:

Exemple
$("#p1").mousedown(function(){
alert("le pointeur est enfoncé sur le paragraphe 1!");
});

mouseup ()

Le mouseup () méthode accorde une fonction de gestionnaire d'événements à un élément HTML.

La fonction est exécutée lorsque le bouton gauche de la souris est relâché, tandis que la souris est sur l'élément HTML:

Exemple
$("#p1").mouseup(function(){
alert("le pointeur est rélaché...!");
});

hover ()

Le hover () prend deux fonctions et est une combinaison des méthodes mouseenter () et mouseleave () .

La première fonction est exécutée lorsque la souris entre dans l'élément HTML, et la deuxième fonction est exécutée lorsque la souris quitte l'élément HTML:

Exemple
$("#p1").hover(function(){
alert("vous entrez dans le paragraphe 1!");
},
function(){
alert("Bye! vous entes entrain de quitter le paragraphe 1!");
});

www.krymo.com


focus ()

La méthode focus () attache une fonction de gestionnaire d'événements à un champ de formulaire HTML.

La fonction est exécutée lorsque le champ de formulaire reçoit le focus:

Exemple
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

blur ()

La méthode blur () accorde une fonction de gestionnaire d'événements à un champ de formulaire HTML.

La fonction est exécutée lorsque le champ de formulaire perd le focus:

Exemple
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

Masquer et Afficher

Comment cacher des parties de texte ?

www.krymo.com


hide () et show ()
Avec jQuery, vous pouvez afficher ou masquer des éléments HTML avec les méthodes hide () et show ():

Exemple
$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

Syntaxe:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Le paramètre de vitesse optionnel spécifie la vitesse de masquer / afficher, et peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.

Le paramètre callback optionnel est le nom d'une fonction à exécuter après la fin du « spectacle ».

L'exemple suivant montre le paramètre de vitesse avec hide ():

Exemple
$("p").hide(1000);
});

www.krymo.com


toggle ()
Avec jQuery, vous pouvez basculer entre les méthodes hide () et show () avec la méthode toggle ().

le éléments représentés sont cachés et les éléments cachés sont affichés:

Exemple
$("p").toggle();
});

Syntaxe:

$(selector).toggle(speed,callback);

Le paramètre de vitesse en option peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.

Le paramètre de rappel optionnel est le nom d'une fonction devant être exécutée après que la méthode toggle () soit terminée.

Effets jQuery - fading

Avec jQuery, vous pouvez faire disparaître des éléments à l'intérieur et les mettre en hors-visibilité.

Méthodes fading
•fadeIn ()
•fadeOut ()
•fadeToggle ()
•fadeTo ()

www.krymo.com


Méthode fadeIn ()
Le fadeIn () est utilisé à s'estomper dans un élément caché.

Syntaxe:

$(selector).fadeIn(speed,callback);

Le paramètre de vitesse en option spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.

Le paramètre callback option est le nom d'une fonction qui doit être exécutée après la disparition complète.

L'exemple suivant illustre la méthode fadeIn () avec des paramètres différents:

Exemple
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

Méthode fadeOut ()
Le fadeOut () est utilisé pour faire disparaître un élément visible.

Syntaxe:

$(selector).fadeOut(speed,callback);



L'exemple suivant illustre l'fadeOut () avec des paramètres différents:

www.krymo.com


Exemple
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

Méthode fadeToggle()
Le fadeToggle () permet de basculer entre le fadeIn () et le fadeOut () .

Si les éléments sont affichés, fadeToggle () va les rendre invisible,

Si les éléments sont masqués, fadeToggle () va les rendre visible.

Syntaxe:

$(selector).fadeToggle(speed,callback);



L'exemple suivant illustre la méthode fadeToggle () avec des paramètres différents:

Exemple
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

www.krymo.com


Méthode fadeTo ()
Le fadeTo () permet la décoloration à une opacité donnée (valeur comprise entre 0 et 1).

Syntaxe:

$(selector).fadeTo(speed,opacity,callback);

Le paramètre de vitesse requise spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.

Le paramètre d'opacité requise dans le fadeTo () indique le procédé pour la décoloration d'une opacité donnée (valeur entre 0 et 1).

Le paramètre callback option est le nom d'une fonction qui doit être exécutée après que la fonction se termine.

L'exemple suivant illustre l'fadeTo () avec des paramètres différents:

Exemple
$("#div1").fadeTo("slow",0.15);
});

Méthodes Coulissantes

Les méthodes de diapositives jQuery glissent des éléments vers le haut et vers le bas.

Avec jQuery, vous pouvez créer un effet de glissement sur les éléments.

jQuery a les méthodes suivantes de diapositives:

•slideDown ()
•slideUp ()
•slideToggle ()

www.krymo.com


Méthode slideDown ()
Le slideDown () est utilisé pour glisser un élément.

Syntaxe:

$(selector).slideDown(speed,callback);


Le paramètre de rappel optionnel est le nom d'une fonction à exécuter après le glissement se termine.

L'exemple suivant illustre le slideDown () :

Exemple
$("#flip").click(function(){
$("#panel").slideDown();
});

Méthode slideUp ()
Le slideUp () est utilisé pour glisser un élément.

Syntaxe:

$(selector).slideUp(speed,callback);


Le paramètre de rappel optionnel est le nom d'une fonction à exécuter après que le glissement se termine.

L'exemple suivant illustre le slideUp ():

www.krymo.com


Exemple
$("#panel").slideUp();
});

Méthode toggle ()
La méthode slideToggle () permet de basculer entre le slideDown () et le slideUp ().

Si les éléments sont glissés vers le bas, slideToggle () va les faire glisser vers le haut.

Si les éléments sont glissés vers le haut, slideToggle () va les faire glisser vers le bas.

$(selector).slideToggle(speed,callback);

Le paramètre de vitesse en option peut prendre les valeurs suivantes: "slow", "fast", milliseconds.

Le paramètre de rappel optionnel est le nom d'une fonction à exécuter après que le glissement se termine.

L'exemple suivant illustre la méthode slideToggle ():

Exemple
$("#panel").slideToggle();
});

www.krymo.com


Animations

La méthode animate () vous permet de créer des animations personnalisées.

Méthode animate()
animate () est utilisé pour créer des animations personnalisées.

Syntaxe:

$(selector).animate({params},speed,callback);

Le paramètre requis params définit les propriétées CSS à animer.


Le paramètre callback option est le nom d'une fonction qui doit être exécutée après que l'animation soit terminée.

L'exemple suivant illustre une utilisation simple de la méthode animate (), il déplace un élément div vers la gauche, jusqu'à ce qu'il ait atteint une propriété
gauche de 250px:

Exemple
$("div").animate({left:'250px'});
});

Par défaut, tous les éléments HTML ont une position statique, et ne peuvent pas être déplacés.
Pour manipuler la position, n'oubliez pas d'abord définir la propriété CSS position de l'élément de rapport, fixe ou absolue!

www.krymo.com


Manipuler plusieurs propriétés
Notez que plusieurs propriétés peuvent être animées en même temps:

Exemple
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Est-il possible de manipuler toutes les propriétés CSS avec la méthode animate ()?

Oui, presque! Cependant, il ya une chose importante à retenir: tous les noms de propriétés doivent être en camelCase lorsqu'ils sont utilisés avec la
méthode animate (): Vous aurez besoin d'écrire au lieu de paddingLeft ...padding-left, margin-right au lieu de marginRight , et ainsi de suite. En outre,
l'animation couleur n'est pas inclus dans la bibliothèque jQuery de base. Si vous souhaitez animer la couleur, vous devez télécharger le plug-in Coulors
Animations à partir jQuery.com.

Utilisation des valeurs relatives
Il est également possible de définir des valeurs relatives (la valeur est alors par rapport à la valeur actuelle de l'élément). Ceci est fait en plaçant + = ou - =
avant de la valeur:

www.krymo.com


Exemple
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

A l'aide des valeurs prédéfinies
Vous pouvez même spécifier la valeur d'une propriété d'animation:

Exemple
$("div").animate({
height:'toggle'
});
});

www.krymo.com


Utilisation de la fonctionnalité file d'attente
Par défaut, jQuery est livré avec des fonctionnalités file d'attente pour les animations.

Donc, si vous voulez effectuer différentes animations uns après les autres, nous profitons de la fonctionnalité file d'attente:

Exemple 1
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

L'exemple ci-dessous déplace d'abord l'élément <div> vers la droite, puis augmente la taille de la police du texte:

Exemple 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

www.krymo.com


Animations d'arrêt

stop () est utilisé pour arrêter les animations avant qu'elles ne soit terminées.

Méthode stop ()

La méthode stop () fonctionne pour toutes les fonctions d'effets jQuery, y compris coulissantes, animations décoloration et personnalisé.

Syntaxe:

$(selector).stop(stopAll,goToEnd);

Le paramètre optionnel spécifie si stopAll aussi la file d'attente d'animation doit être effacé ou non. Par défaut est false, ce qui signifie que seul l'animation
active sera arrêté, ce qui permet aux animations en attente d'être exécutées par la suite.

Le paramètre optionnel spécifie goToEnd ou non pour compléter l'animation en cours immédiatement. Par défaut est false.

Donc, par défaut, la méthode stop () tue l'animation actuelle en cours d'exécution sur l'élément sélectionné.

L'exemple suivant illustre la méthode stop () sans paramètres:

Exemple
$("#stop").click(function(){
$("#panel").stop();
});

www.krymo.com


Fonctions rappel

Une fonction de rappel est exécutée après que l'effet courant soit à 100% terminée.

Les instructions JavaScript sont exécutées ligne par ligne. Cependant, avec des effets, la prochaine ligne de code peut être exécuté même si l'effet n'est pas
fini. Cela peut créer des erreurs.

Pour éviter cela, vous pouvez créer une fonction de rappel.

Syntaxe typique: $ ( sélecteur ) cacher (. vitesse, rappel );

Exemples

L'exemple ci-dessous présente un paramètre de rappel qui est une fonction qui sera exécutée après que l'effet soit terminé:

Exemple avec rappel
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});

L'exemple ci-dessous n'a pas de paramètre de rappel, et la fenêtre d'alerte sera affichée avant l'effet peau est terminé:

Exemple sans rappel
$("p").hide(1000);
alert("The paragraph is now hidden");
});

www.krymo.com


Chaînage
Avec jQuery, vous pouvez enchaîner des actions / méthodes.

La méthode de chaînage nous permet d'exécuter plusieurs méthodes jQuery (sur le même élément) dans une seule instruction.
Jusqu'à maintenant, nous avons rédigés les instructions une à la fois .

Cependant, il existe une technique appelée chaînage, qui nous permet d'exécuter des commandes multiples, l'une après l'autre, sur le même élément (s).

Astuce: De cette façon, les navigateurs n'ont pas à trouver le même élément (s) plus d'une fois.

Pour la chaîne d'une action, il vous suffit de joindre l'action à l'action précédente.

Les chaînes de l'exemple suivant ainsi le css (), slideUp (), et slideDown () méthodes. Le "p1" élément premiers changements au rouge, puis glisse vers le
haut, puis glisse vers le bas:

Exemple
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

Nous pouvons aussi ajouter des appels de méthodes et plus si nécessaire.

Astuce : Avec le chaînage, la ligne de code pourrait être très long. Cependant, jQuery n'est pas très strict sur la syntaxe, vous pouvez le formater comme vous
voulez, y compris les sauts de ligne et les indentations.

Cela fonctionne aussi très bien:

Exemple
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

jQuery jette des espaces supplémentaires et exécute les lignes ci-dessus comme une longue ligne de code.

www.krymo.com


Obtenir du contenu et des attributs

jQuery contient des méthodes puissantes pour changer et manipuler les éléments et attributs HTML.

jQuery DOM manipulation
Une partie très importante de jQuery, est la possibilité de manipuler le DOM.

jQuery est livré avec un tas de méthodes DOM connexes, qui le rend facile à accéder et manipuler les éléments et attributs.

DOM = Document Object Model

Le DOM définit une norme pour l'accès aux documents HTML et XML: «Le modèle du W3C DOM (Document Object) est une plate-forme indépendante de
la langue et l'interface qui permet aux programmes et aux scripts d'accéder dynamiquement et mettre à jour le contenu, la structure et style d'un
document. "

Obtenez du contenu - text (), html () et val ()
simples, mais utiles, les méthodes jQuery pour la manipulation du DOM :

•text () - Définit ou retourne le contenu textuel des éléments sélectionnés
•html () - Définit ou retourne le contenu des éléments sélectionnés (y compris les balises HTML)
•val () - Définit ou renvoie la valeur des champs de formulaire

L'exemple suivant montre comment obtenir le contenu avec le text () et le html () :

www.krymo.com


Exemple
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});

L'exemple suivant montre comment obtenir la valeur d'un champ de saisie avec le val () :

Exemple
alert("Value: " + $("#test").val());
});

Attributs attr ()
Le attr () est utilisé pour obtenir les valeurs d'attribut.

L'exemple suivant montre comment obtenir la valeur de l'attribut href dans un lien:

Exemple
alert($("#kry").attr("href"));
});

www.krymo.com


Contenu et Attributs

Text (), html () et val ()
Nous allons utiliser les trois mêmes méthodes de la page précédente pour définir le contenu :

•text () - Définit ou retourne le contenu textuel des éléments sélectionnés
•html () - Définit ou retourne le contenu des éléments sélectionnés (y compris les balises HTML)
•val () - Définit ou renvoie la valeur des champs de formulaire

L'exemple suivant montre comment définir le contenu avec le text (), le html () et val () méthodes:

Exemple
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val("Dolly Duck");
});

www.krymo.com


Une fonction de rappel
Tous les trois méthodes ci-dessus: text (), html () et val (), viennent également avec une fonction de rappel. La fonction de rappel a deux paramètres: l'indice
de l'élément courant dans la liste des éléments sélectionnés et l'original (ancien) de valeur. Vous retournez ensuite la chaîne que vous souhaitez utiliser comme
nouvelle valeur de la fonction.

L'exemple suivant montre text () et html () avec une fonction de rappel:

Exemple
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});

$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});

Attributs attr ()
Le attr () est également utilisé pour définir / modifier les valeurs d'attribut.

L'exemple suivant montre comment modifier la valeur de l'attribut href dans un lien:

www.krymo.com


Exemple
$("#kry").attr("href","http://www.krymo.com/jquery.html");
});

La méthode attr () vous permet également de définir des attributs multiples en même temps.

L'exemple suivant montre comment définir à la fois le href et les attributs de titre en même temps:

Exemple
$("#w3s").attr({
"href" : "http://www.krymo.com/jquery",
"title" : "krymo Tutoriel jQuery"
});
});

Une fonction de rappel pour les attr ()
La méthode attr (), vient également avec une fonction de rappel. La fonction de rappel a deux paramètres: l'indice de l'élément courant dans la liste des
éléments sélectionnés et la valeur de l'attribut originel (l'ancien). Vous retournez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur d'attribut
de la fonction.

L'exemple suivant montre attr () avec une fonction de rappel:

Exemple
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});

www.krymo.com


Ajouter des éléments

Avec jQuery, il est facile d'ajouter de nouveaux éléments / contenu.

Ajouter un contenu HTML
Nous allons examiner quatre méthodes jQuery qui sont utilisés pour ajouter du nouveau contenu:

•append () - Insère le contenu à la fin des éléments sélectionnés
•préfixer () - Insère le contenu au début des éléments choisis
•after () - Insère le contenu après les éléments sélectionnés
•avant () - Insère le contenu avant que les éléments sélectionnés

Méthode append ()
Le append () insère contenu à la fin des éléments sélectionnés HTML.

Exemple
$("p").append("texte ajouté à la fin.");

Méthode prepend ()
Le prepend () insère le contenu AU DÉBUT des éléments sélectionnés HTML.

Exemple
$("p").prepend("texte ajouté au début.");

www.krymo.com


Ajouter plusieurs nouveaux éléments avec append () et prepend ()
Dans les deux exemples ci-dessus, nous n'avons inséré un texte / HTML au début / à la fin des éléments sélectionnés HTML.

Cependant, le append () et le prepend () peuvent prendre un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être
générés avec le texte / HTML (comme nous l'avons fait dans les exemples ci-dessus), avec jQuery, ou avec du code JavaScript et les éléments DOM.

Dans l'exemple suivant, nous créons plusieurs éléments nouveaux. Les éléments sont créés avec le texte / HTML, jQuery et JavaScript / DOM. Puis nous
ajoutons de nouveaux éléments au texte avec la méthode append () (ce qui serait valable pour le prepend () aussi):

Exemple
function appendText()
{
var txt1="<p>Text.</p>"; // Créer un élément avec HTML
var txt2=$("<p></p>").text("Text."); // Créer avec jQuery
var txt3=document.createElement("p"); // Créer avec DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Ajouter de nouveaux éléments
}

Méthodes after () et before ()
Le after () méthode insère le contenu APRÈS les éléments sélectionnés HTML.

Le before () méthode insère le contenu AVANT les éléments sélectionnés HTML.

Exemple
$("img").after("du texte après");

$("img").before("Du texte après");

www.krymo.com


Ajouter plusieurs nouveaux éléments Avec after () et before ()
En outre, les deux méthodes peuvent prendre un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être générés avec
le texte / HTML (comme nous l'avons fait dans l'exemple ci-dessus), avec jQuery, ou avec du code JavaScript et les éléments DOM.

Dans l'exemple suivant, nous créons plusieurs éléments nouveaux. Les éléments sont créés avec le texte / HTML, jQuery et JavaScript / DOM. Puis nous
insérons les nouveaux éléments au texte avec la méthode after () (ce qui serait valable pour le before () aussi):

Exemple
function afterText()
{
var txt1="<b>I </b>"; // Créer avec HTML
var txt2=$("<i></i>").text("love "); // avec jQuery
var txt3=document.createElement("big"); // avec DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Inserrer de nouveaux éléments img
}

www.krymo.com


Éléments à supprimer

Avec jQuery, il est facile de retirer les éléments HTML existants.

Supprimer du contenu /
Pour supprimer du contenu, il ya principalement deux méthodes jQuery:

•remove () - Supprime l'élément sélectionné (et ses éléments enfants)
•empty () - Supprime les éléments enfants de l'élément sélectionné

Méthode remove ()
Le remove () supprime l'élément sélectionné (s) et ses éléments enfants.

Exemple
$("#div1").remove();

Méthode empty ()
La méthode jQuery empty () supprime les éléments enfants de l'élément sélectionné (s).

Exemple
$("#div1").empty();

www.krymo.com


Filtrer les éléments à enlever
Le remove () accepte aussi un paramètre qui vous permet de filtrer les éléments à supprimer.

Le paramètre peut être l'une des sélecteurs jQuery .

L'exemple suivant supprime tous les éléments <p> avec class = "italic":

Exemple
$("p").remove(".italic");

www.krymo.com


Classes CSS Get et Set
Avec jQuery, il est facile de manipuler le CSS des éléments.

Manipulation CSS
jQuery dispose de plusieurs méthodes pour la manipulation CSS. Nous allons examiner les méthodes suivantes:

•addClass () - Ajoute une ou plusieurs classes aux éléments sélectionnés
•removeClass () - Supprime une ou plusieurs classes à partir des éléments sélectionnés
•toggleClass () - Bascule entre l'ajout / suppression des classes à partir des éléments sélectionnés
•css () - Définit ou retourne l'attribut de style

Exemple
La feuille de style suivante sera utilisée pour tous les exemples sur cette page:

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

www.krymo.com


Méthode addClass ()
L'exemple suivant montre comment ajouter des attributs de classe pour les différents éléments. Bien sûr, vous pouvez sélectionner plusieurs éléments, lors de
l'ajout des classes:

Exemple
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});

Vous pouvez également spécifier plusieurs classes au sein de la méthode addClass ():

Exemple
$("#div1").addClass("important blue");
});

Méthode removeClass ()
L'exemple suivant montre comment supprimer un attribut de classe spécifique de différents éléments:

Exemple
$("h1,h2,p").removeClass("blue");
});

www.krymo.com


Méthode toggleClass ()
L'exemple suivant montre comment utiliser la méthode. toggleClass () Cette méthode permet de basculer entre l'ajout / suppression des classes à partir des
éléments sélectionnés:

Exemple
$("h1,h2,p").toggleClass("blue");
});

Méthode css ()
Le css () ou la méthode des ensembles retourne une ou plusieurs propriétés de style pour les éléments sélectionnés.

Retour d'une propriété CSS
Pour renvoyer la valeur d'une propriété CSS spécifiée, utilisez la syntaxe suivante:

css("propertyname");

L'exemple suivant renvoie la valeur de background-color de l'élément PREMIER correspondance:

www.krymo.com


Exemple
$("p").css("background-color");

Définir une propriété CSS
Pour définir une propriété CSS spécifiée, utilisez la syntaxe suivante:

css("propertyname","value");

L'exemple suivant définit la valeur background-color pour TOUS les éléments correspondants:

Exemple
$("p").css("background-color","yellow");

Réglez multiples propriétés CSS
Pour définir plusieurs propriétés CSS, utilisez la syntaxe suivante:

www.krymo.com


css({"propertyname":"value","propertyname":"value",...});

L'exemple suivant créera un background-color et une taille de police de tous les éléments correspondants:

Exemple
$("p").css({"background-color":"yellow","font-size":"200%"});

Dimensions

Avec jQuery, il est facile de travailler avec les dimensions des éléments et la fenêtre du navigateur.

Méthodes Dimension jQuery
jQuery possède plusieurs méthodes importantes pour travailler avec les dimensions:

•width ()
•height ()
•innerWidth ()
•innerHeight ()
•outerWidth ()
•outerHeight ()

www.krymo.com


Dimensions jQuery

width () et height ()
width () définit ou renvoie la largeur d'un élément (ne comprend padding, border, ou marge).

height () méthode définit ou retourne la hauteur d'un élément (ne comprend pas padding, border, ou marge).

L'exemple suivant retourne la largeur et la hauteur d'un élément div spécifié:

www.krymo.com


Exemple
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});

Méthodes innerWidth () et innerHeight ()
Le innerWidth () retourne la largeur d'un élément (y compris les protections).

Le innerHeight () retourne la hauteur d'un élément (y compris les protections).

L'exemple suivant retourne le inner-width/height d'un élément div spécifié:

Exemple
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
});

www.krymo.com


Méthodes outerWidth () et outerHeight ()
Le outerWidth () retourne la largeur d'un élément (y compris rembourrage et la frontière).

Le outerHeight () retourne la hauteur d'un élément (y compris rembourrage et la frontière).

L'exemple suivant retourne le outer-width/height d'un élément div spécifié:

Exemple
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
});

Le outerWidth (true) retourne la largeur d'un élément (y compris les padding, border, et la marge).

Le outerHeight (true) retourne la hauteur d'un élément (y compris les padding, border, et la marge).

Exemple
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
});

www.krymo.com


width () plus height ()
L'exemple suivant retourne la largeur et la hauteur du document (le document HTML) et de la fenêtre (la fenêtre du navigateur):

Exemple
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});

L'exemple suivant définit la largeur et la hauteur d'un élément div spécifié:

Exemple
$("#div1").width(500).height(500);
});

www.krymo.com

Jquery

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Jquery

Similaire à Jquery (20)

Jquery