Compétences pratiques essentielles de jQuery (Partie 2)_jquery

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.