Généralités
jQuery est un framework JavaScript.
Installation
|
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
![](/images/d/dc/Warn.png) |
- utiliser la balise fermante et non la forme contractée />
- ne pas ajouter de code JavaScript entre les balises
|
|
$("#id")
$(".class")
$("div")
$("div > a")
$("#id").next()
$("#id").parent()
$("#id").siblings()
|
![](/images/d/dc/Warn.png) |
Équivalent de document.getElementById("id") : $("#id")[0] |
Obtenir ou modifier le contenu d'un balise (InnerHtml)
|
var contenu = $("#id").html();
$("#id").html(NouveauContenu);
|
html
Obtenir ou modifier le style
|
var backgroundColor = $("#id").css("background-color");
$("#id").css("background-color", "black");
|
![](/images/d/dc/Warn.png) |
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 |
css
Obtenir ou modifier un attribut
|
var attribut_value = $('#id').attr('nom de l attribut');
$('#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
|
$(document).mousemove(MonHandler);
$(document).bind("mousemove", MonHandler);
$(document).unbind("mousemove");
$(document).unbind("mousemove", MonHandler);
|
bind
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() {
});
$(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() {
$(this)
});
|
Simuler un click
|
$('.path > .to > .element > a')[0].click();
|
mouseover / mouseleave
|
$("#id").mouseover(function () {
$("#id2").fadeIn();
})
$("#id").mouseleave(function () {
$("#id2").fadeOut();
})
|
Ajouter / supprimer une balise
|
$("#id").remove();
id = $("#id").detach();
id.appendTo($("#main"));
$("#main").append(id);
|
append
appendTo
remove
detach
|
var tableau = ["un", "deux", "trois"];
var nouveauTableau = $.map(tableau, function(element, index) {
return index + ' - ' + element;
});
$.each(tableau, function(index, value) {
console.log(index + ": " + value);
});
if ($.inArray("valeur", tableau ) > -1)
var first = tableau.shift();
var last = tableau.pop();
inputArray = $('input').get()
$('input').each(function(index) {
$(this).attr('value', tableau[index]);
});
|
Charger un autre fichier Javascript
|
$.getScript("autre_fichier.js");
|
getScript
Javascript
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>
|