Written by Yoann Pigné
on 

jQuery

La fonction jQuery()

jQuery("div.even") ➔ $("div.even")

Sélecteurs CSS 2 et 3

a[rel]
div[class~="even"]
a[href^="http://"]
ul#nav > li
li#current ~ li
li:first-child, li:last-child, li:nth-child(3)

D’autres sélecteurs et pseudo-classes

div:first, h3:last
:header
:hidden,:visible
:animated
:input,:text,:password,:radio,:submit...
div:contains(Hello)

(http://api.jquery.com/category/selectors/)

jQuery() retourne un tableau

$('.odd')
[<div class=!"odd" id=!"d1">!that's d1!</div>,
<div class=!"odd" id=!"d3">!that's d3!</div> ,
<div class=!"odd" id=!"d5">!that's d5!</div>!,
<div class=!"odd" id=!"d7">!that's d7!</div>!]

$(".odd").length;
$(".odd")[0];

$(".odd").size();
$(".odd").each(function() {
     console.log(this);
});

Action sur la sélection

$(".odd").add(".even").addClass("darcker").show("fast");

Consistance du code

Nom des fonctions

click() vs. onclick()

Position des arguments

object.methode(options, arg1, arg2, ... , callback)

Contexte des callbacks

.methode(function(){
    // this == DOMElement
});

Manipulations HTML

$(".even:first").text("First \"even\" div on the page.")
$(".odd:last").html("<ul><li>The last</li><li>odd div</li></ul>")

Manipulations d’attributs

$('a.nav').attr('href', 'http://flickr.com/');
$('a.nav').attr({
    'href': 'http://flickr.com/',
    'id': 'flickr'
});
$('#intro').removeAttr('id');

Manipulations CSS

$('#intro').addClass('highlighted');
$('#intro').removeClass('highlighted');
$('#intro').toggleClass('highlighted');

$('.div').css("background-color", "#eee");
jQuery(".div").css({
    "background-color": "#eee",
    "border": "1px solid #555"
})

Retour de valeurs

Certaines méthodes retournent une valeur pour le première élément de la collection.

var height = $('div#intro').height();
var src = $('img.photo').attr('src');
var lastP = $('p:last').html();
var hasFoo = $('p').hasClass('foo');
var email = $('input#email').val();

Parcours du DOM

$('div.section').parent();
$('div.section').next();
$('div.section').prev();
$('div.section').nextAll('div');
$('h1:first').parents();

Gestion des évènements

$('a:first').click(function(ev){
   $(this).css({ "background-color": "#a0a8b8"});
   return false; // ou ev.preventDefault();
}

blur, change, click, dblclick, error, focus, hover, ready, resize, scroll, select, submit, toggle

http://api.jquery.com/category/events/

Unobtrusive JS

$(document).ready(function(){
     alert('Le DOM est prêt !')
});

⬇

$(function(){
     alert('Le DOM est prêt !')
});

Chainage des actions

$('.intro').css('color','#ccc')
	.find('a').addClass('highlight')
	.end()
	.find('em').css('color','red')
	.end()

Autres méthodes ≠ actions

Ne s’appliquent pas obligatoirement sur des objets jQuery.

Méthodes de l’objet global (le module) jQuery ou $

$.isArray()
$.trim()
$.type()
$.paseJSON()

$.ajax()
$.get()
$.post()
$.getJSON()

AJAX

S’appliquant sur un objet jQuery

$("#data").load("/some/file.html")

Méthode bas niveau:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

Méthodes haut niveau

$.get()
$.post()
$.getJSON()
$.getScript()

http://api.jquery.com/category/ajax/

Animation

jQuery a quelques effets pré-installés

$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);

On peut les enchainer

$('h1').fadeOut(2000).slideDown();

http://api.jquery.com/category/effects/

Plugins