35 extraits de code jQuery que les programmeurs doivent connaître

jQuery est désormais devenue la bibliothèque JavaScript la plus populaire dans le développement Web. Grâce à jQuery et à un grand nombre de plug-ins, vous pouvez facilement obtenir divers effets magnifiques. Cet article vous présentera quelques compétences pratiques en jQuery, dans l’espoir de vous aider à utiliser jQuery plus efficacement.

35 astuces/extraits de code jQuery collectés pour vous aider à développer rapidement.

1. Désactiver le clic droit

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

2. Masquer le texte de la zone de texte de recherche

Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(document).ready(function() {
$("input.text1").val("Enter your search text here");
  textFill($('input.text1'));
});
  function textFill(input){ //input focus text function
   var originalvalue = input.val();
   input.focus( function(){
     if( $.trim(input.val()) == originalvalue ){ input.val(''); }
   });
   input.blur( function(){
     if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
   });
}

3. Ouvrez le lien dans une nouvelle fenêtre

XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {
  //Example 1: Every link will open in a new window
  $('a[href^="http://"]').attr("target", "_blank");
  //Example 2: Links with the rel="external" attribute will only open in a new window
  $('a[@rel$='external']').click(function(){
   this.target = "_blank";
  });
});
// how to useopen link

4. Détecter le navigateur

Remarque : Dans la version jQuery 1.4, $.support a remplacé la variable $.browser

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
  // do something
}
// Target Safari
if( $.browser.safari ){
  // do something
}
// Target Chrome
if( $.browser.chrome){
  // do something
}
// Target Camino
if( $.browser.camino){
  // do something
}
// Target Opera
if( $.browser.opera){
  // do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version  6){
  // do something
}
});

5. Précharger les images

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});

6. Changement de style de page

$(document).ready(function() {
  $("a.Styleswitcher").click(function() {
    //swicth the LINK REL attribute with the value in A REL attribute
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  });
// how to use
// place this in your header// the linksDefault ThemeRed ThemeBlue Theme});

7. Les hauteurs des colonnes sont les mêmes

Si deux colonnes CSS sont utilisées, cette méthode peut être utilisée pour que les hauteurs des deux colonnes soient les mêmes. même .

$(document).ready(function() {
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}
// how to use
$(document).ready(function() {
  equalHeight($(".left"));
  equalHeight($(".right"));
});
});

8. Contrôler dynamiquement la taille de la police de la page

Les utilisateurs peuvent modifier la taille de la police de la page

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $('html').css('font-size', newFontSize);
  return false;
 });
 // Decrease the font size(smaller font)
 $(".decreaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $('html').css('font-size', newFontSize);
  return false;
 });
});

9. Retourner à la fonction supérieure de la page

For a smooth(animated) ride back to the top(or any location).
$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target
  || $('[name=' + this.hash.slice(1) +']');
  if ($target.length) {
 var targetOffset = $target.offset().top;
 $('html,body')
 .animate({scrollTop: targetOffset}, 900);
  return false;
  }
 }
 });
// how to use
// place this where you want to scroll to// the linkgo to top});

10. Obtenir la valeur XY du pointeur de la souris

Want to know where your mouse cursor is?
$(document).ready(function() {
  $().mousemove(function(e){
   //display the x and y axis values inside the div with the id XY
  $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use});

11. Bouton Retour en haut

Vous pouvez utiliser animer et scrollTop pour implémenter l'animation de retour en haut. sans utiliser d'autres plug-ins.

// Back to top
$('a.top').click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
Back to top

Changer la valeur de scrollTop peut ajuster la distance entre le retour et le haut, et le deuxième paramètre d'animate est le temps nécessaire pour effectuer l'action de retour (unité : millisecondes ).

12. Précharger les images

Si votre page utilise beaucoup d'images invisibles (telles que l'affichage au survol), vous devrez peut-être les précharger :

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
  $(&#39;&#39;).attr(&#39;src&#39;, arguments[i]);
 }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);

13. Vérifiez si l'image est chargée

Parfois, vous devez vous assurer que l'image est chargée afin d'effectuer les opérations suivantes :

$('img').load(function () {
 console.log('image load successful');
});

Vous pouvez remplacer img par un autre identifiant ou classe pour vérifier si l'image spécifiée est chargée.

14. Modifier automatiquement les images brisées

Si vous trouvez un lien d'image brisé sur votre site Web, vous pouvez le remplacer par une image qui ne peut pas être facilement remplacée. . L'ajout de ce code simple peut vous éviter bien des ennuis :

$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

Même si votre site ne contient pas de liens d'images rompus, il n'y a aucun mal à ajouter ce code.

15. Attribut de classe de commutation de survol de la souris

Si lorsque l'utilisateur passe la souris sur un élément cliquable, vous souhaitez modifier son effet, Le code suivant peut ajouter un attribut de classe lorsqu'il survole un élément, et annuler automatiquement l'attribut de classe lorsque l'utilisateur s'éloigne de la souris :

$('.btn').hover(function () {
 $(this).addClass('hover');
 }, function () {
  $(this).removeClass('hover');
 });
你只需要添加必要的CSS代码即可。如果你想要更简洁的代码，可以使用 toggleClass 方法：
$('.btn').hover(function () { 
 $(this).toggleClass('hover'); 
});

Remarque : utiliser CSS directement pour obtenir cet effet peut être une meilleure solution, mais vous devez quand même connaître la méthode.

16. Désactiver les champs de saisie

Parfois, vous devrez peut-être désactiver le bouton d'envoi d'un formulaire ou un champ de saisie jusqu'à ce que l'utilisateur effectue une action (par exemple, cochez " Lire les conditions"). Vous pouvez ajouter l'attribut désactivé jusqu'à ce que vous souhaitiez l'activer :

$('input[type="submit"]').prop('disabled', true);

Il vous suffit d'exécuter la méthode removeAttr et de passer l'attribut à supprimer en paramètre :

$('input[type="submit"]').removeAttr('disabled');

17. Empêcher le chargement des liens

Parfois, vous ne souhaitez pas créer un lien vers une page ou la recharger, vous souhaiterez peut-être qu'elle fasse autre chose ou déclencher quelque chose. Pour d'autres scripts, vous pouvez faire ceci :

$('a.no-link').click(function (e) {
 e.preventDefault();
});

18. Changer de fondu/glissade

fondu et les diapositives sont ce que nous utilisons. Les effets d'animation sont souvent utilisés dans jQuery pour améliorer l'apparence des éléments. Mais si vous souhaitez que le premier effet soit utilisé lorsque l'élément est affiché et le deuxième effet lorsqu'il disparaît, vous pouvez faire ceci :

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

19. Effet accordéon simple

Voici un moyen rapide et facile d'obtenir un effet accordéon :

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
});

20. Faire en sorte que deux divs aient la même hauteur

Parfois, vous devez faire en sorte que deux divs aient la même hauteur, quel que soit le contenu qu'ils contiennent. Vous pouvez utiliser l'extrait de code suivant :

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
  height = $(this).height();
 }
});
$columns.height(height);

Ce code parcourra un groupe d'éléments et définira leur hauteur sur la hauteur maximale parmi les éléments.

21. Vérifiez si l'élément est vide

This will allow you to check if an element is empty.
$(document).ready(function() {
 if ($('#id').html()) {
  // do something
  }
});

22. Remplacez l'élément

$(document).ready(function() {
  $('#id').replaceWith('I have been replaced');
});

23. Fonction de chargement retardé de jQuery

$(document).ready(function() {
  window.setTimeout(function() {
   // do something
  }, 1000);
});

24. 🎜>

$(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

$(document).ready(function() {
  if ($('#id').length) {
 // do something
 }
});

26 . Rendre l'intégralité du DIV cliquable

27. ID与Class之间转换

当改变Window大小时，在ID与Class之间切换

$(document).ready(function() {
  function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $('body').addClass('large');
  }
  else {
    $('body').removeClass('large');
  }
  }
$(window).resize(checkWindowSize);
});

28. 克隆对象

$(document).ready(function() {
  var cloned = $('#id').clone();
// how to use});

29. 使元素居屏幕中间位置

$(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. 写自己的选择器

$(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. 统计元素个数

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

32. 使用自己的 Bullets

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

33. 引用Google主机上的Jquery类库

//Example 1

34. 禁用Jquery（动画）效果

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

35. 与其他Javascript类库冲突解决方案

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq('#id').show();
});

以上就是本章的全部内容，更多相关教程请访问jQuery视频教程！