Premier pas
L'un des intérêts du JavaScript est de manipuler les éléments du DOM.
Pour atteindre ces éléments, nous avons différentes méthodes :
document.getElementById(identifiant)
document.getElementsByName(Nom)
document.getElementsByTagName(Tag)
document.querySelector(selector)
document.querySelectorAll(selector)
Une fois l'élément atteint, nous avons plusieurs méthodes qui permettent de les manipuler individuellement.
jQuery va plus loin, il nous offre une méthode qui permet d'atteindre plus précisément les éléments du DOM.
De plus les méthodes de l'objet jQuery peuvent être affectées en une seule fois à l'ensemble des éléments atteints, contrairement à JavaScript où l'on doit boucler sur l'ensemble des éléments.
Méthode : $(element| elementArray)
Un objet jQuery peut être créé à partir d'un élément du DOM ou d'un tableau d'éléments.
$(document.body), $(document.getElementById("paragraphe")), $(document.getElementsByTagName("img")), $(this)
Exemple de codage :
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<div id='zone'>
<img id="image1" alt='image1' src='images/image1.gif'/>
<img id="image2" alt='image2' src='images/image2.gif'/>
<img id="image3" alt='image3' src='images/image3.gif'/>
</div>
<script src="js/jquery.js"></script>
</body>
</html>
$(document.getElementsByTagName('img')).css("border", "solid 2px red");
$(document.getElementById('zone')).css("border", "solid 2px green") ;
Met une bordure rouge aux images et une bordure verte à la balise zone.
Méthode : $(selector)
Un objet jQuery peut être créé à partir d'un sélecteur de type CSS (voir selector)
$("#paragraphe"), $(".classe"), $("div p a.lien")
Exemple de codage :
<html>
<head>
<title>JavaScript</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id='zone'>
<img id="image1" alt='image1' src='images/image1.gif'/>
<img id="image2" alt='image2' src='images/image2.gif'/>
<img id="image3" alt='image3' src='images/image3.gif'/>
</div>
<img id="image4" alt='image3' src='images/image4.gif'/>
</body>
</html>
$("#zone img").css("border", "solid 2px red");
Met une bordure rouge aux images de la balise zone.
Méthode : $(jQuery)
Un objet jQuery peut être créé à partir d'un autre objet jQuery.
$($("p")), $($("p").eq(1))