Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 16:26:57
original
1424 Les gens l'ont consulté

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程序设计有所帮助。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal