JQUERY
Introduction
jQuery est une bibliothèque JavaScript.
jQuery simplifie grandement la programmation
JavaScript.
jQuery est facile à apprendre.
Le but de jQuery:
Le but de jQuery est:
1. Rendre beaucoup plus facile à utiliser
JavaScript sur votre site web
2. Être assuré de la validité de notre code. (au
vu des navigateurs les plus utilisés)
JQuery vs JavaScript
jQuery ne doit pas être vu comme une
alternative au JavaScript mais plutôt comme
un ajout.
JQuery sera utilisé conjointement avec
JavaScript.
Ajout de jQuery pour vos
pages Web
Il y a plusieurs façons de démarrer en utilisant
jQuery sur votre site web. On peut:
Télécharger la bibliothèque jQuery à partir [Link]
Inclure jQuery à partir d'un CDN, comme Google
<script
src="[Link]
[Link]">
</script>
Ajout de jQuery pour vos
pages Web
Téléchargement jQuery :
Il existe deux versions de jQuery
disponibles pour le téléchargement:
La version de production - ce qui est pour votre
site web en direct, car il a été minified et comprimé
La version de développement - ce qui est pour les
tests et développement (code non compressé et
lisible)
Les deux versions peuvent être
téléchargées à partir [Link].
Ajout de jQuery pour vos
pages Web
La bibliothèque jQuery est un seul fichier JavaScript,
et vous le référencer avec le HTML balise <script>
<script src="[Link]"></script>
jQuery Syntaxe
Avec jQuery vous sélectionnez des éléments
HTML effectuez des "actions" sur eux.
La syntaxe jQuery est faite sur mesure pour la
sélection des éléments HTML et effectuer
certaines actions sur l'élément (s).
La syntaxe de base est: $ (sélecteur).action ()
Un signe $ pour définir / accès jQuery
Un (sélecteur) pour "requête (ou trouver)"
éléments HTML
Une jQuery action () à effectuer sur l'élément (s)
jQuery Syntaxe
$ (sélecteur) L'action ()
EXEMPLE :
<script>
$("p").hide();
</script>
jQuery sélecteurs
Le sélecteur d'élément
Le sélecteur d'élément jQuery sélectionne des éléments sur la base
du nom de l'élément.
Vous pouvez sélectionner tous les éléments <p> sur une page
comme ceci:
Syntaxe:
$("p")
jQuery sélecteurs
Le sélecteur #id :
Le sélecteur de #id jQuery utilise l'attribut id d'une balise HTML pour
trouver l'élément spécifique.
Syntaxe :
$("#test")
jQuery sélecteurs
Le sélecteur .class :
Le sélecteur de classe jQuery trouve éléments avec une classe
spécifique.
Syntaxe :
$(".test")
Plus d'exemples de sélecteurs jQuery
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("[Link]") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
Sélectionner certains éléments de
formulaire en fonction de leur état.
:input pour cibler tous les éléments input,
textarea, select et button ;
:checked pour cibler les éléments cochés ou
sélectionnés pour des input type="checkbox",
input type="radio" et des éléments de liste select ;
:selected pour cibler les éléments option
sélectionnés dans une liste select ;
:disabled pour cibler les éléments input qui
possèdent un attribut disabled ;
:enabled pour cibler tous les éléments qui ne
possèdent pas d’attribut disabled.
Sélecteurs JQuery et Formulaires
jQuery met également à notre disposition des
“pseudo-sélecteurs” qui vont nous permettre
de sélectionner précisément et simplement
certains éléments spécifiques aux formulaires
HTML.
sélectionner des éléments input en fonction de
la valeur de leur attribut type grâce aux
pseudo-sélecteurs
jQuery :text, :password, :checkbox, :radio, :su
bmit, :file, :image, :button et :reset.
jQuery Méthodes événement
jQuery est fait sur mesure pour répondre
aux événements dans une page HTML.
Il réserve une méthode pour chaque
événement.
Exemple :
Click
Dblclick
Mouseenter
Mouseleave…..
jQuery Méthodes événement
Syntaxe Pour Méthodes événement :
1) - Pour attribuer un événement click à tous les
paragraphes sur une page, vous pouvez faire ceci:
$("p").click();
2) - La prochaine étape est de définir ce qui doit se
passer quand l'événement se déclenche. Vous devez
passer une fonction à l'événement:
$("p").click(function(){
// Instructions!!
});
jQuery Méthodes événement
EXEMPLE :
$("p").click(function(){
$(this).hide();
});
L'événement ready()
L'événement ready se produit lorsque le DOM (modèle objet de document)
a été chargé.
Parce que cet événement se produit après que le document est prêt, il est
un bon endroit pour avoir tous les autres événements et les fonctions jQuery
Il est de bonne pratique d'attendre que le document soit complètement
chargé et prêt avant de travailler avec lui. Cela vous permet également
d'avoir votre code JavaScript avant le corps de votre document, dans la
section de la tête.
Voici quelques exemples d'actions qui peuvent échouer si les
méthodes sont exécutés avant que le document ne soit
entièrement chargé:
En essayant de cacher un élément qui n'a pas encore créé
Essayer d'obtenir la taille d'une image qui n'a pas encore
chargé
L'événement ready()
Syntaxe :
$(document).ready(function() {…});
$(function(){instructions});
jQuery DOM Manipulation
Une partie très importante de jQuery est la
possibilité de manipuler le DOM
Obtenir du contenu - text (), html () et val ()
text () - Définit ou retourne le contenu du texte
des éléments sélectionnés
html () - Définit ou retourne le contenu des
éléments sélectionnés (y compris le balisage
HTML)
val () - Définit ou retourne la valeur des champs
de formulaire
Exemple
$("#btn1").click(function(){
alert("Text: " + $("#test1").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test2").html());
});
$("#btn3").click(function(){
alert("Value: " + $("#test3").val());
});
Définissez Contenu - text (), html () et
val () par l’exemple
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello
world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Obtenir des attributs - attr ()
La méthode jQuery attr () est utilisée
pour obtenir des valeurs d'attribut.
L'exemple suivant montre comment
obtenir la valeur de l'attribut href dans
un lien:
$("button").click(function(){
alert($("#w3s").attr("href"));
});
Définir les attributs - attr ()
La méthode jQuery attr () est également
utilisée pour définir / modifier les valeurs
d'attribut.
L'exemple suivant montre comment modifier
(définir) la valeur de l'attribut href dans un lien:
$("button").click(function(){
$("#w3s").attr("href", "[Link]
om/jquery");
});
Définir plusieurs attributs au même
temps
La méthode attr () vous permet également de
définir plusieurs attributs en même temps.
L'exemple suivant montre comment définir les
attributs href et title en même temps:
$("button").click(function(){
$("#w3s").attr({
"href" : "[Link]
",
"title" : "W3Schools jQuery Tutorial"
});
});
jQuery - CSS () Méthode
Pour définir une propriété CSS spécifié, utilisez la
syntaxe suivante:
css({"propertyname":"value","propertyname":"value",...});
Exemple :
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
