Maison > Article > interface Web > 7 extraits de code jQuery utiles à share_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 dispose de nombreux plug-ins et technologies utiles pour aider les gens à développer des projets créatifs et esthétiques. Pages WEB.
Aujourd'hui, nous partageons quelques conseils pour les utilisateurs de jQuery, qui vous aideront à rendre la mise en page et l'application de votre site Web plus créatives et fonctionnelles.
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>