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é
.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
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
//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
//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
//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');
6. Comment utiliser correctement ToggleClass
//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
if ($.browser.msie) {
// Internet Explorer est un sadique.
>
8. Utilisez jQuery pour remplacer un élément
$('#thatdiv').replaceWith('fnuh ');
9. Vérifiez si un élément est vide
if ($('#keks').html( )) {
//Rien trouvé ;
>
10. Trouver l'index d'un élément dans un ensemble non ordonné
$("ul > li").click( function () { var index = $(this).prevAll().length });
11. Lier une fonction à un événement
$('#foo').bind('click ', function () { alert('L'utilisateur a cliqué sur "foo."' });
12. Ajouter du HTML à un élément
$('#lal').append('sometext ');
13. Utilisez des objets pour définir des attributs lors de la création d'éléments
var e = $("", { href: " #", classe : "une classe une autre classe", titre : "..." });
14. Utilisez des filtres pour filtrer plusieurs attributs
//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
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é
$('#someElement').find('option :sélectionné' );
18. Masquer les éléments contenant des valeurs spécifiques
$("p.value:contains('thetextvalue' )") .hide();
19. Faites défiler automatiquement jusqu'à une zone spécifique de la page
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
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
var el = $('#id'); .html( el.html().replace(/word/ig, ''));
22. Fermez le menu contextuel
$(document).bind('contextmenu',function (e) { return false });
23. Définir un sélecteur personnalisé
$.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
if ($('#someDiv').length) {
//hourra !!! ça existe...
>
25. Utilisez jQuery pour déterminer les clics gauche et droit de la souris
$("#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
//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)
//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
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程序设计有所帮助。
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
