Outils pour utilisateurs

Outils du site

Piste:
devweb:jquery (lu 51485 fois)

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
devweb:jquery [06-06-2013 16:35]
edmc73 		devweb:jquery [01-12-2014 23:36] (Version actuelle)
edmc73
Ligne 7: Ligne 7:
 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))")
    
  
Ligne 16: 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"));
-});+  });
    
  
Ligne 26: Ligne 26:
 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");
    
  
Ligne 34: Ligne 34:
 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');
    
  
Ligne 43: 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>
    
  
Ligne 57: 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');
    
  
Ligne 66: Ligne 66:
  
  
-if ($.browser.msie) { // Internet Explorer est un sadique. }+  if ($.browser.msie) { // Internet Explorer est un sadique. }
    
  
Ligne 72: Ligne 72:
  
  
-$('#thatdiv').replaceWith('fnuh');+  $('#thatdiv').replaceWith('fnuh');
    
  
Ligne 78: Ligne 78:
  
  
-if ($('#keks').html()) { // Rien trouvé ;}+  if ($('#keks').html()) { // Rien trouvé ;}
    
  
Ligne 84: Ligne 84:
  
  
-$("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".');
-});+  });
    
  
Ligne 100: Ligne 100:
  
  
-$('#lal').append('sometext');+  $('#lal').append('sometext');
    
  
Ligne 106: Ligne 106:
  
  
-var e = $("", { href: "#", class: "a-class another-class", title: "..." });+  var e = $("", { href: "#", class: "a-class another-class", title: "..." });
    
  
Ligne 114: Ligne 114:
 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();
    
  
Ligne 123: Ligne 123:
 Utilisation : Utilisation :
  
-$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');+  $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
    
  
Ligne 133: 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");
-});+  });
    
  
Ligne 149: Ligne 149:
  
  
-$('#someElement').find('option:selected');+  $('#someElement').find('option:selected');
    
  
Ligne 155: Ligne 155:
  
  
-$("p.value:contains('thetextvalue')").hide();+  $("p.value:contains('thetextvalue')").hide();
    
  
Ligne 161: Ligne 161:
  
  
-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();
    
  
Ligne 175: Ligne 175:
  
  
-// 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')
    
Ligne 188: Ligne 188:
  
  
-var el = $('#id'); +  var el = $('#id'); 
-el.html(el.html().replace(/word/ig, ''));+  el.html(el.html().replace(/word/ig, ''));
    
  
Ligne 195: Ligne 195:
  
  
-$(document).bind('contextmenu',function(e){ return false; });+  $(document).bind('contextmenu',function(e){ return false; });
    
  
Ligne 201: Ligne 201:
  
  
-$.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 209: 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();
    
  
Ligne 218: Ligne 218:
  
  
-if ($('#someDiv').length) { // hourra !!! il existe ... }+  if ($('#someDiv').length) { // hourra !!! il existe ... }
    
  
Ligne 224: Ligne 224:
  
  
-$("#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 230: 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é");
-});+  });
    
  
Ligne 238: Ligne 238:
 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 250: Ligne 250:
         }         }
     });     });
-}); +  }); 
-<input value="Enter Username here.." class="swap" type="text">+   
 +  <input value="Enter Username here.." class="swap" type="text">
    
  
Ligne 259: Ligne 260:
 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);
    
  
Ligne 270: Ligne 271:
  
  
-var newDiv = $(''); +  var newDiv = $(''); 
-newDiv.attr('id','myNewDiv').appendTo('body');+  newDiv.attr('id','myNewDiv').appendTo('body');
    
  
Ligne 277: Ligne 278:
  
  
-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 301: Ligne 302:
  }  }
  });  });
-};+  };
 Utilisation : Utilisation :
  
-$('#mytextarea').maxLength(500);+  $('#mytextarea').maxLength(500);
    
  
Ligne 312: Ligne 313:
 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" ); 
-});+  });
    
  
Ligne 326: Ligne 327:
  
  
-var cloned = $('#somediv').clone();+  var cloned = $('#somediv').clone();
    
  
Ligne 332: Ligne 333:
  
  
-if($(element).is(':visible') == 'true') { // l'élément est visible }+  if($(element).is(':visible') == 'true') { // l'élément est visible }
    
  
Ligne 338: Ligne 339:
  
  
-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();
    
  
Ligne 352: Ligne 353:
  
  
-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());
-});+  });
    
  
Ligne 361: Ligne 362:
  
  
-(function($) {+  (function($) {
     $.fn.stripHtml = function() {     $.fn.stripHtml = function() {
         var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;         var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
Ligne 371: Ligne 372:
         return $(this);         return $(this);
     }     }
-})(jQuery);+  })(jQuery);
 Utilisation : Utilisation :
  
-$('p').stripHtml();+  $('p').stripHtml();
    
  
Ligne 380: Ligne 381:
  
  
-$('#searchBox').closest('div');+  $('#searchBox').closest('div');
    
  
Ligne 388: Ligne 389:
 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;
-};+  };
    
  
Ligne 400: Ligne 401:
  
  
-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;
-});+  });
    
  
Ligne 410: Ligne 411:
  
  
-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;
-});+  });
    
  
Ligne 422: Ligne 423:
 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');
-});+  });
    
  
Ligne 437: Ligne 438:
  
  
-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;
-});+  });
    
  
Ligne 449: Ligne 450:
 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() ;
-})+  })
    
  
Ligne 457: Ligne 458:
  
  
-$(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);
     });     });
-});+  });
    
  
Ligne 468: Ligne 469:
  
  
-$("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>
    
  
Ligne 484: Ligne 485:
  
  
-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 490: Ligne 491:
  $("#output").append($(this).attr("author") + "");  $("#output").append($(this).attr("author") + "");
  });  });
-}+  }
    
  
Ligne 496: Ligne 497:
  
  
-$('#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');
-});+  });
    
  
Ligne 506: Ligne 507:
 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);
    
  
Ligne 517: Ligne 518:
  
  
-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 530: Ligne 531:
  
  
-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 });
    
  
Ligne 538: Ligne 539:
  
  
-$.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 546: 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.1370529320.txt.gz · Dernière modification: 06-06-2013 16:35 de edmc73

Outils de la page

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki