50 Snippets jQuery qui peuvent vous aider dans vos projets JavaScript

Introduction

Voici la traduction de l'article d'Addy OSMANI, décrivant 50 Snippets jQuery qui peuvent vous aider dans vos projets JavaScript.
source : 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer

 

Présentation

Dans ce, je vais vous montrer 50 Snippets jQuery qui peut vous aider dans vos projets JavaScript.
Certains de ces fragments font appel à de nouvelles fonctions de jQuery 1.4.2, tandis que d'autres sont des fonctions réellement utiles ou des méthodes qui peuvent vous aider à faire les choses mieux ou plus vite.
J'ai essayé de garder à l'esprit l'optimisation des performances avec ces extraits de code.
Si vous pensez que certains de ces snippets pourraient être mieux faits, n'hésitez pas à me le faire savoir.
J'espère que vous trouverez cette page utile.

 

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

 

Comment réutiliser vos recherches d'élements

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

 

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.

$("input").has(".email").addClass("email_icon");

 

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

$('link[media='screen']').attr('href', 'alternative.css');

 

Comment limiter la portée d'une sélection (pour optimisation)

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>

 

Comment utiliser correctement toggleClass

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

 

Comment définir une fonction spécifique pour IE

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

 

Comment remplacer un élément avec jQuery

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

 

Vérifier si un élément est vide

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

 

Comment trouver l'indice d'un élément dans un ensemble non-ordonné

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

 

Comment lier une fonction à un événement

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

 

Comment faire pour ajouter du code HTML à un élément

$('#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

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

 

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.

var elements = $('#someid input[type=sometype][value=somevalue]').get();

 

Comment précharger des images avec jQuery

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

Utilisation :

$.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

$('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");
});

 

Comment trouver un élément option qui a été sélectionné

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

 

Comment cacher un élément qui contient un texte d'une certaine valeur

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

 

Comment faire un défilement jusqu'à une section de votre page

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

 

Comment détecter n'importe quel navigateur

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

 

Comment remplacer un mot dans une chaîne

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

 

Comment désactiver le menu contextuel du clic-droite

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

 

Comment définir un sélecteur personnalisé

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

 

Comment vérifier si un élément existe

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

 

Comment détecter les clics gauche et droite de la souris avec jQuery

$("#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é");
});

 

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.

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

 

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 :

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

 

Comment ajouter dynamiquement des éléments créés dans le DOM

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

 

Comment limiter le nombre de caractères dans une zone de texte

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

 

Comment créer un test de base pour une fonction

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

 

Comment cloner un élément avec jQuery

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

 

Comment tester si un élément est visible en jQuery

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

 

Comment centrer un élément à l'écran

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

 

Comment mettre les valeurs de tous les éléments d'un même nom dans un tableau

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

 

Comment retirer les balises HTML de votre élément

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

Utilisation :

$('p').stripHtml();

 

Comment obtenir un élément parent à l'aide de closest()

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

 

Comment enregistrer des événements jQuery en utilisant Firebug et Firefox

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

 

Comment forcer les liens à s'ouvrir dans une fenêtre pop-up

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

 

Comment forcer les liens à s'ouvrir dans un nouvel onglet

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

 

Comment sélectionner les frères et sœurs avec jQuery en utilisant .siblings()

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

 

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
$('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
});

 

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é.

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

 

Comment obtenir les coordonnées X/Y du curseur de la souris

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

 

Comment faire pour qu'un élément de liste (LI) soit entièrement cliquable

$("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>

 

Comment analyser du XML avec jQuery (exemple de base)

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

 

Comment vérifier si une image a été complètement chargée

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

 

Comment donner un espace de noms aux événements avec jQuery

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

 

Comment savoir si les cookies sont activés ou pas

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
    }

 

Comment faire expirer un cookie

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

 

Remplacez tous les URL de votre page par un lien cliquable

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