jQuery

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) :

.filter(":not(:has(.selected))")

var allItems = $(“div.item”); var keepList = $(“div#container1 div.item”); 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() {
  keepList = keepList.filter("." + $(this).attr("name"));
});

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");

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');

Lorsque c’est possible, pré-fixez vos noms de classe avec le nom d’une balise pour que jQuery ne passe pas trop de temps à chercher l’élément que vous recherchez. 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');
<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-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>
</ul>

toggleClass vous permet d’ajouter ou de supprimer une classe à partir d’un élément en fonction de la présence de cette classe. Là où certains développeurs doivent utiliser :

a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

toggleClass vous permet de le faire plus facilement :

a.toggleClass('blueButton');

if ($.browser.msie) { // Internet Explorer est un sadique. }

$('#thatdiv').replaceWith('fnuh');

if ($('#keks').html()) { // Rien trouvé ;}

$("ul > li").click(function () {
  var index = $(this).prevAll().length;
});

$('#foo').bind('click', function() {
  alert('L'utilisateur a cliqué sur "foo".');
});

$('#lal').append('sometext');

var e = $("", { href: "#", class: "a-class another-class", title: "..." });

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();

jQuery.preloadImages = function() { for(var i = 0; i’).attr(‘src’, arguments[i]); } }; Utilisation :

$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

$(‘button.someClass’).live(‘click’, someFunction); Notez que dans jQuery 1.4.2, les options delegate et undelegate ont été introduites pour remplacer live, car elles offrent un meilleur soutien pour le contexte. Par exemple, dans le cas d’une table où avant il fallait utiliser :

// .live()
$("table").each(function(){
  $("td", this).live("hover", function(){
      $(this).toggleClass("hover");
  });
});

Maintenant, utilisez :

$("table").delegate("td", "hover", function(){
  $(this).toggleClass("hover");
});

$('#someElement').find('option:selected');

$("p.value:contains('thetextvalue')").hide();

jQuery.fn.autoscroll = function(selector) {
  $('html,body').animate(
    {scrollTop: $(selector).offset().top},
    500
  );
}

Pour faire défiler jusqu’à la classe ou la zone que vous désirez atteindre :

$('.area_name').autoscroll();

// Détecter Safari
  if( $.browser.safari)
// Détecter IE6 et supérieur
  if ($.browser.msie && $.browser.version > 6)
// Détecter IE6 et inférieur
  if ($.browser.msie && $.browser.version <= 6)
// Détecter FireFox 2 et supérieur
  if ($.browser.mozilla && $.browser.version >= '1.8')

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

$(document).bind('contextmenu',function(e){ return false; });

$.expr[':'].mycustomselector = function(element, index, meta, stack){
  // element - est un élément DOM 
  // index - l'indice de boucle courant dans la pile
  // meta - méta données du sélecteur
  // stack - pile de tous les éléments de la boucle

  // retourne 'true' pour inclure l'élément courant
  // retourne 'false' pour exclure l'élément courant
};

Utilisation du sélecteur personnalisé :

$('.someClasses:test').doSomething();

if ($('#someDiv').length) { // hourra !!! il existe ... }

$("#someelement").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
      alert("Bouton gauche de la souris cliqué");
  }
  else if(e.button == 2)
      alert("Bouton droite de la souris cliqué");
});

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").each(function(i){
  swap_val[i] = $(this).val();
  $(this).focusin(function(){
      if ($(this).val() == swap_val[i]) {
          $(this).val("");
      }
  }).focusout(function(){
      if ($.trim($(this).val()) == "") {
          $(this).val(swap_val[i]);
      }
  });
});

<input value="Enter Username here.." class="swap" type="text">

Voici comment nous faisions en utilisant setTimeout avec jQuery 1.3.2 :

setTimeout(function() {
  $('.mydiv').hide('blind', {}, 500)
}, 5000);

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);

var newDiv = $('');
newDiv.attr('id','myNewDiv').appendTo('body');

jQuery.fn.maxLength = function(max){
  this.each(function(){
      var type = this.tagName.toLowerCase();
	var inputType = this.type? this.type.toLowerCase() : null;
	if(type == "input" && inputType == "text" || inputType == "password"){
		//Apply the standard maxLength
		this.maxLength = max;
	}
	else if(type == "textarea"){
		this.onkeypress = function(e){
			var ob = e || event;
			var keyCode = ob.keyCode;
			var hasSelection = document.selection? 
			    document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
			return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 
			    || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
		};
		this.onkeyup = function(){
			if(this.value.length > max){
				this.value = this.value.substring(0,max);
			}
		};
	}
});
};

Utilisation :

$('#mytextarea').maxLength(500);

On sépare les tests en modules.

module("Module B");

test("un autre test", function() {
  // Specifie combien d'assertions sont attendues dans le test.
  expect(2);
  // Une assertion de comparaison, équivalente à assertEquals de JUnit.
  equals( true, false, "test raté" );
  equals( true, true, "test réussi" );
});

var cloned = $('#somediv').clone();

if($(element).is(':visible') == 'true') { // l'élément est visible }

jQuery.fn.center = function () {
  this.css('position','absolute');
  this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
  this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
  return this;
}

Utilisation :

$(element).center();

var arrInputValues = new Array();
$("input[name='table\\[\\]']").each(function(){
  arrInputValues.push($(this).val());
});

(function($) {
  $.fn.stripHtml = function() {
      var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
      this.each(function() {
          $(this).html(
              $(this).html().replace(regexp,”")
          );
      });
      return $(this);
  }
})(jQuery);

Utilisation :

$('p').stripHtml();

$('#searchBox').closest('div');

Permet l’enregistrement chainable

$('#someDiv').hide().log('div hidden').addClass('someClass');
jQuery.log = jQuery.fn.log = function (msg) {
  if (console){
      console.log("%s: %o", msg, this);
  }
  return this;
};

jQuery('a.popup').live('click', function(){
  newwindow=window.open($(this).attr('href'),'','height=200,width=150');
  if (window.focus) {newwindow.focus()}
  return false;
});

jQuery('a.newTab').live('click', function(){
  newwindow=window.open($(this).href);
  jQuery(this).target = "_blank";
  return false;
});

Plutôt que de faire ceci :

$('#nav li').click(function(){
  $('#nav li').removeClass('active');
  $(this).addClass('active');
});

Faites cela :

$('#nav li').click(function(){
  $(this).addClass('active')
      .siblings().removeClass('active');
});

var tog = false; // ou 'true' si elles sont cochées au chargement de la page
$('a').click(function() {
  $("input[type=checkbox]").attr("checked",!tog);
  tog = !tog;
});

Si la valeur de l’élément correspond à celle du texte écrit, l’élément sera renvoyé.

$('.someClass').filter(function() {
  return $(this).attr('value') == $('input#someId').val() ;
})

$(document).mousemove(function(e){
  $(document).ready(function() {
      $().mousemove(function(e){
      $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
  });
});

$("ul li").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
});$("ul li").click(function(){
  window.location=$(this).find("a").attr("href"); return false;
});
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

function parseXml(xml) {
// trouver chaque tutoriel et afficher l'auteur
$(xml).find("Tutoriel").each(function()
{
$("#output").append($(this).attr("author") + "");
});
}

$('#theImage').attr('src', 'image.jpg').load(function() {
  alert('Cette image a été chargée');
});

Les événements peuvent avoir un espace de noms comme ceci :

$('input').bind('blur.validation', function(e){
  // ...
});

La méthode data() accepte également des espaces de noms :

$('input').data('validation.isValid', true);

var dt = new Date();
  dt.setSeconds(dt.getSeconds() + 60);
  document.cookie = "cookietest=1; expires=" + dt.toGMTString();
  var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
  if(!cookiesEnabled)
  {
      // les cookies ne sont pas activés
  }

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

$.fn.replaceUrl = function() {
  var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
  this.each(function() {
      $(this).html(
          $(this).html().replace(regexp,'<a href="$1">$1</a>')
      );
  });
  return $(this);
}

Utilisation :

$('p').replaceUrl();

$('#produits').find('.produit').sort(function(a,b){ return +a.dataset.prix - +b.dataset.prix; }).appendTo('#produits');

http://jsfiddle.net/UdvDD/