30 compétences classiques en développement de code jQuery

Les exemples de cet article résument 30 compétences classiques en développement de code jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

1. Créer un filtre imbriqué

Copier le code Le code est le suivant :

.filter(":not(:has(.selected ))" ) //Supprimer tous les éléments qui ne contiennent pas la classe .selected 

2. Réutilisez vos requêtes d'éléments

Copier le code Le code est le suivant :

var allItems = $("div.item"); 

var keepList = $("div#container1 div.item");
noms de classe : $(formToLookAt " input:checked").each(function() { keepListkeepList = keepList.filter("." $(this).attr("name"));

});

3. Utilisez has() pour déterminer si un élément contient une classe ou un élément spécifique

Copier le code Le code est le suivant :

//jQuery 1.4.* inclut la prise en charge de la méthode has . Cette méthode trouvera 

//si un élément contient une certaine autre classe d'élément ou quoi que ce soit

//vous les recherchez et faites tout ce que vous voulez 
.
$("input").has(".email").addClass("email_icon");

4. Utilisez jQuery pour changer de style

Copier le code Le code est le suivant :

//Recherchez le type de média que vous souhaitez changer puis définissez le href sur votre nouvelle feuille de style

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

5. Limiter la zone sélectionnée

Copier le code Le code est le suivant :

//Dans la mesure du possible, pré-fixez vos noms de classe avec un nom de tag
//pour que jQuery n'ait pas à passer plus de temps à chercher
//pour l'élément que vous recherchez. N'oubliez pas non plus que tout
//vous pouvez faire pour être plus précis sur l'endroit où se trouve l'élément
//sur votre page réduira les temps d'exécution/de recherche
var in_stock = $('#shopping_cart_items input.is_in_stock');

Item X

Item Y

Item Z

6. Comment utiliser correctement ToggleClass

Copier le code Le code est le suivant :

//Toggle class permet d'ajouter ou de supprimer une classe 

//d'un élément en fonction de la présence de celui-ci

//classe. Où certains développeurs utiliseraient :

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

//toggleClass vous permet de le faire facilement en utilisanta.toggleClass('blueButton');

7. Définissez les fonctions spécifiées par IE

Copier le code Le code est le suivant :

if ($.browser.msie) { 

// Internet Explorer est un sadique.

>

8. Utilisez jQuery pour remplacer un élément

Copier le code Le code est le suivant :

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

9. Vérifiez si un élément est vide

Copier le code Le code est le suivant :

if ($('#keks').html( )) { 

//Rien trouvé ;

>

10. Trouver l'index d'un élément dans un ensemble non ordonné

Copier le code Le code est le suivant :

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

11. Lier une fonction à un événement

Copier le code Le code est le suivant :

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

12. Ajouter du HTML à un élément

Copier le code Le code est le suivant :

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

13. Utilisez des objets pour définir des attributs lors de la création d'éléments

Copier le code Le code est le suivant :

var e = $("", { href: " #", classe : "une classe une autre classe", titre : "..." });

14. Utilisez des filtres pour filtrer plusieurs attributs

Copier le code Le code est le suivant :

//Cette approche basée sur la précision peut être utile lorsque vous utiliser

//beaucoup d'éléments d'entrée similaires qui ont des types différents

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

15. Utilisez jQuery pour précharger les images

Copier le code Le code est le suivant :

jQuery.preloadImages = function() { for(var i = 0; je').attr('src', arguments[i]); // Utilisation $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. Définissez des gestionnaires d'événements pour tout événement correspondant à un sélecteur
[code]$('button.someClass').live('click', someFunction); //Notez que dans jQuery 1.4.2, les options de délégué et de non-délégation ont été
//introduits pour remplacer le live car ils offrent une meilleure prise en charge du contexte
//Par exemple, en termes de table où vous utilisiez auparavant..
//
.live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }) ; });
//Maintenant, utilisez..
$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

17. Recherchez l'élément d'option sélectionné

Copier le code Le code est le suivant :

$('#someElement').find('option :sélectionné' );

18. Masquer les éléments contenant des valeurs spécifiques

Copier le code Le code est le suivant :

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

19. Faites défiler automatiquement jusqu'à une zone spécifique de la page

Copier le code Le code est le suivant :

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

);
// Ensuite, faites défiler jusqu'à la classe/zone à laquelle vous souhaitez accéder, comme ceci :

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

20. Détecter divers navigateurs

Copier le code Le code est le suivant :

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

21. Remplacer les mots dans la chaîne

Copier le code Le code est le suivant :

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

22. Fermez le menu contextuel

Copier le code Le code est le suivant :

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

23. Définir un sélecteur personnalisé

Copier le code Le code est le suivant :

$.expr[':'].mycustomselector = function (élément, index, méta, pile){

// élément- est un élément DOM

// index - l'index de la boucle actuelle dans la pile

// méta - métadonnées sur votre sélecteur

// pile - pile de tous les éléments à boucler

// Renvoie true pour inclure l'élément actuel

// Renvoie false pour exclure l'élément actuel

};

// Utilisation du sélecteur personnalisé :

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

24. Déterminer si un élément existe

Copier le code Le code est le suivant :

if ($('#someDiv').length) {

//hourra !!! ça existe...

>

25. Utilisez jQuery pour déterminer les clics gauche et droit de la souris

Copier le code Le code est le suivant :

$("#someelement").live('click ', function (e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { alert("Clic gauche sur le bouton gauche de la souris" ); } else if(e.button == 2) alert("Clic droit sur le bouton de la souris" });

26. Afficher ou supprimer la valeur par défaut de la zone de saisie

Copier le code Le code est le suivant :

//Cet extrait vous montrera comment conserver une valeur par défaut valeur

//dans un champ de saisie de texte lorsqu'un utilisateur n'a pas saisi

//une 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] } }); .." type=text>

27. Masquer ou fermer automatiquement les éléments après un délai spécifié (pris en charge dans la version 1.4)

Copier le code Le code est le suivant :

//Voici comment nous faisions dans la version 1.3. 2 en utilisant setTimeout 

setTimeout(function() { $('.mydiv').hide('blind', {}, 500) }, 5000);
//Et voici comment vous pouvez le faire avec la version 1.4 en utilisant la fonctionnalité delay() (c'est un peu comme le sommeil)

$(".mydiv").delay(5000).hide('blind', {}, 500);

28. Créer dynamiquement des éléments dans DOM

Copier le code Le code est le suivant :

var newgbin1Div = $('');

newgbin1Div.attr('id','gbin1.com').appendTo('body');

29. Limiter le nombre de caractères dans la zone de texte

Copier le code Le code est le suivant :

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); 

var inputType = this.type? this.type.toLowerCase() : null; if(type == "entrée" && 

inputType == "texte" || inputType == "mot de passe"){

//Appliquez la norme maxLength this.maxLength = max;

} else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || événement ;

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 : 

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

30. 为函数创建一个基本测试用例

复制代码代码如下 :

//Séparez les tests en modules.

module("Module B");

test("un autre test de gbin1.com", function() {

//Spécifiez le nombre d'assertions qui doivent être exécutées dans un test. attendre(2); //Une assertion de comparaison, équivalente à assertEquals de JUnit. 

est égal( vrai, faux, "échec du test" );

est égal à( vrai, vrai, "réussite du test" ); 

});

希望本文所述对大家的jquery程序设计有所帮助。

30 compétences classiques en développement de code jQuery_jquery