Trucs et astuces jQuery que vous ne pouvez pas apprendre ailleurs (bienvenue à collectionner)_jquery

L'éditeur ci-dessous a compilé 8 conseils très utiles pour les programmeurs. Les détails sont les suivants :

1) Désactiver le clic droit de la souris

Les programmeurs jQuery peuvent utiliser ce code pour désactiver les clics droits de la souris sur les pages Web.

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

2) Utilisez jQuery pour ajuster la taille du texte

Grâce à ce code, les utilisateurs peuvent redimensionner (augmenter et diminuer) le texte sur le site

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

3) Ouvrez le lien dans un nouveau Windows

　Essayez ce code et augmentez les impressions de votre site car en utilisant ce code jquery, les utilisateurs accéderont à une nouvelle fenêtre après avoir cliqué sur n'importe quel lien de votre site : -

.

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

4) Échange de feuilles de style

Échangez les feuilles de style en utilisant ce code et le script « Échange de feuilles de style » est ci-dessous : -

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

5) Lien retour au haut

　La fonction très courante que vous pouvez voir sur le site Eve de nos jours est « Retour en haut ». Cette fonctionnalité est très utile pour les pages longues pour les rendre courtes en un seul clic : -
.

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

6) Récupérer les axes x et y du curseur de la souris

Vous pouvez retrouver les valeurs du coordinateur X et Y du pointeur de la souris Le code est soufflé : -

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

7) Détecter les coordonnées actuelles de la souris

En utilisant ce script, vous pouvez trouver les coordonnées actuelles de la souris dans n'importe quel navigateur Web pris en charge par jQuery. Le code est le suivant :

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

8) Précharger les images dans jQuery

Ce script de préchargement d'images permet de charger des images ou des pages Web très rapidement. Vous n'avez pas besoin d'attendre que l'image se charge. Code :

jQuery.preloadImagesInWebPage = function() 
{
for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("<img alt="">").attr("src", arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
}); 

Procédez comme suit pour vous assurer que vos performances jQuery sont grandement améliorées

1. Ajouter en dehors des boucles

Tout ce qui implique le DOM a un prix. Si vous ajoutez de nombreux éléments au DOM, vous souhaiterez les ajouter tous en même temps plutôt que de le faire plusieurs fois. Un problème courant survient lors de l’ajout d’éléments à une boucle.

$.each( myArray, function( i, item ) {
var newListItem = "<li>" + item + "</li>";
$( "#ballers" ).append( newListItem );
}); 

Une technique courante consiste à utiliser des fragments de documents. À chaque itération de la boucle, ajoutez l'élément au fragment au lieu de l'élément DOM. Lorsque la boucle se termine, ajoutez le fragment à l'élément DOM.

var frag = document.createDocumentFragment();
$.each( myArray, function( i, item ) {
var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );
newListItem.appendChild( itemText );
frag.appendChild( newListItem );
});
$( "#ballers" )[ ].appendChild( frag ); 

Une autre astuce simple consiste à construire continuellement une chaîne à chaque itération de la boucle. Lorsque la boucle se termine, définissez le code HTML de l'élément DOM sur cette chaîne.

var myHtml = "";
$.each( myArray, function( i, item ) {
myHtml += "<li>" + item + "</li>";
});
$( "#ballers" ).html( myHtml ); 

Bien sûr, il existe d'autres techniques que vous pouvez essayer. Un site appelé jsperf constitue un bon moyen de tester ces propriétés. Le site vous permet de comparer chaque technique et de visualiser ses résultats de performances multiplateformes.

2. Longueur du cache pendant les boucles

Dans la boucle for, n'accédez pas à la propriété length du tableau à chaque fois ;

var myLength = myArray.length;
for ( var i = ; i < myLength; i++ ) {
// do stuff
} 

3. Détachez les éléments pour travailler avec eux

La manipulation du DOM est lente, vous voulez donc le faire avec le moins d'alignement possible. jQuery a introduit une méthode appelée detach() dans la version 1.4 pour aider à résoudre ce problème, qui vous permet de détacher des éléments du DOM lorsque vous les utilisez.

var $table = $( "#myTable" );
var $parent = $table.parent();
$table.detach();
// ... add lots and lots of rows to table
$parent.append( $table ); 

4. N'agissez pas sur les éléments absents

Si vous prévoyez d'exécuter beaucoup de code sur un sélecteur vide, jQuery ne vous donnera aucune indication - il continuera à s'exécuter comme si aucune erreur ne s'était produite. A vous de vérifier combien d'éléments contient le sélecteur.

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();
// Better:
var $mySelection = $( "#nosuchthing" );
if ( $mySelection.length ) {
$mySelection.slideUp();
}
// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {
this.length && func.apply( this );
return this;
}
$( "li.cartitems" ).doOnce(function() {

// make it ajax! \o/

}); 

Ce guide est particulièrement utile pour les widgets jQuery UI qui nécessitent beaucoup de temps système lorsque le sélecteur ne contient pas d'élément.

5. Optimiser les sélecteurs

L'optimisation du sélecteur n'est pas aussi importante que par le passé, car de nombreux navigateurs implémentent la méthode document.querySelectorAll() et jQuery transfère la charge du sélecteur vers le navigateur. Mais il y a quand même quelques conseils à garder à l’esprit.

Sélecteur basé sur l'ID

Il est toujours préférable de démarrer votre sélecteur avec un identifiant.

// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" ); 

采用 .find() 方法的方式将更加的快速，因为第一个选择器已经过处理，而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理，之所以快速，是因为它是浏览器的原生方法。

特异性

尽量详细的描述选择器的右侧，对于左侧则应反其道而行之。

// Unoptimized:
$( "div.data .gonzalez" );
// Optimized:
$( ".data td.gonzalez" ); 

尽量在选择器的最右侧使用 tag.class 的形式来描述选择器，而在左侧则尽量只使用 tag 或者 .class 。

避免过度使用特异性

$( ".data table.attendees td.gonzalez" );
// Better: Drop the middle if possible.
$( ".data td.gonzalez" ); 

去讨好“DOM”总是有利于提升选择器的性能，因为选择器引擎在搜寻元素时无需进行太多的遍历。

避免使用通用选择器

如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better. 

6. Use Stylesheets for Changing CSS on Many Elements

假如你使用 .css() 方法来改变超过20个元素的CSS，应当考虑为页面添加一个样式标签作为替代，这样做可以提升将近60%的速度。

// Fine for up to elements, slow after that:
$( "a.swedberg" ).css( "color", "#ad" );
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #ad }</style>")
.appendTo( "head" ); 

7. Don't Treat jQuery as a Black Box

把jQuery的源码当成文档，可以把它（http://bit.ly/jqsource）保存在你的收藏夹内，经常的查阅参考。