Sept conseils jQuery à ne pas manquer_jquery

jQuery est une bibliothèque JavaScript légère et l'un des scripts HTML côté client les plus populaires. Elle est très célèbre parmi les concepteurs et les développeurs WEB et possède de nombreux plug-ins et technologies utiles.

Dans cet article, nous partagerons avec vous quelques astuces jQuery :

1. Ouvrez le lien dans une nouvelle fenêtre

Utilisez le code suivant, vous pouvez cliquer sur le lien pour l'ouvrir dans une nouvelle fenêtre :

$(document).ready(function() {
  //select all anchor tags that have http in the href
  //and apply the target=_blank
  $("a[href^='http']").attr('target','_blank');
});

2. Définissez les colonnes avec des hauteurs égales

Appliquez le code suivant pour faire attendre la hauteur de chaque colonne dans votre application WEB :

<div class="equalHeight" style="border:1px solid">
  <p>First Line</p>
  <p>Second Line</p>
  <p>Third Line</p>
</div>
<div class="equalHeight" style="border:1px solid">
  <p>Column Two</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  equalHeight('.equalHeight');
});
//global variable, this will store the highest height value
var maxHeight = 0;

function equalHeight(col) {
  //Get all the element with class = col
  col = $(col);
  //Loop all the col
  col.each(function() {
    //Store the highest value
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  //Set the height
  col.height(maxHeight);
}
</script>

3. Images préchargées jQuery

Cette petite astuce peut améliorer la vitesse de chargement des images sur la page :

jQuery.preloadImagesInWebPage = function() {
  for (var ctr = 0; ctr & lt; arguments.length; ctr++) {
    jQuery("").attr("src", arguments[ctr]);
  }
}

// 使用方法：
$.preloadImages("image1.gif", "image2.gif", "image3.gif");

// 检查图片是否被加载
$('#imageObject').attr('src', 'image1.gif').load(function() {
  alert('The image has been loaded…');
});

4. Désactivez le bouton droit de la souris

$(document).ready(function() {
  //catch the right-click context menu
  $(document).bind("contextmenu", function(e) {
    //warning prompt - optional
    alert("No right-clicking!");

    //delete the default context menu
    return false;
  });
});

5. Régler la minuterie

$(document).ready(function() {
  window.setTimeout(function() {
    // some code
  }, 500);
});

6. Calculer le nombre de sous-éléments

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
    <span><span></span></span>
  </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  //jQuery code to count child elements $("#foo > div").size()
alert($("#foo > div").size())
</script>

7. Positionnez l'élément au milieu de la page

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
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;
}
//Use the above function as:
$('#foo').center();
</script>

Les amis qui ont lu ceci sauront que vous n'avez pas manqué l'occasion d'apprendre. Accumuler ces conseils aidera certainement tout le monde à concevoir des pages Web créatives et belles.