Jquery pour les nuls

jQuery vous permet de sélectionner des éléments dans une page Web avec facilité. Vous pouvez trouver tout ce que vous voulez dans une page, puis utiliser jQuery pour ajouter des effets spéciaux, réagir aux actions de l'utilisateur, ou afficher et masquer le contenu à l'intérieur ou l'extérieur de l'élément que vous avez sélectionné. Toutes ces tâches commencent par savoir comment sélectionner un élément. Voici une liste pratique vous pouvez utiliser pour sélectionner presque tout sur votre page Web.

Sommaire

Pour Sélectionnez ParUtilisez ceci
Type d'élément (par exemple, )$ ("img")
Tous les éléments$ ("*")
ID (par exemple, id = "thisIsTheID")$ ("# thisIsTheID")
Classe (par exemple, class = "someClass")$ (". someClass")
Ordre (par exemple, la première ou la dernière élément)$ ("img: d'abord")
$ ("img: dernière»)
Attribut, (par exemple, pour obtenir l'attribut de longueur de )$ ("img [hauteur]"). longueur
Parent (par exemple, le parent de
)
$ ("div: parent")
Enfant (par exemple, le premier ou le dernier enfant de
)
$ ("div: first-child")
$ ("div: last-child")

Montrer, cacher, coulissante, et à la décoloration Elements avec jQuery

jQuery effets sont très amusants et peuvent transformer une simple page Web, statique en une expérience interactive dynamique pour le visiteur du site. Une partie de l'intérêt visuel que jQuery offre est la capacité d'afficher, masquer, toboggan, et se fanent éléments. Les exemples qui suivent utilisent tous cet exemple de code:

Ma page de test
Ceci est visible.

Voici un rapide aperçu sur la façon d'appliquer ces effets à un

un élément de page Web.

EffetCode
Cacher$ (": présenter") cliquez sur (function () {.
$ ("div") cacher (). -
}) -
Montrer$ (": présenter") cliquez sur (function () {.
$ ("# showme") show (). -
}) -
Glisse vers le bas$ (": présenter") cliquez sur (function () {.
$ ("# showme") slideDown (). -
}) -
Glisser vers le haut$ (": présenter") cliquez sur (function () {.
$ ("# HideMe") slideUp (). -
}) -
Se fondre dans$ (": présenter") cliquez sur (function () {.
$ ("# showme") fadeIn (). -
}) -
Disparaître$ (": présenter") cliquez sur (function () {.
$ ("# HideMe") fonduSortie (). -
}) -

Insertion de contenu avant, après et dans les éléments avec jQuery

jQuery vous fournit des moyens faciles d'obtenir les données dans votre page Web. En particulier, vous pouvez insérer le contenu que vous voulez, n'importe où sur votre page. Les exemples qui suivent utilisent tous cet exemple de code:




Ma page de test
Je suis un div.

Voici un rapide aperçu sur la façon d'insérer du contenu avant, après, et à l'intérieur d'un

élément dans une page Web:

Pour placer le contenuCode
En face de l'extérieur et
(avant)
$ (": présenter") cliquez sur (function () {.
$ ("div"). avant ("Avant
") -
}) -
À l'arrière de l'extérieur de la
(après)
$ (": présenter") cliquez sur (function () {.
$ ("div"). après ("Après
") -
}) -
À l'intérieur de
mais le contenu beforeexisting (prepend)
$ (": présenter") cliquez sur (function () {.
. $ ("div") prepend ("le nouveau contenu!") -
}) -
À l'intérieur de
mais afterexisting contenu (append)
$ (": présenter") cliquez sur (function () {.
$ ("div") append ("Nouveau contenu!"). -
}) -

Ressources jQuery en ligne

Comme vous acquérir de l'expérience avec jQuery, vous aurez probablement des questions sur les techniques les plus avancées jQuery. Et après vous utilisez jQuery plug-ins, vous serez accro et que vous souhaitez obtenir plus. jQuery.com fournit beaucoup de soutien technique et la liste officielle des plug-ins jQuery. Visitez ces sites supplémentaires pour les réponses à vos questions et jQuery pour plus de moyens pour étendre la façon dont vous utilisez jQuery dans vos pages Web:

  • jQuery sur Wikipedia

  • jQuery pour Absolute Beginners

  • JQuery visuelle

  • Plugins jQuery

  • Smashing Magazine

  • Speckyboy Design Magazine

  • Nettuts +

  • Woorkup