Partagez 12 extraits de code jQuery pratiques_jquery

jQuery est une excellente bibliothèque JavaScript très connue parmi les développeurs WEB et les concepteurs Web. Elle aide les concepteurs Web à développer de nombreuses pages WEB créatives et belles.

Cet article partage principalement 12 compétences jQuery utiles, le contenu spécifique est le suivant

Voici quelques conseils que j’ai rassemblés qui vous aideront à améliorer la créativité et la fonctionnalité des mises en page et des applications de votre site Web.

1. Ouvrez le lien dans une nouvelle fenêtre

Grâce à ce code, lorsque vous cliquez sur un lien hypertexte, celui-ci s'ouvrira dans une nouvelle fenêtre, offrant ainsi une meilleure expérience aux utilisateurs :

$(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. Régler la minuterie

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

3. Définissez des colonnes de hauteur égale

Utilisez le code suivant pour que chaque colonne de votre application Web ait la même hauteur :

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

4. Images préchargées jQuery

Cette astuce peut accélérer le chargement des images sur les pages Web :

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

5. 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>
 

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

7. 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>

8. Changer la liste de styles

Ce code vous aidera à modifier la liste de styles.

 $(document).ready(function() {
 $("a.cssSwap").click(function() { 
 //swap the link rel attribute with the value in the rel 
 $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
 }); 
 });

9. Utilisez jQuery pour définir la taille du texte

En ajoutant ce code, les utilisateurs peuvent réinitialiser la taille du texte (augmenter ou diminuer) en fonction de leurs besoins.

 $(document).ready(function() {
 //find the current font size
 var originalFontSize = $('html').css('font-size');

//Increase the text size
 $(".increaseFont").click(function() {
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });

//Decrease the Text Size
 $(".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;
 });

// Reset Font Size
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 });

10. Détecter les coordonnées actuelles de la souris

En utilisant ce code JS, vous pouvez obtenir les coordonnées de la souris dans n'importe quel navigateur.

 $(document).ready(function() {
 $().mousemove(function(e)
 {
 $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
 });

11. Obtenez l'axe X/Y du pointeur de la souris

 $().mousemove(function(e){
 //display the x and y axis values inside the P element
 $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });

12. Retour au lien supérieur

Ce code est très pratique pour les pages relativement longues. Les utilisateurs n'ont pas besoin de tirer la barre de défilement pour revenir en haut, mais peuvent directement cliquer sur "Retour en haut".

 $(document).ready(function() {
 //when the id="top" link is clicked
 $('#top').click(function() {
 //scoll the page back to the top
 $(document).scrollTo(0,500);
 }
 });

jQuery est l'une des meilleures bibliothèques pour JavaScript, prenant en charge les clients de script Ajax et HTML. Elle est principalement utilisée pour le traitement d'événements et la production d'animations. De plus, jQuery dispose également de divers plug-ins qui permettent aux développeurs de créer des pages Web dans les plus brefs délais.

J'espère que cet article sera utile à tous ceux qui apprennent la programmation jquery.