La fonction jQuery() (ou son équivalent simplifié la fonction $()) est la fonction de base du framework, c'est elle que vous serez amené à utiliser le plus souvent. Il est donc important de connaître en détail son fonctionnement. Il existe 4 utilisations différentes pour la fonction jQuery qui vont vous permettre notamment de récupérer un élément HTML de votre page ou encore créer un nouvel élément HTML dans votre page.
Cette fonction prend un premier argument qui est une chaîne de caractères représentant un sélecteur CSS. Elle vous permet de filtrer les éléments que vous souhaitez récupérer. Le deuxième argument est facultatif et représente le contexte de recherche. Par défaut, la recherche est effectuée dans le document HTML tout entier mais vous pouvez spécifier un contexte plus précis comme élément du DOM ou un objet jQuery
Nous récupérons les titres h4 contenus dans la div identifiée par 'demo1' pour leur appliquer une bordure basse
$("div#demo1 h4").css({'border-bottom':'1px solid #000'});
//équivalent Ã
//jQuery("div#demo1 h4").css({'border-bottom':'1px solid #000'});
le titre ci-dessus est dans la div donc a une de bordure basse
le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#demo1 h4 ").css({'border-bottom':'1px solid #000'});
});
</script>
</head>
<body>
<div id="demo1">
<h4>Titre h4 dans la div</h4>
<p>le titre ci-dessus est dans la div donc a une de bordure basse</p>
</div>
<h4>Titre h4 hors div</h4>
<p>le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse</p>
</body>
</html>
Mais si nous voulons faire un traitement sur la div avant de mettre une bordure au titre h4, nous pouvons utiliser le paramètre facultatif "contexte".
Nous indiquons que notre variable contexte sera la div identifiée par 'demo2'. Ensuite nous lui ajoutons un fond gris puis nous recherchons dans le contexte, c'est à dire dans la div identifiée par 'demo2' tous les titres h4 pour leur appliquer une bordure basse.
var contexte;
contexte= $("div#demo2");
contexte.css({'background':'#999'});
$("h4",contexte).css({'border-bottom':'1px solid #000'});
le titre ci-dessus est dans la div donc a une de bordure basse
le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var contexte;
contexte= $("div#demo2");
contexte.css({'background':'#999'});
$("h4",contexte).css({'border-bottom':'1px solid #000'});
});
</script>
</head>
<body>
<div id="demo2">
<h4>Titre h4 dans la div</h4>
<p>le titre ci-dessus est dans la div donc a une de bordure basse</p>
</div>
<h4>Titre h4 hors div</h4>
<p>le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse</p>
</body>
</html>
Cette fonction prend un premier argument qui est une chaîne de caractères représentant du code HTML. Elle vous permet de créer un élément HTML (élément du DOM ) de manière dynamique dans votre page. Le deuxième argument est facultatif et représente le document dans lequel les nouveaux éléments seront crées.
Nous allons créer un lien qui permettra d'ajouter à chaque clic un nouveau champ à notre formulaire
$("#demo3 a.add").click(function(){
$("<input type='text'></input>").appendTo($("#demo3 form"));
return false;
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#demo3 a.add").click(function(){
$("<input type='text'></input>;").appendTo($("#demo3 form"));
return false;
});
});
</script>
</head>
<body>
<div id="demo3">
<a href="#" class="add">ajouter un champ</a>
<form>
<input type='text'></input>
</form>
</div>
</body>
</html>
Cette fonction prend en argument une autre fonction. Elle permet de s'assurer que la fonction passée en paramètre sera exécutée uniquement lorsque tous les éléments de votre page HTML seront chargés et donc prêts à être manipulés. Elle est donc équivalente à la fonction vu précédemment $(document).ready() et peut donc être utilisée comme écriture simplifiée. Il est à noter que la fonction $(fonction) de même que la fonction $(document).ready() peuvent être utilisées autant de fois que voulu sur la même page.
$(function(){
// Les éléments de la page HTML sont chargés et peuvent être manipulés
});
est équivalent Ã
$(document).ready(function(){
// Les éléments de la page HTML sont chargés et peuvent être manipulés
});
Cette fonction prend en argument un ou plusieurs éléments du DOM. Elle permet d'étendre les fonctionnalités d'un élément en lui ajoutant les propriétés jQuery.
Par exemple pour définir la couleur de fond de l'élément body
$(document.body).css( "background", "#000" );
On peut également utiliser la fonction pour plusieurs éléments en passant par un tableau. Ici, on souhaite inhiber tous les champs d'un formulaire
Inhibition des champs du formulaire dont l'identifiant est "contact"
$(document.forms['contact'].elements).attr("disabled","disabled").css("background","#333");
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(document.forms['contact'].elements).attr("disabled","disabled").css("background","#333");
});
</script>
</head>
<body>
<form id="contact">
<p>
<label for="nom">Nom</label>
<input type='text' id="nom"></input>
</p>
<p>
<label for="prenom">Prenom</label>
<input type='text' id="prenom"></input>
</p>
<p>
<label for="email">Email</label>
<input type='text' id="email"></input>
</p>
</form>
</body>
</html>
Comments
merci pour cette doc
elle m a bien aidée pour comprendre les bases Jquery
vivement les suivantes
merci pour ton commentaire^^
ça motive pour continuer