jQuery-Tipps und -Tricks, die Sie anderswo nicht lernen können (willkommen zum Sammeln)_jquery

Der unten stehende Herausgeber hat 8 Tipps zusammengestellt, die für Programmierer sehr hilfreich sind. Die Details sind wie folgt:

1) Rechtsklick mit der Maus deaktivieren

jQuery-Programmierer können diesen Code verwenden, um Rechtsklicks auf Webseiten zu deaktivieren.

$(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) Verwenden Sie jQuery, um die Textgröße anzupassen

Mit diesem Code können Benutzer die Größe des Textes auf der Website ändern (vergrößern und verkleinern)

$(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) Öffnen Sie den Link in neuem Windows

　Probieren Sie diesen Code aus und steigern Sie die Impressionen Ihrer Website, denn mit diesem JQuery-Code gelangen Benutzer zu einem neuen Fenster, nachdem sie auf einen Link Ihrer Website geklickt haben: -

$(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) Stylesheets-Tausch

Tauschen Sie Stylesheets mit diesem Code aus. Das Skript „Stylesheets tauschen“ finden Sie unten: -

$(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) Zurück zum Anfangslink

　Eine sehr häufige Funktion, die Sie heutzutage auf der Eve-Website sehen können, ist „Zurück zum Anfang“. Diese Funktion ist sehr nützlich für lange Seiten, um sie mit einem einzigen Klick zu verkürzen: -

$(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) Ermitteln Sie die x- und y-Achse des Mauszeigers

Sie können die Werte des X- und Y-Koordinators des Mauszeigers finden: -

$().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) Aktuelle Mauskoordinaten erkennen

Mit diesem Skript können Sie die aktuellen Mauskoordinaten in jedem von jQuery unterstützten Webbrowser finden. Der Code lautet wie folgt:

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

8) Bilder in jQuery vorladen

Dieses Skript zum Vorladen von Bildern hilft dabei, Bilder oder Webseiten sehr schnell zu laden. Sie müssen nicht warten, bis das Bild geladen ist. 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…');
}); 

Gehen Sie wie folgt vor, um sicherzustellen, dass Ihre jQuery-Leistung erheblich verbessert wird

1. Außerhalb von Schleifen anhängen

Alles, was mit dem DOM zu tun hat, hat seinen Preis. Wenn Sie viele Elemente an das DOM anhängen, sollten Sie sie alle auf einmal anhängen, anstatt dies mehrmals zu tun. Ein häufiges Problem tritt beim Anhängen von Elementen an eine Schleife auf.

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

Eine gängige Technik ist die Verwendung von Dokumentfragmenten. Hängen Sie bei jeder Iteration der Schleife das Element an das Fragment anstelle des DOM-Elements an. Wenn die Schleife endet, hängen Sie das Fragment an das DOM-Element an.

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

Ein weiterer einfacher Trick besteht darin, bei jeder Iteration der Schleife kontinuierlich eine Zeichenfolge zu erstellen. Wenn die Schleife endet, legen Sie den HTML-Code des DOM-Elements auf diese Zeichenfolge fest.

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

Natürlich gibt es auch andere Techniken, die Sie ausprobieren können. Eine Website namens jsperf bietet eine gute Möglichkeit, diese Eigenschaften zu testen. Auf der Website können Sie jede Technik vergleichen und ihre plattformübergreifenden Leistungsergebnisse visualisieren.

2. Cache-Länge während Schleifen

Greifen Sie in der for-Schleife nicht jedes Mal auf die Längeneigenschaft des Arrays zu.

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

3. Elemente abtrennen, um mit ihnen zu arbeiten

Die Manipulation des DOM ist langsam, daher sollten Sie dies mit so wenig Ausrichtung wie möglich tun. Um dieses Problem zu lösen, hat jQuery in Version 1.4 eine Methode namens detach() eingeführt, die es Ihnen ermöglicht, Elemente vom DOM zu trennen, wenn Sie sie bearbeiten.

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

Handeln Sie nicht auf fehlende Elemente

Wenn Sie vorhaben, viel Code auf einem leeren Selektor auszuführen, gibt Ihnen jQuery keine Hinweise – es wird weiterhin ausgeführt, als ob keine Fehler aufgetreten wären. Es liegt an Ihnen, zu überprüfen, wie viele Elemente der Selektor enthält.

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

}); 

Diese Anleitung ist besonders nützlich für jQuery-UI-Widgets, die viel Overhead erfordern, wenn der Selektor kein Element enthält.

5. Selektoren optimieren

Selektoroptimierung ist nicht mehr so ​​wichtig wie in der Vergangenheit, da viele Browser die Methode document.querySelectorAll() implementieren und jQuery die Last des Selektors auf den Browser verlagert. Dennoch gibt es einige Tipps zu beachten.

ID-basierter Selektor

Es ist immer am besten, Ihren Selektor mit einer ID zu starten.

// 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）保存在你的收藏夹内，经常的查阅参考。