{"id":124,"date":"2021-03-12T10:35:47","date_gmt":"2021-03-12T10:35:47","guid":{"rendered":"https:\/\/kaay-coder.2sweb.sn\/kc\/?page_id=124"},"modified":"2022-04-03T01:18:24","modified_gmt":"2022-04-03T01:18:24","slug":"jquery","status":"publish","type":"page","link":"https:\/\/kaay-coder.2sweb.sn\/kc\/frameworks\/jquery\/","title":{"rendered":"jQuery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"124\" class=\"elementor elementor-124\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d0f9fc3 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"d0f9fc3\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8c4e5ec\" data-id=\"8c4e5ec\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c4a0793 elementor-widget elementor-widget-image\" data-id=\"c4a0793\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/jquery-illustration.png\" class=\"attachment-2048x2048 size-2048x2048 wp-image-536\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/jquery-illustration.png 800w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/jquery-illustration-300x113.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/jquery-illustration-768x288.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d855a64 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d855a64\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-11b4ac9\" data-id=\"11b4ac9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8e068db elementor-widget elementor-widget-toggle\" data-id=\"8e068db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"toggle.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1481\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-1481\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Qu'est ce que jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1481\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-1481\"><ul><li>Une biblioth\u00e8que javascript open-source et cross-browser<\/li><li>Elle permet de traverser et manipuler tr\u00e8s facilement l&#8217;arbre DOM des pages web \u00e0 l&#8217;aide d&#8217;une syntaxe fortement similaire \u00e0 celle d&#8217;XPath.<\/li><li>JQuery permet par exemple de changer\/ajouter une classe CSS, cr\u00e9er des animations, modifier des attributs, etc.<\/li><li>G\u00e9rer les \u00e9v\u00e9nements javascript<\/li><li>Faire des requ\u00eates AJAX simplement<\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1482\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-1482\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Pourquoi utiliser jQuery\u00a0?<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1482\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-1482\"><p>Utiliser jQuery va donc pouvoir \u00eatre tr\u00e8s avantageux pour nous \u00e0 deux niveaux diff\u00e9rents : on va d\u2019une part gagner beaucoup de temps de d\u00e9veloppement en utilisant les outils mis \u00e0 notre disposition par cette librairie et d\u2019autre part \u00eatre assur\u00e9 de la validit\u00e9 de notre code. En effet, les cr\u00e9ateurs de jQuery s\u2019occupent de la validit\u00e9 parfaite de leur code pour l\u2019ensemble des navigateurs les plus utilis\u00e9s. En utilisant jQuery, nous n\u2019avons donc plus \u00e0 nous soucier de la compatibilit\u00e9 inter-navigateurs et interversions de notre code puisque les cr\u00e9ateurs de jQuery ont d\u00e9j\u00e0 r\u00e9fl\u00e9chi \u00e0 ce probl\u00e8me \u00e0 notre place.<\/p><p>jQuery ne doit pas \u00eatre vu comme une alternative au JavaScript mais plut\u00f4t comme un ajout : nous allons utiliser jQuery au c\u00f4t\u00e9 du JavaScript classique dans nos scripts. Par ailleurs, jQuery ne dispense pas et ne doit pas remplacer l\u2019apprentissage du JavaScript ni \u00eatre vu comme un \u00ab raccourci \u00bb pour apprendre le JavaScript.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1483\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-1483\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Inclure la biblioth\u00e8que jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1483\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-1483\"><h5>T\u00e9l\u00e9charger et inclure jQuery<\/h5><p>jQuery est une librairie JavaScript, c\u2019est-\u00e0-dire un ensemble de code pr\u00eats \u00e0 l\u2019emploi. Pour pouvoir utiliser ces codes, il va falloir les inclure d\u2019une fa\u00e7on ou d\u2019une autre dans nos pages. La premi\u00e8re mani\u00e8re de faire cela va \u00eatre d\u2019aller sur le\u00a0<a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">site officiel de jQuery<\/a> et de t\u00e9l\u00e9charger la derni\u00e8re version jQuery disponible en date. Sur la page de t\u00e9l\u00e9chargement, deux types de fichiers vont vous \u00eatre propos\u00e9s\u00a0: des fichiers compress\u00e9s et des fichiers non compress\u00e9s.<\/p><p>La copie de jQuery compress\u00e9e ne contient aucun espace entre les codes. Le but est de r\u00e9duire le poids total de la librairie afin d\u2019am\u00e9liorer les performances de votre site. C\u2019est la version que nous placerons g\u00e9n\u00e9ralement sur notre site \u00ab live \u00bb (en production).<\/p><ul><li><p>Disponible sur le site de Jquery<\/p><\/li><\/ul><pre>http:\/\/jquery.com\/<br \/><br \/>&lt;script type=\"text\/javascript\" src=\"jquery.js\"&gt;&lt;\/script&gt;<\/pre><ul><li><p>Ou directement sur Google code<\/p><\/li><\/ul><pre>&lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js\"&gt;<br \/><br \/>&lt;\/script&gt;<\/pre><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1484\" class=\"elementor-tab-title\" data-tab=\"4\" role=\"button\" aria-controls=\"elementor-tab-content-1484\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Syntaxe de base de jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1484\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"4\" role=\"region\" aria-labelledby=\"elementor-tab-title-1484\"><p><span><span class=\"\">La syntaxe de base est:\u00a0<\/span><\/span><b><span><span class=\"\">$ (\u00a0<\/span><\/span><i><span><span class=\"\">s\u00e9lecteur<\/span><\/span><\/i><span><span class=\"\">\u00a0).\u00a0<\/span><\/span><i><span>action<\/span><\/i><span>\u00a0()<\/span><\/b><\/p><ul><li><span><span class=\"\">Un signe $ pour d\u00e9finir \/ acc\u00e9der \u00e0 jQuery<\/span><\/span><\/li><li><span>Un (\u00a0<\/span><i><span>s\u00e9lecteur<\/span><\/i><span>\u00a0) pour &#8220;interroger (ou rechercher)&#8221; des \u00e9l\u00e9ments HTML<\/span><\/li><li><span>Une\u00a0<\/span><i><span>action<\/span><\/i><span>\u00a0jQuery\u00a0() \u00e0 effectuer sur le ou les \u00e9l\u00e9ments<\/span><\/li><\/ul><p><span>Exemples:<\/span><\/p><p><code class=\"w3-codespan\">$(this).hide()<\/code><span>\u00a0&#8211; masque l&#8217;\u00e9l\u00e9ment courant.<\/span><\/p><p><code class=\"w3-codespan\">$(\"p\").hide()<\/code><span>\u00a0&#8211; masque tous les \u00e9l\u00e9ments &lt;p&gt;.<\/span><\/p><p><code class=\"w3-codespan\">$(\".test\").hide()<\/code><span>\u00a0&#8211; masque tous les \u00e9l\u00e9ments avec class = &#8220;test&#8221;.<\/span><\/p><p><code class=\"w3-codespan\">$(\"#test\").hide()<\/code><span><span class=\"\">\u00a0&#8211; masque l&#8217;\u00e9l\u00e9ment avec id = &#8220;test&#8221;.<\/span><\/span><\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1485\" class=\"elementor-tab-title\" data-tab=\"5\" role=\"button\" aria-controls=\"elementor-tab-content-1485\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">S\u00e9lectionner de jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1485\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"5\" role=\"region\" aria-labelledby=\"elementor-tab-title-1485\"><p>On va notamment pouvoir s\u00e9lectionner des \u00e9l\u00e9ments\u00a0<code>input<\/code>\u00a0en fonction de la valeur de leur attribut\u00a0<code>type<\/code>\u00a0gr\u00e2ce aux pseudo-s\u00e9lecteurs jQuery\u00a0<code>:text<\/code>,\u00a0<code>:password<\/code>,\u00a0<code>:checkbox<\/code>,\u00a0<code>:radio<\/code>,\u00a0<code>:submit<\/code>,\u00a0<code>:file<\/code>,\u00a0<code>:image<\/code>,\u00a0<code>:button<\/code>\u00a0et\u00a0<code>:reset<\/code>.<\/p><p>jQuery nous permet \u00e9galement de s\u00e9lectionner certains \u00e9l\u00e9ments de formulaire en fonction de leur \u00e9tat. Pour cela, on utilisera les pseudo-s\u00e9lecteurs :<\/p><ul><li><code>:input<\/code>\u00a0pour cibler tous les \u00e9l\u00e9ments\u00a0<code>input<\/code>,\u00a0<code>textarea<\/code>,\u00a0<code>select<\/code>\u00a0et\u00a0<code>button<\/code>\u00a0;<\/li><li><code>:checked<\/code>\u00a0pour cibler les \u00e9l\u00e9ments coch\u00e9s ou s\u00e9lectionn\u00e9s pour des\u00a0<code>input type=\"checkbox\"<\/code>,\u00a0<code>input type=\"radio\"<\/code>\u00a0et des \u00e9l\u00e9ments de liste\u00a0<code>select<\/code>\u00a0;<\/li><li><code>:selected<\/code>\u00a0pour cibler les \u00e9l\u00e9ments\u00a0<code>option<\/code>\u00a0s\u00e9lectionn\u00e9s dans une liste\u00a0<code>select<\/code>\u00a0;<\/li><li><code>:disabled<\/code>\u00a0pour cibler les \u00e9l\u00e9ments\u00a0<code>input<\/code>\u00a0qui poss\u00e8dent un attribut\u00a0<code>disabled<\/code>\u00a0;<\/li><li><code>:enabled<\/code>\u00a0pour cibler tous les \u00e9l\u00e9ments qui ne poss\u00e8dent pas d\u2019attribut\u00a0<code>disabled<\/code>.<\/li><\/ul><p><span><span class=\"\">Le s\u00e9lecteur d&#8217;\u00e9l\u00e9ment jQuery s\u00e9lectionne les \u00e9l\u00e9ments en fonction du nom de l&#8217;\u00e9l\u00e9ment. <\/span><\/span><span>Vous pouvez s\u00e9lectionner tous les\u00a0<\/span><code class=\"w3-codespan\">&lt;p&gt;<\/code><span>\u00e9l\u00e9ments sur une page comme celle-ci: <\/span>$(<span class=\"jsstringcolor\">&#8220;p&#8221;<\/span>)<\/p><h4><span>Les ID (#id)<\/span><\/h4><p><span>Le s\u00e9lecteur jQuery utilise l&#8217;attribut id d&#8217;une balise HTML pour trouver l&#8217;\u00e9l\u00e9ment sp\u00e9cifique<\/span><code class=\"w3-codespan\">#<em>id. <\/em><\/code><span>Un identifiant doit \u00eatre unique dans une page, vous devez donc utiliser le s\u00e9lecteur #id lorsque vous souhaitez rechercher un \u00e9l\u00e9ment unique et unique. <\/span><span>Pour trouver un \u00e9l\u00e9ment avec un identifiant sp\u00e9cifique, \u00e9crivez un caract\u00e8re de hachage, suivi de l&#8217;identifiant de l&#8217;\u00e9l\u00e9ment HTML:<\/span><\/p><div class=\"w3-code w3-border notranslate jsHigh\"><div>$(<span class=\"jsstringcolor\">&#8220;#test&#8221;<\/span>)<\/div><\/div><div><h3>Les Class (.class)<\/h3><p><span>Le <\/span>s\u00e9lecteur <code class=\"w3-codespan\"><em>.class<\/em><\/code> jQuery\u00a0trouve des \u00e9l\u00e9ments avec une classe sp\u00e9cifique.\u00a0<span>Pour rechercher des \u00e9l\u00e9ments avec une classe sp\u00e9cifique, \u00e9crivez un caract\u00e8re point, suivi du nom de la classe:<\/span><\/p><div class=\"w3-code w3-border notranslate jsHigh\"><div>$(<span class=\"jsstringcolor\">&#8220;.test&#8221;<\/span>)<\/div><\/div><\/div><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1486\" class=\"elementor-tab-title\" data-tab=\"6\" role=\"button\" aria-controls=\"elementor-tab-content-1486\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">M\u00e9thodes d'\u00e9v\u00e9nement jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1486\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"6\" role=\"region\" aria-labelledby=\"elementor-tab-title-1486\"><p><b><span>$ (document) .ready ()<\/span><\/b><\/p><p><span>La\u00a0<\/span><code class=\"w3-codespan\">$(document).ready()<\/code><span>m\u00e9thode nous permet d&#8217;ex\u00e9cuter une fonction lorsque le document est compl\u00e8tement charg\u00e9.<\/span><\/p><p><b><span>click()<\/span><\/b><\/p><p><span>La\u00a0<\/span><code class=\"w3-codespan\">click()<\/code><span>m\u00e9thode attache une fonction de gestionnaire d&#8217;\u00e9v\u00e9nements \u00e0 un \u00e9l\u00e9ment HTML. <\/span><span>La fonction est ex\u00e9cut\u00e9e lorsque l&#8217;utilisateur clique sur l&#8217;\u00e9l\u00e9ment HTML. <\/span><span>L&#8217;exemple suivant indique: Lorsqu&#8217;un \u00e9v\u00e9nement de clic se d\u00e9clenche sur un <\/span>\u00e9l\u00e9ment\u00a0<code class=\"w3-codespan\">&lt;p&gt;<\/code>;\u00a0masquer l&#8217;\u00e9l\u00e9ment\u00a0<code class=\"w3-codespan\">&lt;p&gt;<\/code>\u00a0courant\u00a0:<\/p><div class=\"w3-example\"><h5><span>Exemple<\/span><\/h5><pre class=\"w3-code notranslate jsHigh\"><span class=\"jscolor\">$(<span class=\"jsstringcolor\">\"p\"<\/span>).<span class=\"jspropertycolor\">click<\/span>(<span class=\"jskeywordcolor\">function<\/span>(){<br \/>\u00a0\u00a0$(<span class=\"jskeywordcolor\">this<\/span>).<span class=\"jspropertycolor\">hide<\/span>();<br \/>});<\/span><\/pre><\/div><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1487\" class=\"elementor-tab-title\" data-tab=\"7\" role=\"button\" aria-controls=\"elementor-tab-content-1487\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Les DOM en jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1487\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"7\" role=\"region\" aria-labelledby=\"elementor-tab-title-1487\"><p>jQuery nous permet \u00e9galement de s\u00e9lectionner certains \u00e9l\u00e9ments de formulaire en fonction de leur \u00e9tat. Pour cela, on utilisera les pseudo-s\u00e9lecteurs :<\/p><ul><li><code>:input<\/code>\u00a0pour cibler tous les \u00e9l\u00e9ments\u00a0<code>input<\/code>,\u00a0<code>textarea<\/code>,\u00a0<code>select<\/code>\u00a0et\u00a0<code>button<\/code>\u00a0;<\/li><li><code>:checked<\/code>\u00a0pour cibler les \u00e9l\u00e9ments coch\u00e9s ou s\u00e9lectionn\u00e9s pour des\u00a0<code>input type=\"checkbox\"<\/code>,\u00a0<code>input type=\"radio\"<\/code>\u00a0et des \u00e9l\u00e9ments de liste\u00a0<code>select<\/code>\u00a0;<\/li><li><code>:selected<\/code>\u00a0pour cibler les \u00e9l\u00e9ments\u00a0<code>option<\/code>\u00a0s\u00e9lectionn\u00e9s dans une liste\u00a0<code>select<\/code>\u00a0;<\/li><li><code>:disabled<\/code>\u00a0pour cibler les \u00e9l\u00e9ments\u00a0<code>input<\/code>\u00a0qui poss\u00e8dent un attribut\u00a0<code>disabled<\/code>\u00a0;<\/li><li><code>:enabled<\/code>\u00a0pour cibler tous les \u00e9l\u00e9ments qui ne poss\u00e8dent pas d\u2019attribut\u00a0<code>disabled<\/code>.<\/li><\/ul><p>Enfin, jQuery nous fournit \u00e9galement quelques m\u00e9thodes qui vont nous permettre d\u2019affiner nos s\u00e9lections. On peut notamment ici citer les m\u00e9thodes\u00a0<code>has()<\/code>,\u00a0<code>filter()<\/code>,\u00a0<code>not()<\/code>,\u00a0<code>first()<\/code>,\u00a0<code>last()<\/code>\u00a0et\u00a0<code>eq()<\/code>.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1488\" class=\"elementor-tab-title\" data-tab=\"8\" role=\"button\" aria-controls=\"elementor-tab-content-1488\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Les animation de jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1488\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"8\" role=\"region\" aria-labelledby=\"elementor-tab-title-1488\"><h5>Cr\u00e9er des effets de fondu en jQuery<\/h5><p>Un \u201cfondu\u201d est une disparition ou apparition progressive d\u2019un \u00e9l\u00e9ment. C\u2019est donc un effet de transition d\u2019un \u00e9tat \u00e0 un autre. jQuery nous fournit quatre m\u00e9thodes pour cr\u00e9er des effets de fondu :<\/p><ul><li>La m\u00e9thode\u00a0<code>fadeOut()<\/code>\u00a0;<\/li><li>La m\u00e9thode\u00a0<code>fadeIn()<\/code>\u00a0;<\/li><li>La m\u00e9thode\u00a0<code>fadeTo()<\/code>\u00a0;<\/li><li>La m\u00e9thode\u00a0<code>fadeToggle()<\/code>.<\/li><\/ul><p>Ces m\u00e9thodes vont en fait jouer sur la valeur de la propri\u00e9t\u00e9\u00a0<code>opacity<\/code>\u00a0de l\u2019\u00e9l\u00e9ment cibl\u00e9, en faisant passer cette valeur progressivement de 1 \u00e0 0 (totalement opaque \u00e0 totalement transparent) ou inversement. D\u00e8s que l\u2019opacit\u00e9 atteint 0, un\u00a0<code>display: none<\/code>\u00a0est appliqu\u00e9 \u00e0 l\u2019\u00e9l\u00e9ment pour le faire disparaitre totalement de la page.<\/p><h5>Cr\u00e9er des effets de slide en jQuery<\/h5><p>jQuery nous fournit \u00e9galement des m\u00e9thodes qui vont nous permettre de cr\u00e9er des effets de slide. Par \u201cslide\u201d, on entend ici le fait qu\u2019un \u00e9l\u00e9ment se d\u00e9plie ou se replie progressivement. Cet effet va \u00eatre int\u00e9ressant dans la cr\u00e9ation d\u2019un menu d\u00e9roulant par exemple. Pour cr\u00e9er ce genre d\u2019effet, nous allons pouvoir choisir parmi trois m\u00e9thodes :<\/p><ul><li>La m\u00e9thode\u00a0<code>slideDown()<\/code>\u00a0;<\/li><li>La m\u00e9thode\u00a0<code>slideUp()<\/code>\u00a0;<\/li><li>La m\u00e9thode\u00a0<code>slideToggle()<\/code>.<\/li><\/ul><h5>Afficher ou cacher un contenu instantan\u00e9ment avec show() et hide()<\/h5><p>Les m\u00e9thodes\u00a0<code>show()<\/code>\u00a0et\u00a0<code>hide()<\/code> vont respectivement nous permettre d\u2019afficher un contenu HTML cach\u00e9 ou de cacher un contenu HTML visible. On va d\u00e9j\u00e0 pouvoir utiliser les m\u00e9thodes\u00a0<code>show()<\/code>\u00a0et\u00a0<code>hide()<\/code> sans argument, pour afficher ou cacher un \u00e9l\u00e9ment instantan\u00e9ment tr\u00e8s simplement. Dans cette premi\u00e8re utilisation qui est la plus basique les deux m\u00e9thodes\u00a0<code>show()<\/code>\u00a0et\u00a0<code>hide()<\/code>\u00a0vont se contenter de jouer sur l\u2019\u00e9tat de la propri\u00e9t\u00e9 CSS\u00a0<code>display<\/code>\u00a0de l\u2019\u00e9l\u00e9ment HTML cibl\u00e9.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-1489\" class=\"elementor-tab-title\" data-tab=\"9\" role=\"button\" aria-controls=\"elementor-tab-content-1489\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">jQuery & AJAX<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1489\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"9\" role=\"region\" aria-labelledby=\"elementor-tab-title-1489\"><p>jQuery fournit ici un support Ajax cens\u00e9 harmoniser ces diff\u00e9rences et faire en sorte que nos requ\u00eates s\u2019ex\u00e9cutent de la m\u00eame mani\u00e8re avec tous les navigateurs. jQuery met notamment \u00e0 notre disposition une m\u00e9thode globale\u00a0<code>$.ajax()<\/code> et des m\u00e9thodes comme <code>$.get()<\/code>,\u00a0 <code>$.getScript()<\/code>,\u00a0<code>$.getJSON()<\/code>\u00a0ou\u00a0<code>$.post()<\/code>\u00a0pour effectuer nos diff\u00e9rentes op\u00e9rations.<\/p><h5>M\u00e9thodes d\u2019envoi et format de donn\u00e9es<\/h5><p>Les deux m\u00e9thodes les plus courantes pour envoyer une demande \u00e0 un serveur sont\u00a0<code>GET<\/code>\u00a0et\u00a0<code>POST<\/code>. On utilisera\u00a0<code>GET<\/code> pour effectuer des op\u00e9rations non destructives, c\u2019est-\u00e0-dire pour des requ\u00eates o\u00f9 on se contente de r\u00e9cup\u00e9rer des donn\u00e9es du serveur sans les modifier. A l\u2019inverse, on utilisera\u00a0<code>POST<\/code> pour effectuer des op\u00e9rations destructives, c\u2019est-\u00e0-dire pour des requ\u00eates dont le but est de modifier des donn\u00e9es stock\u00e9es sur le serveur. Lorsqu\u2019on envoie une requ\u00eate, il faut g\u00e9n\u00e9ralement pr\u00e9ciser dans quel format on souhaite recevoir la r\u00e9ponse du serveur. On va pouvoir faire notre choix parmi les formats suivants :<\/p><ul><li>text = permet de transporter des chaines de caract\u00e8res ;<\/li><li>html = permet de transporter des blocs de code HTML qui vont \u00eatre plac\u00e9s dans la page ;<\/li><li>script = permet d\u2019ajouter des scripts \u00e0 la page ;<\/li><li>json = permet de transporter des donn\u00e9es au format JSON (des chaines, des tableaux ou des objets) ;<\/li><li>jsonp = permet de transporter des donn\u00e9es au format JSON provenant d\u2019un autre domaine ;<\/li><li>xml = permet de transporter des donn\u00e9es au format XML.<\/li><\/ul><p>On utilisera g\u00e9n\u00e9ralement du JSON (JavaScript Object Notation) car c\u2019est le format le plus flexible. Le JSON est particuli\u00e8rement utile lorsqu\u2019on souhaite envoyer du HTML et d\u2019autres donn\u00e9es en m\u00eame temps.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-14810\" class=\"elementor-tab-title\" data-tab=\"10\" role=\"button\" aria-controls=\"elementor-tab-content-14810\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\">Validation de formulaire par jQuery<\/a>\n\t\t\t\t\t<\/h4>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-14810\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"10\" role=\"region\" aria-labelledby=\"elementor-tab-title-14810\"><h5>La s\u00e9rialisation des donn\u00e9es des formulaires<\/h5><p>En informatique, la s\u00e9rialisation se d\u00e9finit comme un processus de transformation de structures de donn\u00e9es dans un format pouvant \u00eatre stock\u00e9 ou transmis et reconstruit ult\u00e9rieurement.<\/p><p>jQuery met deux m\u00e9thodes \u00e0 notre disposition pour s\u00e9rialiser les donn\u00e9es de formulaire : les m\u00e9thodes\u00a0<code>serialize()<\/code>\u00a0et\u00a0<code>serializeArray()<\/code>. Ces m\u00e9thodes vont nous permettre de modifier le format des donn\u00e9es de formulaire avant leur envoi.<\/p><p>La m\u00e9thode\u00a0<code>serialize()<\/code>\u00a0s\u00e9rialise les donn\u00e9es d\u2019un formulaire en les changeant en une cha\u00eene de requ\u00eate. Pour que la valeur de l\u2019\u00e9l\u00e9ment soit s\u00e9rialis\u00e9e, il doit avoir un attribut\u00a0<code>name<\/code>. Notez \u00e9galement que les valeurs des\u00a0<code>input type=\"checkbox\"<\/code>\u00a0et\u00a0<code>input type=\"radio\"<\/code>\u00a0ne sont incluses que si elles sont coch\u00e9es.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-4071af1\" data-id=\"4071af1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2edc2f elementor-widget elementor-widget-sidebar\" data-id=\"a2edc2f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sidebar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"search-2\" class=\"widget widget_search\">\n<form role=\"search\" method=\"get\" class=\"searchform\" action=\"https:\/\/kaay-coder.2sweb.sn\/kc\/\">\n\n\t<label>\n\n\t\t<span class=\"screen-reader-text\">Recherche pour\u00a0:<\/span>\n\t\t<input type=\"search\" id=\"searchform-1\" name=\"s\" value=\"\" placeholder=\"Rechercher &hellip;\" title=\"Appuyez sur Entrer pour rechercher\" \/>\n\n\t\t\n\t\t\t<button value=\"Search\" class=\"wpbff wpbff-search\"><\/button>\n\n\t\t\n\t<\/label>\n\n<\/form>\n<\/div><div id=\"calendar-2\" class=\"widget widget_calendar\"><div id=\"calendar_wrap\" class=\"calendar_wrap\"><table id=\"wp-calendar\" class=\"wp-calendar-table\">\n\t<caption>juin 2026<\/caption>\n\t<thead>\n\t<tr>\n\t\t<th scope=\"col\" aria-label=\"lundi\">L<\/th>\n\t\t<th scope=\"col\" aria-label=\"mardi\">M<\/th>\n\t\t<th scope=\"col\" aria-label=\"mercredi\">M<\/th>\n\t\t<th scope=\"col\" aria-label=\"jeudi\">J<\/th>\n\t\t<th scope=\"col\" aria-label=\"vendredi\">V<\/th>\n\t\t<th scope=\"col\" aria-label=\"samedi\">S<\/th>\n\t\t<th scope=\"col\" aria-label=\"dimanche\">D<\/th>\n\t<\/tr>\n\t<\/thead>\n\t<tbody>\n\t<tr><td>1<\/td><td>2<\/td><td>3<\/td><td>4<\/td><td id=\"today\">5<\/td><td>6<\/td><td>7<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>8<\/td><td>9<\/td><td>10<\/td><td>11<\/td><td>12<\/td><td>13<\/td><td>14<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>15<\/td><td>16<\/td><td>17<\/td><td>18<\/td><td>19<\/td><td>20<\/td><td>21<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>22<\/td><td>23<\/td><td>24<\/td><td>25<\/td><td>26<\/td><td>27<\/td><td>28<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>29<\/td><td>30<\/td>\n\t\t<td class=\"pad\" colspan=\"5\">&nbsp;<\/td>\n\t<\/tr>\n\t<\/tbody>\n\t<\/table><nav aria-label=\"Mois pr\u00e9c\u00e9dents et suivants\" class=\"wp-calendar-nav\">\n\t\t<span class=\"wp-calendar-nav-prev\"><a href=\"https:\/\/kaay-coder.2sweb.sn\/kc\/2021\/03\/\">&laquo; Mar<\/a><\/span>\n\t\t<span class=\"pad\">&nbsp;<\/span>\n\t\t<span class=\"wp-calendar-nav-next\">&nbsp;<\/span>\n\t<\/nav><\/div><\/div>\n\t\t<div id=\"recent-posts-2\" class=\"widget widget_recent_entries\">\n\t\t<h4 class=\"wpbf-widgettitle\">Articles r\u00e9cents<\/h4>\n\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t<a href=\"https:\/\/kaay-coder.2sweb.sn\/kc\/hello-world\/\">Kaay-Coder !<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t<\/ul>\n\n\t\t<\/div><div id=\"archives-2\" class=\"widget widget_archive\"><h4 class=\"wpbf-widgettitle\">Archives<\/h4>\n\t\t\t<ul>\n\t\t\t\t\t<li><a href='https:\/\/kaay-coder.2sweb.sn\/kc\/2021\/03\/'>mars 2021<\/a><\/li>\n\t\t\t<\/ul>\n\n\t\t\t<\/div><div id=\"media_gallery-2\" class=\"widget widget_media_gallery\"><div id='gallery-1' class='gallery galleryid-124 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/accueil\/html\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-300x300.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html.png 421w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/dmxbe\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/dMXbE-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2.png 250w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/wordpress_logo_8-1-1024x1015\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-300x297.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-768x761.png 768w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1.png 1024w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Qu&#8217;est ce que jQuery Une biblioth\u00e8que javascript open-source et cross-browser Elle permet de traverser et manipuler tr\u00e8s facilement l\u2019arbre DOM des pages web \u00e0 l\u2019aide d\u2019une syntaxe fortement similaire \u00e0 celle d\u2019XPath. JQuery permet par exemple de changer\/ajouter une classe CSS, cr\u00e9er des animations, modifier des attributs, etc. G\u00e9rer les \u00e9v\u00e9nements javascript Faire des requ\u00eates [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":90,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-124","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":14,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"predecessor-version":[{"id":879,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/124\/revisions\/879"}],"up":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/90"}],"wp:attachment":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}