Pratique pour maîtriser la bibliothèque jQuery

Enveloppez tous les paragraphes p, à l'intérieur desquels se trouve une balise b, dans une balise div.

Trouvez tous les paragraphes p avec la classe www, placez le texte '!' au début, puis ajoutez à ces paragraphes les titres h1-h6 et colorez ces paragraphes et titres en rouge.

Trouvez tous les paragraphes p et remplacez-les par la balise div avec le même contenu.

Trouvez toutes les cases à cocher sur la page et bloquez les paires parmi celles trouvées.

Cochez toutes les cases à cocher non bloquées (statut 'coché').

Étant donné l'élément #test. Placez pour son voisin direct au-dessus le texte '!', et pour le voisin en dessous - le texte '?'. Résolvez le problème en une seule chaîne.

Étant donné l'élément #test. Placez pour ses voisins directs au-dessus et en dessous le texte de l'élément #test.

Étant donné l'élément #test. Trouvez parmi ses voisins au-dessus le paragraphe le plus proche et placez-lui le texte de l'élément #test.

Trouvez le deuxième li sur la page, ajoutez-lui la classe www, enveloppez-le intérieurement avec la balise i, insérez après lui un li avec le texte 'bonjour'.

Trouvez le dixième li sur la page, trouvez son parent, obtenez le voisin direct du parent au-dessus, enveloppez-le dans <div class="www"></div>.

Ajoutez à la fin de chaque paragraphe p, sauf les paragraphes avec la classe www, son numéro d'ordre.

Trouvez tous les paragraphes p et placez devant chaque paragraphe sa copie. Colorez la copie en rouge, et le paragraphe original en vert.

Trouvez les paragraphes p qui se trouvent directement sous un h2 et déplacez chaque paragraphe pour qu'il se place directement au-dessus du h2.

Trouvez tous les paragraphes vides p (sans texte) et insérez-y le texte du voisin direct au-dessus.

Pour le parent de la balise b, si c'est un élément avec la classe www ou un paragraphe p, définissez la couleur rouge et la taille du texte à 30px.

Pour tous les paragraphes vides p, placez le texte de la balise h2 la plus proche au-dessus d'eux.

Il y a des champs de saisie avec des nombres. Faites en sorte que dans les champs se trouvent les carrés de ces nombres.

Étant donné l'élément #test. Placez au début le texte du voisin direct au-dessus, et à la fin - le texte du voisin direct en dessous.

Étant donné l'élément #test. Trouvez son deuxième voisin au-dessus et son deuxième voisin en dessous. Faites en sorte que les éléments trouvés échangent leur texte (le voisin du-dessus prend le texte du voisin en dessous et vice versa).

Étant donné un élément div. Sélectionnez parmi lui tous les enfants directs, qui ne sont pas des titres et colorez-les en rouge.

Trouvez tous les paragraphes p, colorez-les en rouge. Ensuite, sélectionnez parmi les paragraphes trouvés les paragraphes avec la classe www et placez-leur le texte '!'.

Trouvez tous les paragraphes p avec la classe www, colorez-les en rouge. Ensuite, sélectionnez parmi les paragraphes trouvés le premier et placez-lui le texte '!', puis sélectionnez le dernier et placez-lui le texte '?'. Résolvez le problème en une seule chaîne.

Trouvez tous les paragraphes p, placez à la fin de chacun d'eux le même texte qui se trouve à l'intérieur (c'est-à-dire que le texte dans le paragraphe sera écrit deux fois).

Trouvez tous les paragraphes p, placez à la fin de chacun d'eux son numéro d'ordre dans l'ensemble.

Il y a des paragraphes avec des nombres. Placez pour chacun d'eux à la fin le nombre qui y est stocké, multiplié par son numéro d'ordre dans l'ensemble.

Lors d'un clic sur un paragraphe p, supprimez ses voisins directs au-dessus et en dessous.

Lors d'un clic sur un paragraphe p, supprimez tous ses voisins au-dessus jusqu'au premier titre h1-h6 (c'est-à-dire que les éléments se trouvant au-dessus de ce titre et le titre lui-même ne doivent pas être supprimés).

Lors d'un clic sur un paragraphe p, supprimez son voisin du bas le plus proche avec la classe www.

Lors d'un clic sur un paragraphe p, supprimez son cinquième voisin en dessous.

Lors d'un clic sur un paragraphe p, supprimez son cinquième voisin en dessous, si ce n'est pas un h2.

Lors d'un clic sur un paragraphe p, supprimez son cinquième voisin en dessous, si ce voisin n'a pas à l'intérieur la balise b.

Lors d'un clic sur un paragraphe p, supprimez son cinquième voisin en dessous, si ce voisin ne se trouve pas directement après un h2.

Étant donné l'élément #test. Échangez cet élément de place avec son voisin direct en dessous.

Étant donné l'élément #test. Après son voisin direct en dessous, insérez une copie de notre élément.

Étant donné l'élément #test. Échangez cet élément de place avec son voisin le plus proche en dessous avec la classe www.

Trouvez tous les paragraphes p qui à l'intérieur d'un même parent se trouvent entre un h2 et un autre h2.

Enveloppez chaque paragraphe p à l'extérieur et à l'intérieur dans un div.

Trouvez tous les paragraphes p, dont le parent direct n'est pas un div et enveloppez chacun d'eux dans <div class="www"></div>.

Trouvez tous les paragraphes p. Supprimez leur parent (faites lui un unwrap), si ce parent n'est pas un div avec la classe www. Ensuite, pour les paragraphes dont le parent a été supprimé, enveloppez-les dans un div avec la classe zzz.

Trouvez tous les parents de l'élément #test et créez un tableau contenant les classes CSS de ces parents.

Trouvez tous les paragraphes p qui ont un attribut class, et enveloppez chacun d'eux dans un div avec les mêmes classes que le paragraphe trouvé, et supprimez les classes de chaque paragraphe ainsi que l'attribut class.

Trouvez tous les paragraphes p dans #test, placez à la fin le texte '!', puis excluez des paragraphes trouvés ceux avec la classe www et colorez les restants en rouge.

Trouvez tous les li sur la page, puis avant l'avant-dernier des éléments trouvés, insérez un autre li avec le texte 'point'.

Trouvez tous les li sur la page, puis sélectionnez parmi les éléments trouvés le deuxième, le troisième et le quatrième en partant de la fin et placez-leur le texte '!'.

Trouvez le ol avec l'id #test et inversez l'ordre de tous les li qu'il contient.

Étant donné l'élément #test. Trouvez tous ses voisins au-dessus et tous ses voisins en dessous et échangez leurs places (c'est-à-dire que tout ce qui se trouve avant l'élément doit se trouver après et vice versa).

Obtenez tous les li avec la classe www, colorez-les en rouge, puis trouvez parmi les éléments trouvés les li, qui ont la classe bbb et supprimez-les. Résolvez tout en une seule chaîne.

Obtenez tous les li sur la page. Rendez pairs les éléments obtenus vides, et supprimez les impairs.

Trouvez toutes les balises div et doublez leur hauteur.

Trouvez la somme des hauteurs de tous les div sur la page.

Pour l'élément #test, trouvez le parent le plus proche avec la classe www, à la fin de ce parent ajoutez un paragraphe avec le texte '!'.

Lors d'un clic sur l'élément #test, trouvez son parent le plus proche avec la classe www, à l'intérieur de ce parent trouvez tous les paragraphes et colorez-les en rouge.

Colorez les 10 premiers li sur la page en rouge.

Colorez du 5ième au 10ième li sur la page en rouge.

Trouvez les 10 derniers li sur la page, colorez-les en rouge. Ensuite, parmi les éléments trouvés, trouvez les li pairs et enveloppez-les intérieurement dans la balise b.

Sur la page, il y a des cases à cocher. Comptez combien d'entre elles sont cochées.

Il y a 5 cases à cocher. Faites en sorte qu'après que l'utilisateur a coché deux d'entre elles, toutes les cases à cocher soient bloquées.

Faites en sorte que toutes les cases à cocher cochées changent leur état à non coché et vice versa.

Étant donné un champ de saisie. Déplacez le contenu de l'attribut value vers l'attribut placeholder, et supprimez complètement l'attribut value.

Étant donné un lien. Si l'attribut href commence par http://, ajoutez au lien l'attribut target="_blank".

Étant donné un champ de saisie, dans lequel on peut entrer un nombre. Faites en sorte qu'après avoir entré un nombre dans ce champ et perdu le focus, on recherche sur la page la case à cocher avec ce numéro et qu'elle devienne cochée, et que les autres cases à cocher deviennent décochées.

Étant donné une liste déroulante et des boutons radio, le nombre de boutons radio est égal au nombre d'éléments dans la liste. Faites en sorte que lors du choix d'un élément dans la liste, le bouton radio correspondant devienne automatiquement coché (correspondance par ordre d'apparition : le premier élément de la liste - le premier bouton radio et ainsi de suite).