jquery

Sélecteurs

Liste des sélecteurs

Sélecteur	CSS	jQuery	Description
Nom de balise	p	$(‘p’)	Sélectionne tous les paragraphes
Identifiant	#mon_id	$(‘#mon_id’)	Sélectionne l’unique élement avec l’id mon_id
Classe	.une_classe	$(‘.une_classe’)	Sélectionne tous les élements ayant la classe une_classe
Attribut		$(‘img[alt]’)	Sélectionne toutes les balises img ayant un attribut alt
Attribut		$(‘a[href^=mailto:]’)	Sélectionne toutes les balises a ayant un attribut href commencant par mailto:
Attribut		$(‘a[href$=.pdf]’)	Sélectionne toutes les balises a ayant un attribut href se terminant par .pdf
Attribut		$(‘a[href*=toto]’)	Sélectionne toutes les balises a ayant un attribut href contenant toto
Pseudo classe		$(‘div.horiz:eq(1)’)	Sélectionne le second élement div ayant la classe horiz
Pseudo classe		$(‘div:first-child’)	Sélectionne le premiers enfants de chaque div
Pseudo classe		$(‘div:odd’)	Sélectionne les élements impaires enfants de chaque div

Fonctions de sélection

• .filter() -> ajoute un filtre sur une sélection. Ce filtre peut être une classe, une regex, ou une fonction.
• .next() -> Sélectionne le frêre suivant
• .nextAll() -> Sélectionne tous les frêres
• .andSelf() -> Utilisé aprés next ou nextall, permet d’inclure l’élément d’origine
• .parent() -> parent de l’élément
• .children() -> tous les enfants de l’élément
• .end()
• .find()

Evénements

• méthodes abrégées:

blur	error	keyup	mouseout	scroll
change	focus	load	mouseover	select
click	keydown	mousedown	mouseup	submit
dblclick	keypress	mousemove	resize	unload

• Méthodes d’association des événements:

  • .bind()
  • .toggle() -> permet de définir deux fonctions: une lors éxécutée lors du premier click sur un élément. L’autre lors du second click
  • .hover() -> similaire à toggle, mais pour les survol
  • .unbind()
  • .trigger()

• L’objet ‘event’
  On peut utiliser l’objet ‘event’ directement dans une fonction. Cela permet notamment:

  • vérifier la cible de l’événement: event.target
  • Stopper la propagation d’un évènement: event.stopPropagation()
  • Supprimer les actions par défaut (ex: suivre un lien hypertexte quand on click sur une balise ): event.preventDefault()
  • Vérifier le type d’élément: ex $(event.target).is('button')
  • Obtenir la touche de clavier appuyée: event.keycode

Effets CSS

• .css(): récupére une propriété CSS. ex: $elmt.css(‘fontSize’)
• .hide() / .show() :cache/affiche l’élément. Cette méthode peut prendre en argument ‘slow’, ‘normal’, ‘fast’
• .fadeIn() / .fadeOut() : idem hide/show, mais change l’opacité
• .toggle(): hide/show
• .slideToggle(): fadeIn/fadeOut
• .animate(): permet de définir une animation personnalisée

Manipulation du DOM

• Modifier les attributs:
  • Ajouter une classe

    $(document).ready(function(){
        $('#mon_id > li').addClass('new_class');
    });

  • Switcher une classe:

    $('#monID').toggleClass('maclasse')

  • Supprimer une classe: removeClass()
  • Ajouter/supprimer un attribut: .attr()/removeAttr()