先日、インターンシップ生に向けて簡単なjQueryの講座を行いました。
主にjQueryの高速化とバージョン違いによる問題解決方法です。

jQueryを同時に2つ使用する場合

稀にバージョン違いのjQueruを同時に使用しないといけない事があった場合、noConflictでjQueryを使い分ける方法です。

＜script type=”text/javascript” src=”jquery-1.3.2.js” ＞＜/script＞
＜script type=”text/javascript”>
    var $jq132 = $.noConflict(true);
</script>
＜script type=”text/javascript” src=”jquery-1.11.2.js” ＞＜/script＞

上記赤字をhtmlに追加し、

(function($){
jquery-1.3.2で動くライブラリのjs
})($jq132)

jquery-1.3.2.jsを使用するライブラリに上記の赤字部分で囲うようにします。

この指定でライブラリ上の『$jq132』、『$』どちらのjQueryを使用するかを判断します。

jQueryのちょっとした高速化

jQuery を使用する際ちょっとした事で高速化を図れることがあります。
特に長いページで複数回同じ処理を行う場合には最適なのかもしれません。

可能なかぎりclassではなくIDを利用

$(‘#box’).hide();
$(‘#box p’).hide();

セレクタでの処理の早い順番

$(“#box01”);　　　   // IDセレクタが1番
$(“div”);　　　 　  　// タイプセレクタは2番
$(“.test”);　　　　 　// Classセレクタは3番
$(“[name=’title’]”);   // 属性セレクタは4番
$(“:hidden”);　　     // jQuery独自拡張セレクタは5番

※タグやClassなど、参照数が多くなれば速度は変わります

find()の使用

var box01 = $(‘#box01’).find(‘.title’);

※find()は参照数が多くなれば遅くなるので、その場合は子孫セレクタを使用します

DOMに挿入する場合、単一の要素をまとめる

毎回htmlに書き込む処理をせず、一度変数にまとめてからhtmlに書き出すようにします。

var testList = $(‘#testList’);
for (i=0; i<100; i++){
  testList.append(‘<li>リスト ‘ + i + ‘ 個目</li>’);
}

↓↓↓↓↓↓↓

var testList = $(‘#testList’);
var testListArray = ‘ ‘;
for (i = 0; i < 100; i++) {
  testListArray += ‘<li>リスト ‘ + i + ‘ 個目</li>’;
}
testList.append(testListArray);