Introduction à jQuery




La démo originale provient du site :
http://ejohn.org/apps/workshop/intro/
Traduit et testé par J.-C. Stritt (EMF)
Tous les codes sont ici: http://github.com/jeresig/jquery-workshop>
Très bonne documentation ici : http://www.w3schools.com/jquery/default.asp

jQuery - qu'est-ce que c'est ?

Pourquoi jQuery ?

Qui utilise jQuery ?

jQuery est vraiment populaire.

Facile à apprendre et à utiliser

L'essentiel de jQuery

$("div").addClass("special");

L'objet jQuery

$("div").addClass("special");

Écriture élégante

$(".idontexist").addClass("special");

L'événement “ready”

$(document).ready(function(){
	// Votre code jQuery doit se trouver ici
});

Trouver quelques éléments

Sélecteurs dans jQuery

  • Sélecteur: 
<div id="body">
  
<h2>Un titre</h2>

  
<div class="contents">
    
<p>Paragraphe 1</p>

    
<p>Paragraphe 2</p>

  </div>

</div>

Un titre

Paragraphe 1

Paragraphe 2

Traverser les noeuds du DOM

$("button").parent().css("border", "3px solid red");

Enchaînements

$("div").hide();
$("div").hide().css("color","blue");
$("div").hide().css("color","blue").remove();

Enchaînement transversal

$("button")
	.parent().css("border", "3px solid red")
	.siblings().css("border", "3px solid green");

Faire quelque chose avec

Manipulation avec .after()

$("a[target=_blank]")
  .after("<img src='images/open.png'/>");

Manipulation avec .append()

$("a[target=_blank]")
  .append("(mon texte)");

Manipulation avec .css()

$("li a").css({
  color: "red",
  fontWeight: "bold"
});

Sélecteurs HTML

$("<li><a></a></li>")
  .find("a")
    .attr("href", "http://www.emf.ch/")
    .html("EMF")
  .end()
  .appendTo("ul");

Evénement .submit()

$("form").submit(function(){
  if ( $("#name").val() === "" ) {
    $("span.help").show();
    return false;
  }
});

Evénement .click()

$("a.menu").click(function(){
  $(this).next().toggle();
  return false;
});

Votre premier menu déroulant :

Evénement .hover()

$("li").hover(function(){
  $(this).animate({marginLeft: 38, marginRight: 0});
}, function(){
  $(this).animate({marginLeft: 18, marginRight: 18});
});

Délégation d'événements

Evénements en live

$("a.menu").live("hover", function(){
  $(this).next().toggle(200);
  return false;
});

Effet .slideToggle()

$("a.menu").click(function(){
  $(this).next().slideToggle("slow");
  return false;
});

Effet .animate()

$("div.block").animate({
  fontSize: "2em",
  width: "+=20%",
  backgroundColor: "green"
});
Hello!

Effets .hide() et .show()

$("div.block").hide("slow", function(){
  $(this).show("slow");
});
hello!

Ajax - lire du XML

$.ajax({
	url: "file.xml",
	success: function( xml ) {
		$(xml).find("tab").each(function(){
			$("ul").append(
			  "<li>" + $(this).text() + "</li>");
		});
	}
});

Ajax - lire du JSON

$.getJSON("file.json", function( obj ) {
	for ( var prop in obj ) {
		$("ul").append(
			"<li>" + prop + ": " + obj[prop] + "</li>");
	}
});

Ajax - .load()

$("div.load").load("file.html");
hello!

Ajax - .load()

$("div.load").load("file.html h2");
hello!

jQuery plugins

Développer un plugin

jQuery.fn.slideRemove = function() {
	return this.slideUp("slow", function(){
		$(this).remove();
	});
};
$("li.remove").slideRemove();

Que font les plugins ?

jQuery.expr[":"].unordered = function(elem) {
  return elem.parentNode.nodeName.toLowerCase() === "ul";
};

jQuery UI

jQuery CDN

<script src='http://code.jquery.com/jquery.js'></script>

Minifié et zippé

Plus d'informations