Outils pour utilisateurs

Outils du site

Piste:
devweb:jquery (lu 51492 fois)

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision 		Révision précédente
devweb:jquery [06-06-2013 16:32]
edmc73 créée 		devweb:jquery [01-12-2014 23:36] (Version actuelle)
edmc73
Ligne 1: Ligne 1:
 ====== jQuery ====== ====== jQuery ======
  
-===== Titre ===== 
  
-  +===== Comment créer un filtre imbriqué =====
- +
-==== Comment créer un filtre imbriqué +
- ====+
  
 Un filtre vous permet de réduire l'ensemble des éléments correspondant à ceux qui correspondent à un sélecteur de données. Un filtre vous permet de réduire l'ensemble des éléments correspondant à ceux qui correspondent à un sélecteur de données.
 Dans l'exemple qui suit, la requête supprime tout ce qui ne possède pas (:not) (:has) un enfant ayant la classe "selected" (.selected) : Dans l'exemple qui suit, la requête supprime tout ce qui ne possède pas (:not) (:has) un enfant ayant la classe "selected" (.selected) :
  
-.filter(":not(:has(.selected))")+  .filter(":not(:has(.selected))")
    
  
-==== Comment réutiliser vos recherches d'élements +===== Comment réutiliser vos recherches d'élements =====
- ====+
  
 var allItems = $("div.item"); var allItems = $("div.item");
Ligne 21: Ligne 16:
 Maintenant, vous pouvez continuer à travailler avec ces objets jQuery. Par exemple, "keepList" est basé sur des checkboxes dont les noms correspondent aux noms de classes : Maintenant, vous pouvez continuer à travailler avec ces objets jQuery. Par exemple, "keepList" est basé sur des checkboxes dont les noms correspondent aux noms de classes :
  
-$(formToLookAt + " input:checked").each(function() {+  $(formToLookAt + " input:checked").each(function() {
     keepList = keepList.filter("." + $(this).attr("name"));     keepList = keepList.filter("." + $(this).attr("name"));
-});+  });
    
  
-==== Vérifier si un élément contient une certaine classe ou un élément avec .has() ====+===== Vérifier si un élément contient une certaine classe ou un élément avec .has() =====
  
  
 jQuery 1.4 .* inclut le support de la méthode .has(). Cette méthode va rechercher si un élément d'une certaine classe contient un autre élément ou tout ce que vous cherchez, et dont vous voulez faire quelque chose. jQuery 1.4 .* inclut le support de la méthode .has(). Cette méthode va rechercher si un élément d'une certaine classe contient un autre élément ou tout ce que vous cherchez, et dont vous voulez faire quelque chose.
  
-$("input").has(".email").addClass("email_icon");+  $("input").has(".email").addClass("email_icon");
    
  
-==== Comment basculer les feuilles de style avec jQuery ====+===== Comment basculer les feuilles de style avec jQuery =====
  
  
 Cherchez le type de média que vous souhaitez basculer puis définissez l'attribut href de votre nouvelle feuille de style Cherchez le type de média que vous souhaitez basculer puis définissez l'attribut href de votre nouvelle feuille de style
  
-$('link[media='screen']').attr('href', 'alternative.css');+  $('link[media='screen']').attr('href', 'alternative.css');
    
  
-==== Comment limiter la portée d'une sélection (pour optimisation) ====+===== Comment limiter la portée d'une sélection (pour optimisation) =====
  
  
Ligne 48: Ligne 43:
 Rappelez-vous aussi que plus vous serez précis sur l'endroit où l'élément se trouve sur votre page, plus court sera temps de recherche (ou l'exécution). Rappelez-vous aussi que plus vous serez précis sur l'endroit où l'élément se trouve sur votre page, plus court sera temps de recherche (ou l'exécution).
  
-var in_stock = $('#shopping_cart_items input.is_in_stock'); +  var in_stock = $('#shopping_cart_items input.is_in_stock'); 
-<ul id="shopping_cart_items">+  <ul id="shopping_cart_items">
     <li><input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li>     <li><input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li>
     <li><input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li>     <li><input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li>
     <li><input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li>     <li><input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li>
-</ul>+  </ul>
    
  
-==== Comment utiliser correctement toggleClass ====+===== Comment utiliser correctement toggleClass =====
  
  
Ligne 62: Ligne 57:
 Là où certains développeurs doivent utiliser : Là où certains développeurs doivent utiliser :
  
-a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');+  a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
 toggleClass vous permet de le faire plus facilement : toggleClass vous permet de le faire plus facilement :
  
-a.toggleClass('blueButton');+  a.toggleClass('blueButton');
    
  
-==== Comment définir une fonction spécifique pour IE ====+===== Comment définir une fonction spécifique pour IE =====
  
  
-if ($.browser.msie) { // Internet Explorer est un sadique. }+  if ($.browser.msie) { // Internet Explorer est un sadique. }
    
  
-==== Comment remplacer un élément avec jQuery ====+===== Comment remplacer un élément avec jQuery =====
  
  
-$('#thatdiv').replaceWith('fnuh');+  $('#thatdiv').replaceWith('fnuh');
    
  
-==== Vérifier si un élément est vide ====+===== Vérifier si un élément est vide =====
  
  
-if ($('#keks').html()) { // Rien trouvé ;}+  if ($('#keks').html()) { // Rien trouvé ;}
    
  
-==== Comment trouver l'indice d'un élément dans un ensemble non-ordonné ====+===== Comment trouver l'indice d'un élément dans un ensemble non-ordonné =====
  
  
-$("ul > li").click(function () {+  $("ul > li").click(function () {
     var index = $(this).prevAll().length;     var index = $(this).prevAll().length;
-});+  });
    
  
-==== Comment lier une fonction à un événemen ==== +===== Comment lier une fonction à un événement =====
-t+
  
-$('#foo').bind('click', function() {+ 
 +  $('#foo').bind('click', function() {
     alert('L'utilisateur a cliqué sur "foo".');     alert('L'utilisateur a cliqué sur "foo".');
-});+  });
    
  
-==== Comment faire pour ajouter du code HTML à un élément ====+===== Comment faire pour ajouter du code HTML à un élément =====
  
  
-$('#lal').append('sometext');+  $('#lal').append('sometext');
    
  
-==== Comment utiliser un objet littéral pour définir les propriétés lors de la création d'un élément ====+===== Comment utiliser un objet littéral pour définir les propriétés lors de la création d'un élément =====
  
  
-var e = $("", { href: "#", class: "a-class another-class", title: "..." });+  var e = $("", { href: "#", class: "a-class another-class", title: "..." });
    
  
-==== Comment filtrer à l'aide d'attributs multiples ====+===== Comment filtrer à l'aide d'attributs multiples =====
  
  
 Cette approche basée sur la précision peut être utile lorsque vous utilisez beaucoup d'éléments de saisie similaires de types différents. Cette approche basée sur la précision peut être utile lorsque vous utilisez beaucoup d'éléments de saisie similaires de types différents.
  
-var elements = $('#someid input[type=sometype][value=somevalue]').get();+  var elements = $('#someid input[type=sometype][value=somevalue]').get();
    
  
-==== Comment précharger des images avec jQuery ====+===== Comment précharger des images avec jQuery =====
  
  
Ligne 128: Ligne 123:
 Utilisation : Utilisation :
  
-$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');+  $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
    
  
-==== Comment définir un gestionnaire d'événements pour tout élément correspondant à un sélecteur ====+===== Comment définir un gestionnaire d'événements pour tout élément correspondant à un sélecteur =====
  
  
Ligne 138: Ligne 133:
 Par exemple, dans le cas d'une table où avant il fallait utiliser : Par exemple, dans le cas d'une table où avant il fallait utiliser :
  
-// .live() +  // .live() 
-$("table").each(function(){+  $("table").each(function(){
     $("td", this).live("hover", function(){     $("td", this).live("hover", function(){
         $(this).toggleClass("hover");         $(this).toggleClass("hover");
     });     });
-});+  });
 Maintenant, utilisez : Maintenant, utilisez :
  
-$("table").delegate("td", "hover", function(){+  $("table").delegate("td", "hover", function(){
     $(this).toggleClass("hover");     $(this).toggleClass("hover");
-});+  });
    
  
-==== Comment trouver un élément option qui a été sélectionné ====+===== Comment trouver un élément option qui a été sélectionné =====
  
  
-$('#someElement').find('option:selected');+  $('#someElement').find('option:selected');
    
  
-==== Comment cacher un élément qui contient un texte d'une certaine valeur ====+===== Comment cacher un élément qui contient un texte d'une certaine valeur =====
  
  
-$("p.value:contains('thetextvalue')").hide();+  $("p.value:contains('thetextvalue')").hide();
    
  
-==== Comment faire un défilement jusqu'à une section de votre page ====+===== Comment faire un défilement jusqu'à une section de votre page =====
  
  
-jQuery.fn.autoscroll = function(selector) { +  jQuery.fn.autoscroll = function(selector) { 
-  $('html,body').animate( +    $('html,body').animate( 
-    {scrollTop: $(selector).offset().top}, +      {scrollTop: $(selector).offset().top}, 
-    500 +      500 
-  ); +    ); 
-}+  }
 Pour faire défiler jusqu'à la classe ou la zone que vous désirez atteindre : Pour faire défiler jusqu'à la classe ou la zone que vous désirez atteindre :
  
-$('.area_name').autoscroll();+  $('.area_name').autoscroll();
    
  
-==== Comment détecter n'importe quel navigateur ====+===== Comment détecter n'importe quel navigateur =====
  
  
-// Détecter Safari+  // Détecter Safari
     if( $.browser.safari)     if( $.browser.safari)
-// Détecter IE6 et supérieur+  // Détecter IE6 et supérieur
     if ($.browser.msie && $.browser.version > 6)     if ($.browser.msie && $.browser.version > 6)
-// Détecter IE6 et inférieur+  // Détecter IE6 et inférieur
     if ($.browser.msie && $.browser.version <= 6)     if ($.browser.msie && $.browser.version <= 6)
-// Détecter FireFox 2 et supérieur+  // Détecter FireFox 2 et supérieur
     if ($.browser.mozilla && $.browser.version >= '1.8')     if ($.browser.mozilla && $.browser.version >= '1.8')
    
  
-==== Comment remplacer un mot dans une chaîne ====+===== Comment remplacer un mot dans une chaîne =====
  
  
-var el = $('#id'); +  var el = $('#id'); 
-el.html(el.html().replace(/word/ig, ''));+  el.html(el.html().replace(/word/ig, ''));
    
  
-==== Comment désactiver le menu contextuel du clic-droite ====+===== Comment désactiver le menu contextuel du clic-droite =====
  
  
-$(document).bind('contextmenu',function(e){ return false; });+  $(document).bind('contextmenu',function(e){ return false; });
    
  
-==== Comment définir un sélecteur personnalisé ====+===== Comment définir un sélecteur personnalisé =====
  
  
-$.expr[':'].mycustomselector = function(element, index, meta, stack){+  $.expr[':'].mycustomselector = function(element, index, meta, stack){
     // element - est un élément DOM      // element - est un élément DOM 
     // index - l'indice de boucle courant dans la pile     // index - l'indice de boucle courant dans la pile
Ligne 214: Ligne 209:
     // retourne 'true' pour inclure l'élément courant     // retourne 'true' pour inclure l'élément courant
     // retourne 'false' pour exclure l'élément courant     // retourne 'false' pour exclure l'élément courant
-};+  };
 Utilisation du sélecteur personnalisé : Utilisation du sélecteur personnalisé :
  
-$('.someClasses:test').doSomething();+  $('.someClasses:test').doSomething();
    
  
-==== Comment vérifier si un élément existe ====+===== Comment vérifier si un élément existe =====
  
  
-if ($('#someDiv').length) { // hourra !!! il existe ... }+  if ($('#someDiv').length) { // hourra !!! il existe ... }
    
  
-==== Comment détecter les clics gauche et droite de la souris avec jQuery ====+===== Comment détecter les clics gauche et droite de la souris avec jQuery =====
  
  
-$("#someelement").live('click', function(e) {+  $("#someelement").live('click', function(e) {
     if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {     if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
         alert("Bouton gauche de la souris cliqué");         alert("Bouton gauche de la souris cliqué");
Ligne 235: Ligne 230:
     else if(e.button == 2)     else if(e.button == 2)
         alert("Bouton droite de la souris cliqué");         alert("Bouton droite de la souris cliqué");
-});+  });
    
  
-==== Comment afficher ou effacer une valeur par défaut dans un champ de saisie ====+===== Comment afficher ou effacer une valeur par défaut dans un champ de saisie =====
  
  
 Ce bout de code va vous montrer comment placer une valeur par défaut dans un champ de saisie de texte tant que l'utilisateur n'a pas entré de valeur pour la remplacer. Ce bout de code va vous montrer comment placer une valeur par défaut dans un champ de saisie de texte tant que l'utilisateur n'a pas entré de valeur pour la remplacer.
  
-swap_val = []; +  swap_val = []; 
-$(".swap").each(function(i){+  $(".swap").each(function(i){
     swap_val[i] = $(this).val();     swap_val[i] = $(this).val();
     $(this).focusin(function(){     $(this).focusin(function(){
Ligne 255: Ligne 250:
         }         }
     });     });
-}); +  }); 
-<input value="Enter Username here.." class="swap" type="text">+   
 +  <input value="Enter Username here.." class="swap" type="text">
    
  
-==== Comment cacher ou fermer automatiquement un élément après un laps de temps (supporte 1.4) ====+===== Comment cacher ou fermer automatiquement un élément après un laps de temps (supporte 1.4) =====
  
  
 Voici comment nous faisions en utilisant setTimeout avec jQuery 1.3.2 : Voici comment nous faisions en utilisant setTimeout avec jQuery 1.3.2 :
  
-setTimeout(function() {+  setTimeout(function() {
     $('.mydiv').hide('blind', {}, 500)     $('.mydiv').hide('blind', {}, 500)
-}, 5000);+  }, 5000);
 Et voici comment faire avec jQuery 1.4.* en utilisant la fonction delay() (c'est un peu comme sleep) : Et voici comment faire avec jQuery 1.4.* en utilisant la fonction delay() (c'est un peu comme sleep) :
  
-$(".mydiv").delay(5000).hide('blind', {}, 500);+  $(".mydiv").delay(5000).hide('blind', {}, 500);
    
  
-==== Comment ajouter dynamiquement des éléments créés dans le DOM ====+===== Comment ajouter dynamiquement des éléments créés dans le DOM =====
  
  
-var newDiv = $(''); +  var newDiv = $(''); 
-newDiv.attr('id','myNewDiv').appendTo('body');+  newDiv.attr('id','myNewDiv').appendTo('body');
    
  
-==== Comment limiter le nombre de caractères dans une zone de texte ====+===== Comment limiter le nombre de caractères dans une zone de texte =====
  
  
-jQuery.fn.maxLength = function(max){+  jQuery.fn.maxLength = function(max){
     this.each(function(){     this.each(function(){
         var type = this.tagName.toLowerCase();         var type = this.tagName.toLowerCase();
Ligne 306: Ligne 302:
  }  }
  });  });
-};+  };
 Utilisation : Utilisation :
  
-$('#mytextarea').maxLength(500);+  $('#mytextarea').maxLength(500);
    
  
-==== Comment créer un test de base pour une fonction ====+===== Comment créer un test de base pour une fonction =====
  
  
 On sépare les tests en modules. On sépare les tests en modules.
  
-module("Module B");+  module("Module B");
  
-test("un autre test", function() { +  test("un autre test", function() { 
-  // Specifie combien d'assertions sont attendues dans le test. +    // Specifie combien d'assertions sont attendues dans le test. 
-  expect(2); +    expect(2); 
-  // Une assertion de comparaison, équivalente à assertEquals de JUnit. +    // Une assertion de comparaison, équivalente à assertEquals de JUnit. 
-  equals( true, false, "test raté" ); +    equals( true, false, "test raté" ); 
-  equals( true, true, "test réussi" ); +    equals( true, true, "test réussi" ); 
-});+  });
    
  
-==== Comment cloner un élément avec jQuery ====+===== Comment cloner un élément avec jQuery =====
  
  
-var cloned = $('#somediv').clone();+  var cloned = $('#somediv').clone();
    
  
-==== Comment tester si un élément est visible en jQuery ====+===== Comment tester si un élément est visible en jQuery =====
  
  
-if($(element).is(':visible') == 'true') { // l'élément est visible }+  if($(element).is(':visible') == 'true') { // l'élément est visible }
    
  
-==== Comment centrer un élément à l'écran ====+===== Comment centrer un élément à l'écran =====
  
  
-jQuery.fn.center = function () {+  jQuery.fn.center = function () {
     this.css('position','absolute');     this.css('position','absolute');
     this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');     this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
     this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');     this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
     return this;     return this;
-}+  }
 Utilisation : Utilisation :
  
-$(element).center();+  $(element).center();
    
  
-==== Comment mettre les valeurs de tous les éléments d'un même nom dans un tableau ====+===== Comment mettre les valeurs de tous les éléments d'un même nom dans un tableau =====
  
  
-var arrInputValues = new Array(); +  var arrInputValues = new Array(); 
-$("input[name='table\\[\\]']").each(function(){+  $("input[name='table\\[\\]']").each(function(){
     arrInputValues.push($(this).val());     arrInputValues.push($(this).val());
-});+  });
    
  
-==== Comment retirer les balises HTML de votre élément ====+===== Comment retirer les balises HTML de votre élément =====
  
  
-(function($) {+  (function($) {
     $.fn.stripHtml = function() {     $.fn.stripHtml = function() {
         var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;         var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
Ligne 376: Ligne 372:
         return $(this);         return $(this);
     }     }
-})(jQuery);+  })(jQuery);
 Utilisation : Utilisation :
  
-$('p').stripHtml();+  $('p').stripHtml();
    
  
-==== Comment obtenir un élément parent à l'aide de closest() ====+===== Comment obtenir un élément parent à l'aide de closest() =====
  
  
-$('#searchBox').closest('div');+  $('#searchBox').closest('div');
    
  
-==== Comment enregistrer des événements jQuery en utilisant Firebug et Firefox ====+===== Comment enregistrer des événements jQuery en utilisant Firebug et Firefox =====
  
  
 Permet l'enregistrement chainable Permet l'enregistrement chainable
  
-$('#someDiv').hide().log('div hidden').addClass('someClass'); +  $('#someDiv').hide().log('div hidden').addClass('someClass'); 
-jQuery.log = jQuery.fn.log = function (msg) {+  jQuery.log = jQuery.fn.log = function (msg) {
     if (console){     if (console){
         console.log("%s: %o", msg, this);         console.log("%s: %o", msg, this);
     }     }
     return this;     return this;
-};+  };
    
  
-==== Comment forcer les liens à s'ouvrir dans une fenêtre pop-up ====+===== Comment forcer les liens à s'ouvrir dans une fenêtre pop-up =====
  
  
-jQuery('a.popup').live('click', function(){+  jQuery('a.popup').live('click', function(){
     newwindow=window.open($(this).attr('href'),'','height=200,width=150');     newwindow=window.open($(this).attr('href'),'','height=200,width=150');
     if (window.focus) {newwindow.focus()}     if (window.focus) {newwindow.focus()}
     return false;     return false;
-});+  });
    
  
-==== Comment forcer les liens à s'ouvrir dans un nouvel onglet ====+===== Comment forcer les liens à s'ouvrir dans un nouvel onglet =====
  
  
-jQuery('a.newTab').live('click', function(){+  jQuery('a.newTab').live('click', function(){
     newwindow=window.open($(this).href);     newwindow=window.open($(this).href);
     jQuery(this).target = "_blank";     jQuery(this).target = "_blank";
     return false;     return false;
-});+  });
    
  
-==== Comment sélectionner les frères et sœurs avec jQuery en utilisant .siblings() ====+===== Comment sélectionner les frères et sœurs avec jQuery en utilisant .siblings() =====
  
  
 Plutôt que de faire ceci : Plutôt que de faire ceci :
  
-$('#nav li').click(function(){+  $('#nav li').click(function(){
     $('#nav li').removeClass('active');     $('#nav li').removeClass('active');
     $(this).addClass('active');     $(this).addClass('active');
-});+  });
 Faites cela : Faites cela :
  
-$('#nav li').click(function(){+  $('#nav li').click(function(){
     $(this).addClass('active')     $(this).addClass('active')
         .siblings().removeClass('active');         .siblings().removeClass('active');
-});+  });
    
  
-==== Comment activer/désactiver toutes les cases à cocher sur une page ====+===== Comment activer/désactiver toutes les cases à cocher sur une page =====
  
  
-var tog = false; // ou 'true' si elles sont cochées au chargement de la page +  var tog = false; // ou 'true' si elles sont cochées au chargement de la page 
-$('a').click(function() {+  $('a').click(function() {
     $("input[type=checkbox]").attr("checked",!tog);     $("input[type=checkbox]").attr("checked",!tog);
     tog = !tog;     tog = !tog;
-});+  });
    
  
-==== Comment filtrer une liste d'éléments basés sur une entrée texte (input text) ====+===== Comment filtrer une liste d'éléments basés sur une entrée texte (input text) =====
  
  
 Si la valeur de l'élément correspond à celle du texte écrit, l'élément sera renvoyé. Si la valeur de l'élément correspond à celle du texte écrit, l'élément sera renvoyé.
  
-$('.someClass').filter(function() {+  $('.someClass').filter(function() {
     return $(this).attr('value') == $('input#someId').val() ;     return $(this).attr('value') == $('input#someId').val() ;
-})+  })
    
  
-==== Comment obtenir les coordonnées X/Y du curseur de la souris ====+===== Comment obtenir les coordonnées X/Y du curseur de la souris =====
  
  
-$(document).mousemove(function(e){+  $(document).mousemove(function(e){
     $(document).ready(function() {     $(document).ready(function() {
         $().mousemove(function(e){         $().mousemove(function(e){
         $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);         $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
     });     });
-});+  });
    
  
-==== Comment faire pour qu'un élément de liste (LI) soit entièrement cliquable ====+===== Comment faire pour qu'un élément de liste (LI) soit entièrement cliquable =====
  
  
-$("ul li").click(function(){ +  $("ul li").click(function(){ 
-  window.location=$(this).find("a").attr("href"); return false; +    window.location=$(this).find("a").attr("href"); return false; 
-});$("ul li").click(function(){ +  });$("ul li").click(function(){ 
-  window.location=$(this).find("a").attr("href"); return false; +    window.location=$(this).find("a").attr("href"); return false; 
-}); +  }); 
-<ul> +  <ul> 
-<li><a href="#">Link 1</a></li> +    <li><a href="#">Link 1</a></li> 
-<li><a href="#">Link 2</a></li> +    <li><a href="#">Link 2</a></li> 
-<li><a href="#">Link 3</a></li> +    <li><a href="#">Link 3</a></li> 
-<li><a href="#">Link 4</a></li> +    <li><a href="#">Link 4</a></li> 
-</ul>+  </ul>
    
  
-==== Comment analyser du XML avec jQuery (exemple de base) ====+===== Comment analyser du XML avec jQuery (exemple de base) =====
  
  
-function parseXml(xml) {+  function parseXml(xml) {
  // trouver chaque tutoriel et afficher l'auteur  // trouver chaque tutoriel et afficher l'auteur
  $(xml).find("Tutoriel").each(function()  $(xml).find("Tutoriel").each(function()
Ligne 495: Ligne 491:
  $("#output").append($(this).attr("author") + "");  $("#output").append($(this).attr("author") + "");
  });  });
-}+  }
    
  
-==== Comment vérifier si une image a été complètement chargée ====+===== Comment vérifier si une image a été complètement chargée =====
  
  
-$('#theImage').attr('src', 'image.jpg').load(function() {+  $('#theImage').attr('src', 'image.jpg').load(function() {
     alert('Cette image a été chargée');     alert('Cette image a été chargée');
-});+  });
    
  
-==== Comment donner un espace de noms aux événements avec jQuery ====+===== Comment donner un espace de noms aux événements avec jQuery =====
  
  
 Les événements peuvent avoir un espace de noms comme ceci : Les événements peuvent avoir un espace de noms comme ceci :
  
-$('input').bind('blur.validation', function(e){+  $('input').bind('blur.validation', function(e){
     // ...     // ...
-});+  });
 La méthode data() accepte également des espaces de noms : La méthode data() accepte également des espaces de noms :
  
-$('input').data('validation.isValid', true);+  $('input').data('validation.isValid', true);
    
  
-==== Comment savoir si les cookies sont activés ou pas ====+===== Comment savoir si les cookies sont activés ou pas =====
  
  
-var dt = new Date();+  var dt = new Date();
     dt.setSeconds(dt.getSeconds() + 60);     dt.setSeconds(dt.getSeconds() + 60);
     document.cookie = "cookietest=1; expires=" + dt.toGMTString();     document.cookie = "cookietest=1; expires=" + dt.toGMTString();
Ligne 532: Ligne 528:
    
  
-==== Comment faire expirer un cookie ====+===== Comment faire expirer un cookie =====
  
  
-var date = new Date(); +  var date = new Date(); 
-date.setTime(date.getTime() + (x * 60 * 1000)); +  date.setTime(date.getTime() + (x * 60 * 1000)); 
-$.cookie('example', 'foo', { expires: date });+  $.cookie('example', 'foo', { expires: date });
    
  
-==== Remplacez tous les URL de votre page par un lien cliquable ====+===== Remplacez tous les URL de votre page par un lien cliquable =====
  
  
-$.fn.replaceUrl = function() {+  $.fn.replaceUrl = function() {
     var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;     var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
     this.each(function() {     this.each(function() {
Ligne 551: Ligne 547:
     });     });
     return $(this);     return $(this);
-}+  }
 Utilisation : Utilisation :
  
-$('p').replaceUrl();+  $('p').replaceUrl();
    
  
- +===== Trier des div suivant les paramètres ===== 
 + 
 +  $('#produits').find('.produit').sort(function(a,b){ return +a.dataset.prix - +b.dataset.prix; }).appendTo('#produits'); 
 + 
 +http://jsfiddle.net/UdvDD/
devweb/jquery.1370529120.txt.gz · Dernière modification: 06-06-2013 16:32 de edmc73

Outils de la page

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki