« JQuery » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| (3 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 5 : | Ligne 5 : | ||
= Installation = | = Installation = | ||
[http://docs.jquery.com/Downloading_jQuery#Download_jQuery Télécharger le fichier jquery.js] et l'inclure dans la page web avant les scripts JavaScript qui l'utiliseront. | * [http://docs.jquery.com/Downloading_jQuery#Download_jQuery Télécharger le fichier jquery.js] et l'inclure dans la page web avant les scripts JavaScript qui l'utiliseront. | ||
* [https://code.jquery.com/ CDN] | |||
<kode lang=html> | <kode lang=html> | ||
<head> | <head> | ||
| Ligne 12 : | Ligne 13 : | ||
<!-- ou télécharger jquery au chargement de la page --> | <!-- ou télécharger jquery au chargement de la page --> | ||
<script src="https://code.jquery.com/jquery-3. | <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | ||
</kode> | </kode> | ||
{{warn | | {{warn | | ||
| Ligne 67 : | Ligne 68 : | ||
$('#id').attr('value', 'nouvelle valeur'); | $('#id').attr('value', 'nouvelle valeur'); | ||
$('#id').val('nouvelle valeur'); | $('#id').val('nouvelle valeur'); | ||
</kode> | |||
= Manipulate classes = | |||
<kode lang=js> | |||
if ($('#id').hasClass('myClass')) | |||
{ | |||
$('#id').removeClass('myClass') | |||
} | |||
else | |||
{ | |||
$('#id').addClass('myClass') | |||
} | |||
</kode> | |||
= Document properties = | |||
<kode lang='js'> | |||
$(document).prop('title', 'My Title !'); | |||
</kode> | </kode> | ||
Dernière version du 16 février 2021 à 10:16
Généralités
jQuery est un framework JavaScript.
Installation
- Télécharger le fichier jquery.js et l'inclure dans la page web avant les scripts JavaScript qui l'utiliseront.
- CDN
|
<head>
<!-- utiliser la version locale -->
<script type="text/javascript" src="jquery.js"></script>
<!-- ou télécharger jquery au chargement de la page -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
 |
|
Sélecteurs
|
// sélectionne l’élément avec l'id "id"
$("#id")
// sélectionne tous les éléments avec la classe "class"
$(".class")
// sélectionne tous les éléments de type "div"
$("div")
// sélectionne tous les éléments de type "a" ayant un parent direct de type "div"
$("div > a")
// sélectionne l’élément suivant de même niveau que l’élément avec l'id "id"
$("#id").next()
// sélectionne l’élément parent de l’élément avec l'id "id"
$("#id").parent()
// sélectionne tous les éléments de même niveau que l’élément avec l'id "id"
$("#id").siblings()
|
|
Équivalent de document.getElementById("id") : $("#id")[0] |
Obtenir ou modifier le contenu d'un balise (InnerHtml)
|
|
var contenu = $("#id").html();
$("#id").html(NouveauContenu);
|
Obtenir ou modifier le style
|
|
var backgroundColor = $("#id").css("background-color");
$("#id").css("background-color", "black");
|
|
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use:margin-top or margin-right |
Obtenir ou modifier un attribut
|
|
var attribut_value = $('#id').attr('nom de l attribut');
// équivalent
$('#id').attr('value', 'nouvelle valeur');
$('#id').val('nouvelle valeur');
|
Manipulate classes
|
|
if ($('#id').hasClass('myClass'))
{
$('#id').removeClass('myClass')
}
else
{
$('#id').addClass('myClass')
}
|
Document properties
|
|
$(document).prop('title', 'My Title !');
|
Evenements
|
|
// associe la méthode MonHandler à l’événement mousemove
// écrase toutes les autres méthodes qui étaient associées à cet événement
$(document).mousemove(MonHandler);
// associe la méthode MonHandler à l’événement mousemove
// tout en conservant les méthodes précédement associées à cet événement
$(document).bind("mousemove", MonHandler);
// supprime toutes les méthodes qui étaient associées à l’événement mousemove
$(document).unbind("mousemove");
// supprime l'association entre la méthode MonHandler et l’événement mousemove
// tout en conservant les méthodes précédement associées à cet événement
$(document).unbind("mousemove", MonHandler);
|
Evenement ready
Permet de déclencher l'exécution du code JavaScript une fois que la page web a été entièrement chargée.
|
|
$(function() {
// do stuff when DOM is ready
});
// équivalent à
$(document).ready(function() { ... });
|
Evenement click
Permet de déclencher l'exécution du code JavaScript une fois que l'élément a été cliqué.
|
|
$("#id").click(function() {
// désigne la balise id
$(this)
});
|
Simuler un click
|
|
// clique sur une balise a
$('.path > .to > .element > a')[0].click();
|
mouseover / mouseleave
|
|
// quand la sourie passe sur id, on affiche id2
$("#id").mouseover(function () {
$("#id2").fadeIn();
})
// quand la sourie quitte id, on cache id2
$("#id").mouseleave(function () {
$("#id2").fadeOut();
})
|
Ajouter / supprimer une balise
|
|
// suppression du noeud id
$("#id").remove();
// detach fonctionne comme remove mais conserve les données associées à l'élément supprimé
// utilise si l'on souhaite réinsérer l'élément
id = $("#id").detach();
// ajout d'id dans main ou déplacement s'il existe déjà dans le DOM
id.appendTo($("#main"));
// autre écriture
$("#main").append(id);
|
Tableau / Array
|
|
var tableau = ["un", "deux", "trois"];
// map: projection de tableau dans nouveauTableau
var nouveauTableau = $.map(tableau, function(element, index) {
return index + ' - ' + element;
});
// each: parcourt de tableau
$.each(tableau, function(index, value) {
console.log(index + ": " + value);
});
// teste si tableau contient valeur
if ($.inArray("valeur", tableau ) > -1)
// inArray retourne l'index de l'élément, sinon -1
var first = tableau.shift(); // extrait la première valeur du tableau
var last = tableau.pop(); // extrait la dernière valeur du tableau
// tableau contenant toutes les balises input
inputArray = $('input').get()
// pour toutes les balises input
$('input').each(function(index) {
// change l'attribut value avec la valeur de tableau à l'index correspondant
$(this).attr('value', tableau[index]);
});
|
Charger un autre fichier Javascript
|
|
// équivaut à l'ajout d'une balise script dans le header
$.getScript("autre_fichier.js");
|
Exemples
Afficher la position de la souris
|
|
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function AffichePos(event) {
$("#posX").html(event.pageX);
$("#posY").html(event.pageY);
}
$(document).ready(function() {
$(document).bind("mousemove", AffichePos);
});
</script>
</head>
<body>
X : <div id=posX>0</div><br>
Y : <div id=posY>0</div><br>
</body>
|
