Les exemples de cet article résument les techniques classiques et pratiques de développement de code jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
23. Fonction de chargement retardé de jQuery
Vous voulez retarder quelque chose ?
$(document).ready(function() { window.setTimeout(function() { // do something }, 1000); });
24. Supprimer la fonction mot
Vous souhaitez supprimer un ou plusieurs mots en particulier ?
$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")); });
25. Vérifiez si l'élément existe dans la collection d'objets jquery
Testez simplement avec la propriété .length si l'élément existe.
$(document).ready(function() { if ($('#id').length) { // do something } });
26. Rendre l'intégralité du DIV cliquable
Vous voulez rendre le div complet cliquable ?
$(document).ready(function() { $("div").click(function(){ //get the url from href attribute and launch the url window.location=$(this).find("a").attr("href"); return false; }); // how to use <DIV><A href="index.html">home</A></DIV> });
27. Conversion entre ID et Classe
Lorsque vous modifiez la taille de la fenêtre, basculez entre ID et Classe
$(document).ready(function() { function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); } else { $('body').removeClass('large'); } } $(window).resize(checkWindowSize); });
28. Cloner un objet
Cloner un div ou un autre élément.
$(document).ready(function() { var cloned = $('#id').clone(); // how to use <DIV id=id></DIV> });
29. Positionnez l'élément au milieu de l'écran
Centrez un élément au centre de votre écran.
$(document).ready(function() { jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this; } $("#id").center(); });
30. Écrivez votre propre sélecteur
Écrivez vos propres sélecteurs.
$(document).ready(function() { $.extend($.expr[':'], { moreThen1000px: function(a) { return $(a).width() > 1000; } }); $('.box:moreThen1000px').click(function() { // creating a simple js alert box alert('The element that you have clicked is over 1000 pixels wide'); }); });
31. Comptez le nombre d'éléments
Comptez un élément.
$(document).ready(function() { $("p").size(); });
32. Utilisez vos propres balles
Vous souhaitez utiliser vos propres puces au lieu d'utiliser les puces standard ou les images ?
$(document).ready(function() { $("ul").addClass("Replaced"); $("ul > li").prepend("‒ "); // how to use ul.Replaced { list-style : none; } });
33. Référencez la bibliothèque de classes Jquery sur l'hôte Google
Laissez Google héberger le script jQuery pour vous. Cela peut être fait de 2 manières.
//Example 1 <SCRIPT src="http://www.google.com/jsapi"></SCRIPT> <SCRIPT type=text/javascript> google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // do something }); </SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT> // Example 2:(the best and fastest way) <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
34. Désactiver l'effet Jquery (animation)
Désactiver tous les effets jQuery
$(document).ready(function() { jQuery.fx.off = true; });
35. Solution aux conflits avec d'autres bibliothèques Javascript
Pour éviter les conflits avec d'autres bibliothèques de votre site Web, vous pouvez utiliser cette méthode jQuery et attribuer un nom de variable différent au lieu du signe dollar.
$(document).ready(function() { var $jq = jQuery.noConflict(); $jq('#id').show(); });
Ce qui précède concerne les compétences pratiques de jQuery. J'espère que cela sera utile à l'apprentissage de chacun.