Compétences pratiques essentielles de jQuery (Partie 2)

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

WBOY

Libérer： 2016-05-16 15:33:47

original

1288 Les gens l'ont consulté

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);
});

Copier après la connexion

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, ""));
});

Copier après la connexion

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
 }
});

Copier après la connexion

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>

});

Copier après la connexion

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);
});

Copier après la connexion

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>

});

Copier après la connexion

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();
});

Copier après la connexion

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');
 });
});

Copier après la connexion

31. Comptez le nombre d'éléments

Comptez un élément.

$(document).ready(function() {
 $("p").size();
});

Copier après la connexion

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("&#8210; ");
 // how to use
 ul.Replaced { list-style : none; }
});

Copier après la connexion

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>

Copier après la connexion

34. Désactiver l'effet Jquery (animation)

Désactiver tous les effets jQuery

$(document).ready(function() {
 jQuery.fx.off = true;
});

Copier après la connexion

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();
});

Copier après la connexion

Ce qui précède concerne les compétences pratiques de jQuery. J'espère que cela sera utile à l'apprentissage de chacun.