Le Tutoriel de jQuery
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
You have 2 options to download jQuery:
- jQuery 1.x
- jQuery 2.x
Download Results:
Créer un dossier examples, les exemples dans ce document vont être placé dans ce dossier.
La déclaration de l'utilisation de la bibliothèque jQuery:
<!-- Declaring use jquery, specify the location of your jQuery library -->
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<!-- Or use external sources -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js">
</script>
Lorsque la page Web est en état prêt, cela signifie que l'objet du document est en état prêt, jQuery va attraper cet événement par une méthode ready.
// When the document is ready.
jQuery(document).ready(function(){
alert('Hello jQuery');
});
// You can also use $ instead of jQuery.
$(document).ready(function(){
alert('Hello jQuery');
});
Considérez un exemple simple:
helloJQuery.html
<html>
<head>
<meta charset="utf-8">
<title>Hello jQuery Example</title>
<!-- (1): Declaring using JQuery library -->
<script src="../jquery-1.11.3.min.js"></script>
</head>
<body>
<h2>Hello jQuery Example</h2>
<a href="">Reset</a>
<script type="text/javascript">
jQuery(document).ready(function(){
alert("Hello jQuery");
});
</script>
</body>
</html>
L'exécution de l'exemple:
Une page HTML comprend beaucoup d'éléments (element), Selector a utilisé pour sélectionner les éléments correspondant à un critère. Par exemple, sélectionnez tous les <h1> dans la page, ou tous les <div> dans la page.
Le concept du Selector est l'un des concepts les plus importants de jQuery.
Le concept du Selector est l'un des concepts les plus importants de jQuery.
Le premier exemple, sélectionnez tout l'élément div dans le document et définissez la borderpour qu'il soit "1px solid red". Nous utilisons ici la syntaxe:
// Select all <div> elements in HTML page.
jQuery('div')
// You can replace jQuery by $
$('div')
selector_tagname.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Select elements by tagName</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div {
padding: 5px;
margin:5px;
width: 100px;
}
</style>
<script>
function selectDiv() {
$('div').css("border","1px solid red");
}
</script>
</head>
<body>
<input type="button" onclick="selectDiv();" value="Select Div"/>
<a href="">Refresh this page</a>
<div>Div1</div>
<h2>H2 tag</h2>
<div>
<div>Div3</div>
<div>Div4</div>
</div>
</body>
</html>
L'exécution de l'exemple:
La sélection des éléments par classname.
Syntaxe:
// Select all elements has classname='abc'.
jQuery('.abc')
// You can replace jQuery by $
$('.abc')
selector_classname.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Select elements by classname</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
h2, div {
padding: 5px;
margin:5px;
width: 250px;
}
</style>
<script>
function selectByClassName() {
$('.abc').css("border","1px solid red");
}
</script>
</head>
<body>
<input type="button" onclick="selectByClassName();" value="Select By ClassName"/>
<a href="">Reset</a>
<div>Div1</div>
<h2 class='abc'>H2 with class='abc'</h2>
<div>
<div class='abc'>Div3 with class='abc'</div>
<div class='abc'>Div4 with class='abc'</div>
</div>
</body>
</html>
L'exécution de l'exemple:
Au-dessus, j'ai présenté quelques exemples de Selector. Dans cette section, je vais énumérer de différentes syntaxes du Selector.
| Selector | Exemple | Sélectionnez |
|---|---|---|
| * | $("*") | Tous les éléments |
| #id | $("#lastname") | L'élément avec id="lastname" |
| .class | $(".intro") | Tous les éléments avec la classe ="intro" |
| .class,.class | $(".intro,.demo") | Tous les éléments avec la classe qui soit "intro" ou "demo" |
| element | $("p") | Tous les éléments <p> |
| el1,el2,el3 | $("h1,div,p") | Tous les éléments <h1>, <div> et <p> |
| :first | $("p:first") | Le premier élément <p> |
| :last | $("p:last") | Le dernier élément <p> |
| :even | $("tr:even") | Tous les éléments pairs<tr> |
| :odd | $("tr:odd") | Tous les éléments impairs <tr> |
| :first-child | $("p:first-child") | Tous les éléments <p> qui sont le premier enfant de leur parent |
| :first-of-type | $("p:first-of-type") | Tous les éléments <p> qui sont le premier élément <p> de leur parent |
| :last-child | $("p:last-child") | Tous les éléments <p> qui sont le dernier enfant <p> de leur parent |
| :last-of-type | $("p:last-of-type") | Tous les éléments <p> qui sont le dernier élément <p> de leur parent |
| :nth-child(n) | $("p:nth-child(2)") | Tous les éléments <p> qui sont le deuxième enfant <p> de leur parent |
| :nth-last-child(n) | $("p:nth-last-child(2)") | Tous les éléments <p> qui sont le 2ème enfant de leur parent, compte depuis le dernier enfant |
| :nth-of-type(n) | $("p:nth-of-type(2)") | Tous les éléments <p> qui sont le 2ème élément <p> de leur parent |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | Tous les éléments <p> qui sont le 2ème élément <p> de leurs parents, comptant à partir du dernier enfant |
| :only-child | $("p:only-child") | Tous les éléments <p> qui sont le seul enfant de leur parent |
| :only-of-type | $("p:only-of-type") | Tous les éléments <p> qui sont le seul enfant, de son type, de leur parent |
| parent > child | $("div > p") | Tous les éléments <p> qui sont un enfant direct d'un élément <div> |
| parent descendant | $("div p") | Tous les éléments <p> qui sont descendants d'un élément <div> |
| element + next | $("div + p") | L'élément <p> qui se trouve à côté de chaque élément <div> |
| element ~ siblings | $("div ~ p") | Tous les éléments <p> qui sont frères et sœurs d'un élément <div> |
| :eq(index) | $("ul li:eq(3)") | Le quatrième élément d'une liste (l'index commence à 0) |
| :gt(no) | $("ul li:gt(3)") | Énumérer les éléments avec un indice supérieur à 3 |
| :lt(no) | $("ul li:lt(3)") | Listez les éléments avec un indice inférieur à 3 |
| :not(selector) | $("input:not(:empty)") | Tous les éléments d'entrée qui ne sont pas vides |
| :header | $(":header") | Tous les éléments d'en-tête <h1>, <h2> .. |
| :animated | $(":animated") | Tous les éléments animés (animated elements) |
| :focus | $(":focus") | L'élément qui se focalise actuellement (has focus) |
| :contains(text) | $(":contains('Hello')") | Tous les éléments qui contiennent le texte "Hello" |
| :has(selector) | $("div:has(p)") | Tous les éléments <div> qui ont un élément <p> |
| :empty | $(":empty") | Tous les éléments qui sont vides (empty) |
| :parent | $(":parent") | Tous les éléments qui sont un parent d'un autre élément |
| :hidden | $("p:hidden") | Tous les éléments cachés <p> (hidden). |
| :visible | $("table:visible") | Toutes les tables visibles. |
| :root | $(":root") | L'élément racine du document. |
| :lang(language) | $("p:lang(de)") | Tous les éléments <p> avec une valeur d'attribut lang commençant par "de" |
| [attribute] | $("[href]") | Tous les éléments avec un attribut href |
| [attribute=value] | $("[href='default.htm']") | Tous les éléments ayant une valeur d'attribut href égale à "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") | Tous les éléments ayant une valeur d'attribut href ne sont pas égaux à "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") | Tous les éléments ayant une valeur d'attribut href se terminant par ".jpg" |
| [attribute|=value] | $("[title|='Tomorrow']") | Tous les éléments avec une valeur d'attribut de titre égale à 'Tomorrow', ou en commençant par 'Tomorrow', suivis d'un trait d'union |
| [attribute^=value] | $("[title^='Tom']") | Tous les éléments avec une valeur d'attribut de titre commençant par "Tom" |
| [attribute~=value] | $("[title~='hello']") | Tous les éléments avec une valeur d'attribut de titre contenant le mot spécifique "hello" |
| [attribute*=value] | $("[title*='hello']") | Tous les éléments avec une valeur d'attribut de titre contenant le mot "hello" |
| :input | $(":input") | Tous les éléments d'entrée (input elements) |
| :text | $(":text") | Tous les éléments d'entrée avec type="text" |
| :password | $(":password") | Tous les éléments d'entrée avec type="password" |
| :radio | $(":radio") | Tous les éléments d'entrée avec type="radio" |
| :checkbox | $(":checkbox") | Tous les éléments d'entrée avec type="checkbox" |
| :submit | $(":submit") | Tous les éléments d'entrée avec type="submit" |
| :reset | $(":reset") | Tous les éléments d'entrée avec type="reset" |
| :button | $(":button") | Tous les éléments d'entrée avec type="button" |
| :image | $(":image") | Tous les éléments d'entrée avec type="image" |
| :file | $(":file") | Tous les éléments d'entrée avec type="file" |
| :enabled | $(":enabled") | Tous les éléments d'entrée activés (enabled) |
| :disabled | $(":disabled") | Tous les éléments d'entrée desactivés (disabled) |
| :selected | $(":selected") | Tous les éléments d'entrée sélectionnés (selected) |
| :checked | $(":checked") | Tous les éléments d'entrée vérifiés (checked) |
Les règles ci-dessus sont les règles de base, vous pouvez les combiner ensemble.
Combinaison de Selector:
Règle:
- $('div') - Tous les éléments <div>.
- $('.abc') - Tous les élément avec class='abc'.
- $('#slider') - L'élément dont ID est slider
- $('div.abc') - Les élément <div> ont class='abc'.
- $('div#slider') - L'élément <div> a id ='slider'.
Règle:
- $("p:first-child") - Les éléments <p> sont le premier enfant d'un autre élément.
- $('div') - Les éléments <div>
- $("div p") - Les éléments <p> sont descendants de <div>
- $('div p:first-child') - Les éléments <p> sont le premier enfant de l'élément <div>
Exemple:
selector_firstchildofdiv.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Select First child of div</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
h2, div , p {
padding: 5px;
margin:5px;
width: 350px;
border: 1px solid blue;
}
</style>
<script>
function selectAdv() {
$('div p:first-child').css("background","#ccc");
}
</script>
</head>
<body>
<input type="button" onclick="selectAdv();" value="Select First Child of div"/>
<a href="">Reset</a>
<div>Div element</div>
<h2 class='abc'>H2 element</h2>
<div> Div element
<p class='abc'>p - first child of div</p>
<p class='abc'>p - second child of div</p>
<div class='abc'> Div element
<p>p - first child of div</p>
</div>
</div>
<div>
<div class='abc'>Div element</div>
<p class='abc'>p - second child of p</p>
</div>
</body>
</html>
L'exécution de l'exemple:
Chaque élément sur la page, avec jQuery, il aura les attributs et les méthodes qui peuvent être utilisées.
Par exemple, un élément avec des attibuts (attribute):
<!-- <a> element has two attributes href & target -->
<a href="abc.html" target="_blank">Abc.html</a>
JQuery vous fournit quelques méthodes pour obtenir la valeur de l'attribut ou définir la valeur de l'attribut
La méthode attr(name) de jQuery vous fournit d'extraire la valeurs des attributs de l'élément:
attribute_getatt.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Get Attribute</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function getAttr() {
// Get the href attribute value of the element with id = 'atag'
var hrefValue = $('#atag').attr("href");
// Set html to element with id='atag'.
$('#atag').html(hrefValue);
}
</script>
</head>
<body>
<input type="button" onclick="getAttr();" value="Get Attribute"/>
<a href="">Reset</a>
<br><br>
<a id="atag" href="http://jquery.com" target="_blank">jQuery</a>
</body>
</html>
L'exécution de l'exemple:
La méthode attr(nom, valeur) a été utilisée pour définir des valeurs pour les attributs de l'élément.
attribute_setatt.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Set Attribute</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function setAttr() {
// Setting new value for the src attribute of the img elements.
$('img').attr("src","images/jquery-mobile.png");
}
</script>
</head>
<body>
<input type="button" onclick="setAttr();" value="Set Attribute"/>
<a href="">Reset</a>
<br><br>
<img src="images/jquery.png" > <img src="images/jquery2.png" >
</body>
</html>
Exécution de l'exemple:
La méthode addClass(classes) peut être utilisée pour appliquer des feuilles de style définies sur tous les éléments correspondants. Vous pouvez spécifier plusieurs css-class séparées par espace.
attribute_applystyle.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Apply Style</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
.selected {color: red; }
.highlight {background: yellow;}
</style>
<script>
function applyStyle() {
$('h1').addClass('selected highlight');
$('h2').addClass('selected');
}
</script>
</head>
<body>
<input type="button" onclick="applyStyle();" value="Apply Style"/>
<a href="">Reset</a>
<br><br>
<h1>H1 will apply selected + highlight</h1>
<h2>H2 will apply selected</h2>
<h1>H1 will apply selected + highlight</h1>
</body>
</html>
Exécution de l'exemple:
| Numéro | Méthodes & Descriptions | Exemple |
|---|---|---|
| 1 | attr( properties ) Définit un objet clé / valeur en tant que propriétés pour tous les éléments correspondants. | $('#id').attr('href') $('a').attr({href:'a.html', alt:'a'}) |
| 2 | attr( key, fn ) Définit une propriété unique sur une valeur calculée, sur tous les éléments (element) correspondants. | $("table").attr("border", function(index) { return "1px"; }) |
| 3 | removeAttr( name ) Supprime un attribut de chacun des éléments correspondants. | $("table").removeAttr("border"); |
| 4 | hasClass( class ) Renvoie true si la class spécifiée est présente sur au moins l'un des éléments correspondants. | $('h1').hasClass('highlight') |
| 5 | removeClass( class ) Supprime toutes les classes ou les classes spécifiées de l'ensemble des éléments correspondants. | $('h1').removeClass('highlight') |
| 6 | toggleClass( class ) Ajoute la classe (class) spécifiée si elle n'est pas présente, supprime la classe spécifiée si elle est présente. | $('h1').toggleClass('highlight') |
| 7 | html( ) Obtient le contenu html (innerHTML) du premier élément correspondant. | $('a').html() |
| 8 | html( val ) Règle le contenu html de chaque élément correspondant. | $('a').html('Go to new page') |
| 9 | text( ) Obtient le contenu du texte combiné de tous les éléments correspondants. | $('div').text() |
| 10 | text( val ) Définit le contenu du texte de tous les éléments correspondants | $('div').text('Text content') |
| 11 | val( ) Obtient la valeur d'entrée du premier élément apparié. | $("input").val(); |
| 12 | val( val ) Définissez l'attribut de valeur de chaque élément correspondant s'il est appelé <input>, mais s'il est appelé <select> la valeur va passer à la valeur <option>, l'option passée serait sélectionnée, si elle est appelée case à cocher ou boîte radio alors toute la case à cocher correspondante et la boîte de réception sont vérifiées. | $("input").val('New value'); |
JQuery traversing, qui signifie "move through", sert à "trouver" (ou sélectionner) des éléments HTML en fonction de leur relation avec d'autres éléments. Commencez par une sélection et passez par cette sélection jusqu'à ce que vous atteigniez les éléments que vous désirez.
Considérons un document HTML et il est transformé en une structure DOM (arborescence).
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h3>jQuery Traversing</h3>
<div>
<ul>
<li>Java</li>
<li>.Net</li>
<li>PHP</li>
</ul>
</div>
</body>
</html>
Un ancêtre (ancestor element) est un parent, un grand-parent, un arrière-grand-parent, etc.
Avec jQuery, vous pouvez parcourir (traverse up) l'arborescence DOM pour trouver les ancestors d'un élément.
JQuery qui a plusieurs méthodes vous permet de déplacer vers le haut (traverser) les nœuds DOM supérieurs (Ancetors).
- parent()
- parents()
- parentsUntil()
La méthode parent() renvoie l'élément parent direct de l'élément sélectionné.
Par exemple, pour trouver tous les éléments parents de l'élément ont class='abc'.
traversing_parent.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;}
.abc {border: 1px solid red;}
</style>
<script>
function highlightParent() {
$('.abc').parent().css("background","#ccc");
}
</script>
</head>
<body>
<h3>jQuery Traversing - parent </h3>
<input type="button" onclick="highlightParent();" value="Highlight parent of element with class='abc'"/>
<a href="">Reset</a>
<div>
<ul>
<li class='abc'>li class='abc' </li>
<li>li element</li>
<li>li element</li>
</ul>
</div>
<div>
<div class='abc'>Div class='abc'</div>
</div>
</body>
</html>
Exécution de l'exemple:
La méthode parents() renvoie tous les éléments ancêtres (ancestor) de l'élément sélectionné, jusqu'à l'élément racine du document (<html>).
Par exemple, recherchez tout l'élément <div> qui est l'ancêtre de l'élément a class= 'abc'.
traversing_parents.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;}
.abc {border: 1px solid red;}
</style>
<script>
function highlightParents() {
$('.abc').parents('div').css("background","#ccc");
}
</script>
</head>
<body>
<h3>jQuery Traversing - parent </h3>
<input type="button" onclick="highlightParents();" value="Highlight DIV ancestors of element with class='abc'"/>
<a href="">Reset</a>
<div>
<ul>
<li class='abc'>li class='abc' </li>
<li>li element</li>
<li>li element</li>
</ul>
</div>
<div>
<div class='abc'>Div class='abc'</div>
</div>
</body>
</html>
Exécution de l'exemple:
Le mode of parentsUntil() renvoie tous les éléments ancêtres entre 2 éléments, y compris les éléments sélectionnés et l'élément déterminé dans le paramètre.
Par exemple, trouvez des éléments ancêtres de <h2> jusqu'à ce que le <div> soit pris:
traversing_parentsUntil.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - parentsUntil</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightParentsUntil() {
$('h2').parentsUntil('div').css("border","2px solid red");
}
</script>
</head>
<body>
<h3>jQuery Traversing - parentsUtil</h3>
<p>$('h2').parentsUntil('div').css("border","2px solid red");</p>
<input type="button" onclick="highlightParentsUntil();"
value="Highlight ancestors elements between H2 and DIV"/>
<a href="">Reset</a>
<div> div element
<ul> ul element
<li>
li element
<h2>h2 element</h2>
</li>
<li>li element</li>
</ul>
</div>
</body>
</html>
Exécution de l'exemple:
Rechercher les éléments descendants des éléments sélectionnés (enfant, petit-enfant, ...)
jQuery vous fournit 2 méthodes:
- children()
- find()
La méthode children() renvoie tous les enfants directs de l'élément sélectionné.
Par exemple, soulignez (highlight) les éléments enfants des éléments <div>.
traversing_children.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - children</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightChildren() {
$('div').children().css("border","2px solid red");
}
</script>
</head>
<body>
<h3>jQuery Traversing - children</h3>
<p>$('div').children().css("border","2px solid red");</p>
<input type="button" onclick="highlightChildren();"
value="Highlight children of DIV"/>
<a href="">Reset</a>
<div> div element
<h2>h2 element</h2>
<ul>
ul element
<li>li element</li>
<li>li element</li>
</ul>
</div>
</body>
</html>
Exécution de l'exemple:
Trouvez l'élément approprié dans l'ensemble des éléments descendants parmi des éléments sélectionnés.
Par exemple, recherchant les éléments <h2> qui sont descendants des éléments <div>
traversing_find.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - find</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightFind() {
$('div').find('h2').css("border","2px solid red");
}
</script>
</head>
<body>
<h3>jQuery Traversing - find</h3>
<p>$('div').find('h2').css("border","2px solid red");</p>
<input type="button" onclick="highlightFind();"
value="Highlight descendants H2 of DIV"/>
<a href="">Reset</a>
<h2>h2 element</h2>
<div> div element
<h2>h2 element</h2>
<ul>ul element
<li>li element
<h2>h2 element</h2>
</li>
<li>li element</li>
</ul>
</div>
</body>
</html>
Exécution de l'exemple:
Recherchez l'élément frère, qui a le même élément parent avec l'élément actuel.
JQuery vous fournit un certain nombre de méthodes de recherche d'éléments de frères et sœurs (sibling elements).
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
nextUntil(..) & prevUntil(..):
Des méthodes:
| Méthode | Description | Exemple |
| siblings([selector]) | La méthode siblings() renvoie tous les éléments frère de l'élément sélectionné. | $('h2').siblings() |
| next([selector]) | La méthode next() renvoie l'élément frère suivante de l'élément sélectionné. | $('h2').next() |
| prev([selector]) | La méthode prev() renvoie l'élément frère précédent de l'élément sélectionné. | $('h2').prev() |
| nextAll([selector]) | La méthode nextAll() renvoie tous les éléments frères suivants de l'élément sélectionné. | $('h2').nextAll() |
| prevAll([selector]) | La méthode prevAll() renvoie tous les éléments frères précédents de l'élément sélectionné. | $('h2').prevAll() |
| nextUntil(selector) | La méthode nextUntil() renvoie tous les éléments frères de la prochaine entre deux arguments donnés. | $('h2').nextUntil('h4.blue') |
| prevUntil(selector) | La méthode prevUntil() renvoie tous les éléments frères précédents entre deux arguments donnés. | $('h2').prevUntil('h1') |
L'exemple suivant illustre l'utilisation de ces méthodes:
- siblings(), next(), prev(), nextAll(), prevAll(), nextUntil(), prevUntil().
traversing_siblings.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - siblings</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
h1, h2, h4, p, div {padding: 5px; margin: 5px; border: 1px solid black;}
h2 {border: 2px solid red;}
.blue {border: 2px solid blue;}
</style>
<script>
function clearAll() {
$('h1, h2, h4, p, div').css("background","white");
}
function highlightSiblings() {
clearAll();
$('h2').siblings().css("background","yellow");
}
function highlightNext() {
clearAll();
$('h2').next().css("background","yellow");
}
function highlightNextAll() {
clearAll();
$('h2').nextAll().css("background","yellow");
}
function highlightNextUntil() {
clearAll();
$('h2').nextUntil('h4.blue').css("background","yellow");
}
function highlightPrev() {
clearAll();
$('h2').prev().css("background","yellow");
}
function highlightPrevAll() {
clearAll();
$('h2').prevAll().css("background","yellow");
}
function highlightPrevUntil() {
clearAll();
$('h2').prevUntil('h1').css("background","yellow");
}
</script>
</head>
<body>
<h3>jQuery Traversing - siblings</h3>
<input type="button" onclick="highlightSiblings();" value="siblings()"/>
<input type="button" onclick="highlightNext();" value="next()"/>
<input type="button" onclick="highlightPrev();" value="prev()"/>
<input type="button" onclick="highlightNextAll();" value="nextAll()"/>
<input type="button" onclick="highlightPrevAll();" value="prevAll()"/>
<input type="button" onclick="highlightNextUntil();" value="nextUntil()"/>
<input type="button" onclick="highlightPrevUntil();" value="prevUntil()"/>
<a href="">Reset</a>
<div>div element
<h1 class='blue'>h1 element (Until)</h1>
<div>div element</div>
<div>div element</div>
<h2>h2 element (current)</h2>
<p>p element</p>
<div>div element
<br>
<p style="background:white;">p element</p>
</div>
<h1>h1 element</h1>
<h4>h4 element</h4>
<h4 class='blue'>h4 element class='blue' (Until)</h4>
<div>div element</div>
</div>
</body>
</html>
Exécution de l'exemple:
Des méthodes:
| Méthode | Description | Exemple: |
| eq(index) | La méthode eq() renvoie un élément avec un nombre d'index spécifique des éléments sélectionnés. | $('p').eq(1) |
| filter(selector) | La méthode filter() vous permet de spécifier un critère. Les éléments qui ne correspondent pas aux critères sont supprimés de la sélection et ceux qui correspondent seront renvoyés. | $('p').filter('.abc') |
| filter(fn) | Supprime tous les éléments de l'ensemble des éléments correspondants qui ne correspondent pas à la fonction spécifiée. | |
| first() | La méthode first() renvoie le premier élément des éléments sélectionnés. | $('p').first() |
| has() | ||
| is(selector) | Vérifie la sélection actuelle contre une expression et renvoie true si au moins un élément de la sélection correspond au sélecteur donné. | |
| last() | La méthode last() renvoie le dernier élément des éléments sélectionnés. | $('p').last() |
| map(callback) | Traduit un ensemble d'éléments dans l'objet jQuery dans un autre ensemble de valeurs dans un tableau jQuery (qui peut ou peut ne pas contenir d'éléments). | |
| not(selector) | La méthode not() renvoie tous les éléments qui ne correspondent pas aux critères. | |
| slice(start,[end]) | Sélectionne un sous-ensemble des éléments correspondants | $('p').slice(1, 4) $('p').slice(2) |
La méthode eq(index) renvoie un élément avec un nombre d'index spécifique des éléments sélectionnés.
Les nombres d'index commencent à 0, donc le premier élément aura le numéro d'index 0 et pas 1
Par exemple, trouvez le deuxième élément <p> (l'index est 1).
// Tìm phần tử <p> thứ 2
$("p").eq(1);
La méthode filter(selector) vous permet de spécifier un critère. Les éléments qui ne correspondent pas aux critères sont supprimés de la sélection et ceux qui correspondent seront renvoyés.
L'exemple suivant renvoie tous les éléments <h3> avec classname est "abc":
$("h3").filter(".abc");
Supprime tous les éléments de l'ensemble des éléments correspondants qui ne correspondent pas à la fonction spécifiée.
Les arguments de la fonction:
// Function
Function( Integer index, Element element ) => Boolean
Exemple:
$('h4').filter(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
Voir l'exemple complet:
traversing_filter_fn.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - filter(fn)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightFilter() {
$('h4').filter(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
}
</script>
</head>
<body>
<h3>jQuery Traversing - filter(fn)</h3>
<input type="button" onclick="highlightFilter();"
value="Highlight filter(fn)"/>
<a href="">Reset</a>
<h4>h4 element (index = 0)</h4>
<h4>h4 element (index = 1)</h4>
<p>p element</p>
<h4 class="highlight">h4 element with class = 'highlight' (index = 2)</h4>
<h4>h4 element (index = 3)</h4>
</body>
</html>
Exécution de l'exemple:
La méthode not(selector) renvoie tous les éléments qui ne correspondent pas aux critères.
Par exemple, cherchez les éléments <p> qui ne contiennent pas class = 'abc'.
$('p').not('.abc')
La méthode not(fn) renvoie tous les éléments qui ne correspondent pas à la fonction fn.
Les argments de fonction:
// Function
Function( Integer index, Element element ) => Boolean
Exemple:
$('h4').not(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
Voir l'exemple complet:
traversing_not_fn.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - not(fn)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightNot() {
$('h4').not(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
}
</script>
</head>
<body>
<h3>jQuery Traversing - not(fn)</h3>
<input type="button" onclick="highlightNot();"
value="Highlight not(fn)"/>
<a href="">Reset</a>
<h4>h4 element (index = 0)</h4>
<h4>h4 element (index = 1)</h4>
<p>p element</p>
<h4 class="highlight">h4 element with class = 'highlight' (index = 2)</h4>
<h4>h4 element (index = 3)</h4>
</body>
</html>
Exécution de l'exemple:
Exemple:
Renvoyer tous les éléments <div> qui contiennent un élément <p> à l'intérieur:
Renvoyer tous les éléments <div> qui contiennent un élément <p> à l'intérieur:
$("div").has("p")
traversing_has.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - has(selector)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
p, div {padding: 5px; margin: 5px; border: 1px solid blue; width: 300px;}
</style>
<script>
function highlightHas() {
$('div').has("p").css('border','2px solid red');
}
</script>
</head>
<body>
<h3>jQuery Traversing - has(selector)</h3>
<p>$("div").has("p").css('border','2px solid red');</p>
<input type="button" onclick="highlightHas();"
value="Highlight has(selector)"/>
<a href="">Reset</a>
<div>div element
<div>div element
<p>p element</p>
</div>
</div>
<div>div element
<p>p element</p>
</div>
</body>
</html>
Exécution de l'exemple:
Les événements sont soutenus dans le modèle DOM:
| Des types de l'événement | Événement | Description |
| MOUSE EVENT | click | Se produit lorsqu'un clic de souris. |
| dblclick | Se produit lorsqu'un double clic de souris. | |
| mouseenter | Se produit lorsque la souris entre dans une région d'élément. | |
| mouseleave | Se produit lorsque la souris sort d'une région d'élément. | |
| KEYBOARD EVENT | keypress | Se produit lorsque la touche est pressée et relâchée. |
| keydown | Se produit lorsque la touche est pressée. | |
| keyup | Se produit lorsque la touche est relâchée. | |
| FORM EVENT | submit | Se produit lorsque le formulaire est soumis. (submit) |
| change | Se produit lorsque l'élément (element) change. | |
| focus | Se produit lorsque l'élément s'est focalisé. | |
| blur | Se produit lorsque l'élément ne s'est plus focalisé. | |
| DOCUMENT/WINDOW EVENT | load | Se produit lorsque le document (document) est chargé. |
| resize | Se produit lorsque la fenêtre (window) est redimensionnée. | |
| scroll | Se produit lorsque la fenêtre se défile. | |
| unload | Se produit lorsque le document est déchargé (unloaded). | |
| error | Se produit lors d'une erreur de chargement ou de déchargement (loading or unloading), etc.. | |
Vous devez attacher (bind) une fonction avec un certain événement d'élément. Lorsque les événements se produisent, cette fonction sera exécutée. Les exemples attachant une fonction à l'événement cliquent sur tous les éléments <h3>.
// At the moment the page is ready
$(document).ready(function() {
// Attach an event handler to the "click" event of h3 elements.
$("h3").click(function() {
// Use $(this) to refer element fire this event. (h3)
$(this).css("background:#ccc");
});
// Attach an event handler to the "dblclick" event of h4 elements.
$("h4").dblclick(function(){
// Use $(this) to refer element fire this event. (h4)
$(this).css("background:yellow");
});
});
event_helloworld.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event - Hello World example</title>
<style>
h3 {border: 1px solid blue; padding: 5px; width: 200px;}
h4 {border: 1px solid red; padding: 5px; width: 200px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
// At the moment the page is ready
$(document).ready(function() {
// Attach an event handler to the "click" event of h3 elements.
$("h3").click(function(){
// Use $(this) to refer element fire this event. (h3)
$(this).css("background","#ccc");
});
// Attach an event handler to the "dblclick" event of h4 elements.
$("h4").dblclick(function() {
// Use $(this) to refer element fire this event. (h4)
$(this).css("background","yellow");
});
});
</script>
</head>
<body>
<h2>jQuery Event - Hello World example</h2>
<a href="">Reset</a>
<h3>H3 - Click me!</h3>
<h3>H3 - Click me!</h3>
<h4>H4 - Double Click me!</h4>
</body>
</html>
Exécution de l'exemple:
Vous pouvez utiliser bind() pour joindre un gestionnaire à un événement pour des éléments.
Syntaxe:
selector.bind( eventType[, eventData], handler)
- eventType − Une chaîne contenant un type d'événement JavaScript, tel que click, submit,.... Voir la liste des événements dans le tableau ci-dessus.
- eventData − Ceci est un paramètre optionnel est une carte (map) de données qui sera transmise au gestionnaire d'événements (event handler).
- handler − Une fonction à exécuter chaque fois que l'événement est déclenché..
Exemple:
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
Vous pouvez utiliser la méthode unbind() pour supprimer le gestionnaire d'événement (event handler)
Syntaxe:
selector.unbind(eventType, handler)
// or
selector.unbind(eventType)
- eventType − Une chaîne (string) contenant un type d'événement JavaScript, tel que click, submit,...
- handler − Si fourni, identifie l'auditeur spécifique qui doit être supprimé.
event_bind_unbind.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event - bind()/unbind() example</title>
<style>
h3 {border: 1px solid blue; padding: 5px; width: 300px;}
h4 {border: 1px solid red; padding: 5px; width: 300px;}
p {border: 1px solid green; padding: 5px; width: 300px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
// At the moment the page is ready
$(document).ready(function() {
// Bind an event handler to the "click" event of h3 elements.
$("h3").bind('click', function() {
$(this).css("background","#ccc");
});
// Bind an event handler to the "dblclick" event of h4 elements.
$("h4").bind('dblclick', function(){
$(this).css("background","yellow");
});
$("p").bind('click', function() {
// Remove the event handler click on h3.
$("h3").unbind("click");
$("h3").text("click handler removed!");
$("h3").css("background", "white");
});
});
</script>
</head>
<body>
<h2>jQuery Event - bind()/unbind() example</h2>
<a href="">Reset</a>
<h3>H3 - Click me!</h3>
<h3>H3 - Click me!</h3>
<h4>H4 - Double Click me!</h4>
<p>Click to remove click handler in h3</hp>
</body>
</html>
Exécution de l'exemple:
| S.NO. | Attribut | Description |
|---|---|---|
| 1 | altKey | Renvoie true si la touche Alt a été pressée lorsque l'événement a été déclenché, si non, il renvoie false. La touche Alt est intitulée Option sur la plupart des claviers Mac. |
| ctrlKey | Renvoie true si la touche Ctrl est pressée lorsque l'élément a été déclenché, so non il renvoie false. | |
| 3 | data | La valeur, le cas échéant, a passé comme deuxième paramètre à la commande bind() lorsque le gestionnaire a été établi. |
| 4 | keyCode | Pour l'événement keyup ou keydown, cela renvoie la touche qui a été pressée. |
| 5 | metaKey | Renvoie true si la touche Meta a été pressée lorsque l'événement a été déclenché, si non, il renvoie false. La touche Meta est intitulée Ctrl sur les PC et la touche Command sur Mac. |
| 6 | pageX | Pour les événements de souris, spécifie la coordonnée horizontale de l'événement par rapport à l'origine de la page. |
| 7 | pageY | Pour les événements de souris, spécifie la coordonnée verticale de l'événement par rapport à l'origine de la page. |
| 8 | relatedTarget | Pour certains événements de souris, identifie l'élément que le curseur a laissé ou est entré lorsque l'événement a été déclenché. |
| 9 | screenX | Pour les événements de souris, spécifie la coordonnée horizontale de l'événement par rapport à l'origine de l'écran. |
| 10 | screenY | Pour les événements de souris, spécifie la coordonnée verticale de l'événement par rapport à l'origine de l'écran. |
| 11 | shiftKey | Renvoie true si la touche Shift a été pressée lorsque l'événement a été déclenché, si non, il renvoie false. |
| 12 | target | Identifie l'élément pour lequel l'événement a été déclenché. |
| 13 | timeStamp | L'horodatage (en millisecondes) lorsque l'événement a été créé. |
| 14 | type | Pour tous les événements, spécifie le type d'événement qui a été déclenché (par exemple, click). |
| 15 | which | Pour les événements de clavier, spécifie le code numérique (numeric code) de la clé qui a causé l'événement et pour les événements de souris, spécifie le bouton qui a été pressé (1 pour gauche, 2 pour le milieu, 3 pour droite). |
Voir l'exemple:
event_attribute.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event attribute example</title>
<style>
div {margin : 10px; width: 250px; height: 150px; float: left; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(event) {
var s="Type = "+ event.type+ "<br>"
+"pageX = "+ event.pageX+"<br>"
+"pageY = "+ event.pageY+"<br>"
+"screenX = "+ event.screenX+"<br>"
+"screenY = "+ event.screenY+"<br>"
+"which = "+ event.which+"<br>"
+"target = "+ event.target.innerHTML+"<br>"
;
$('div#log').html(s);
});
});
</script>
</head>
<body>
<h2>jQuery Event attribute example</h2>
<div style="background:blue;">
DIV 1
</div>
<div style="background:red;">
DIV 2
</div>
<hr style="clear:both;"/>
<div id="log" style="border:1px solid #ccc;padding:10px;width:550px;">
</div>
</body>
</html>
Exécution de l'exemple:
| No. | Méthode | Description |
|---|---|---|
| 1 | preventDefault() | Empêche le navigateur d'exécuter l'action par défaut. |
| 2 | isDefaultPrevented() | Renvoie true si event.preventDefault() a été appelé. |
| 3 | stopPropagation() | Arrête l'effervescence d'un événement aux éléments parent, empêchant tout gestionnaire parent d'être informé de l'événement. |
| 4 | isPropagationStopped() | Renvoie true si event.stopPropagation() a été appelé dans cet événement. |
| 5 | stopImmediatePropagation() | Empêche le reste des gestionnaires d'être exécuté. |
| 6 | isImmediatePropagationStopped() | Renvoie true si event.stopImmediatePropagation() a été appelé dans cet événement. |
Par exemple, lorsque vous cliquez avec le bouton droit sur la page Web, la fenêtre contextuelle par défaut s'affiche. Vous pouvez utiliser preventDefault() pour empêcher l'action par défaut du navigateur.
// Hủy hiển thị của sổ contextmenu khi nhấn phải chuột vào thẻ div có id= div2
$("div").bind('contextmenu', function(event) {
if( $(this).attr('id') == "div2") {
event.preventDefault();
}
});
// Huỷ hành động mặc định khi nhấn vào thẻ <a>
$("a").click(function(event) {
event.preventDefault();
alert("a element not working!!");
});
Voir l'exemple complet:
event_preventDefault.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event preventDefault()</title>
<style>
div {margin : 10px; padding:5px; width: 250px; height: 150px; float: left; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("div").bind('contextmenu', function(event) {
if( $(this).attr('id') == "div2") {
event.preventDefault();
}
});
$("a").click(function(event) {
event.preventDefault();
alert("a element not working!!");
});
});
</script>
</head>
<body>
<h2>jQuery Event preventDefault() example: Disable contextmenu on right click</h2>
<a href="http://jquery.com">Go to jQuery.com (Not working)</a>
<br>
<div style="background:blue;" id="div1">
Right-click to show context menu
</div>
<div style="background:red;" id="div2">
Disable context menu
</div>
</body>
</html>
Exécution de l'exemple:
event_stopPropagation.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event stopPropagation()</title>
<style>
div {margin : 20px; padding:5px; float: left; }
.outerDiv {background: red; width: 250px; height: 150px; }
.innerDiv {background: yellow; width: 250px; height: 100px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("div").click( function(event) {
if( $(this).attr('id') == "stopDiv") {
event.stopPropagation();
}
alert("click "+ $(this).html());
});
});
</script>
</head>
<body>
<h2>jQuery Event stopPropagation() example</h2>
<div class="outerDiv">
Outer Div
<div class="innerDiv">
Inner Div
</div>
</div>
<div class="outerDiv">
Outer Div
<div class="innerDiv" id="stopDiv">
Inner Div (stopPropagation)
</div>
</div>
</body>
</html>
Exécution de l'exemple:
