他では学べない jQuery のヒントとテクニック (収集歓迎)_jquery

以下のエディターは、プログラマーにとって非常に役立つ 8 つのヒントをまとめています。詳細は次のとおりです。

1) マウスの右クリックを無効にします

jQuery プログラマーは、このコードを使用して、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) jQuery を使用してテキスト サイズを調整します

このコードを使用すると、ユーザーは Web サイト上のテキストのサイズを変更 (拡大および縮小) できます

$(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) 新しい Windows でリンクを開きます

このコードを試して、サイトのインプレッションを増やしてください。この jquery コードを使用すると、ユーザーはサイトのリンクをクリックすると新しいウィンドウに移動します。コードは以下のとおりです: -

。

$(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) スタイルシートの交換

このコードを使用してスタイル シートを交換します。「スタイル シートの交換」スクリプトは以下のとおりです: -

$(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) トップリンクに戻る

最近の eve サイトでよく見かける機能は「トップに戻る」です。この機能は、長いページを 1 回のクリックで短くするのに非常に便利です。 -

$(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) マウス カーソルの x 軸と y 軸を取得します

マウスポインターの X および Y コーディネーターの値を見つけることができます。コードは次のとおりです。 -

$().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) 現在のマウス座標を検出します

このスクリプトを使用すると、jQuery でサポートされている Web ブラウザで現在のマウス座標を見つけることができます。コードは次のとおりです:

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

8) jQuery で画像をプリロード

この画像プリロード スクリプトは、画像や Web ページを非常に迅速にロードするのに役立ちます。画像が読み込まれるまで待つ必要はありません。コード:

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

jQuery のパフォーマンスを大幅に向上させるには、次の手順を実行します

1. ループの外に追加

DOM に関係するものにはすべて代償が伴います。多数の要素を DOM に追加する場合は、複数回行うのではなく、すべてを一度に追加する必要があります。ループに要素を追加するときによくある問題が発生します。

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

一般的な手法は、文書の断片を使用することです。ループの各反復で、DOM 要素の代わりに要素をフラグメントに追加します。ループが終了したら、フラグメントを 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 ); 

もう 1 つの簡単なトリックは、ループの反復ごとに文字列を継続的に構築することです。ループが終了したら、DOM 要素の HTML をこの文字列に設定します。

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

もちろん、他のテクニックも試すことができます。 jsperf というサイトでは、これらのプロパティをテストする良い方法が提供されています。このサイトでは、各手法のベンチマークを実行し、クロスプラットフォームのパフォーマンス結果を視覚化できます。

2. ループ中のキャッシュ長

for ループでは、事前にキャッシュする必要がある配列の長さプロパティに毎回アクセスしないでください。

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

3. 操作する要素を切り離します

DOM の操作は遅いため、できるだけ調整を少なくして操作する必要があります。 jQuery は、この問題を解決するために、バージョン 1.4 で detach() と呼ばれるメソッドを導入しました。これにより、要素を操作するときに DOM から要素を切り離すことができます。

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

4. 存在しない要素に基づいて行動しない

空のセレクターで多くのコードを実行する予定がある場合、jQuery はヒントを提供しません。エラーが発生しなかったかのように実行を続けます。セレクターに含まれる要素の数を確認するのはあなた次第です。

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

}); 

このガイドは、セレクターに要素が含まれていない場合に多くのオーバーヘッドを必要とする jQuery UI ウィジェットに特に役立ちます。

5. セレクターの最適化

多くのブラウザーが document.querySelectorAll() メソッドを実装し、jQuery がセレクターの負担をブラウザーに移すため、セレクターの最適化は以前ほど重要ではありません。ただし、留意すべきヒントがまだいくつかあります。

ID ベースのセレクター

セレクターを ID で開始することが常に最善です。

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