jQueryのヒントとコツ

構文

• roosteronacidによる準備完了イベントの省略形
• ロステロン酸による改行と連鎖性
• ネイサンロングによるフィルターのネスト
• コレクションをキャッシュし、 roosteronacidによって同じ行でコマンドを実行する
• roosteronacidによるセレクターが含まれています
• ロステロン酸による元素生成時の特性の定義
• roosteronacidによる配列と同じようにjQuery関数にアクセス
• noConflict機能- $変数を解放オリで
• nickfにより、$変数をnoConflictモードで分離します。
• roosteronacidによる非競合モード

データストレージ

• データ関数 -TenebrousXによるデータの要素へのバインド
• ステロイドのHTML5データ属性のサポート！roosteronacidによって
• FilipDupanović によるjQueryメタデータプラグイン

最適化

• ロステロン酸による複雑なセレクターのパフォーマンスを最適化
• lupefiascoによるコンテキストパラメータ
• ネイサンロングによる検索を保存して再利用する
• HTML要素の作成と参照の保持、要素が存在するかどうかの確認、Andreas Grechによる独自のセレクターの作成

雑多

• コレクション内の要素のインデックスを redsquareで確認する
• TMによるライブイベントハンドラー
• 無名関数を名前付き関数にken で置き換えます
• SlaceによるMicrosoft AJAXフレームワークとjQueryブリッジ
• egyamadoによるjQueryチュートリアル
• コレクションから要素を削除し、ロステロン酸による連鎖性を維持する
• Benによる無名関数の冒頭で$ thisを宣言します
• FireBug lite、Hotboxプラグイン、Color Blendによる画像の読み込みとGoogle CDNの通知
• HarriyottによるサードパーティのjQueryスクリプトの賢明な使用
• Jan Zichによる各関数
• Chris Sによるフォーム拡張プラグイン
• OneNerdによる非同期の各関数
• jQueryテンプレートプラグイン： roosteronacidによるレンダリング関数を使用した複雑なロジックの実装

HTML要素の作成と参照の維持

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

要素が存在するかどうかの確認

if ($("#someDiv").length)
{
    // It exists...
}

独自のセレクターを作成する

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

jQueryのdata()メソッドは便利で、あまり知られていません。DOMを変更せずにデータをDOM要素にバインドできます。

ネストフィルター

フィルターをネストすることができます（nickfがここに示すように）。

.filter(":not(:has(.selected))")

私は本当に$(document).ready(fn)ショートカットのファンではありません。確かにコードを削減しますが、コードの可読性も大幅に削減します。を見ると$(document).ready(...)、何を見ているかわかります。$(...)他の多くの方法で使用されているため、すぐに意味がわかりません。

複数のフレームワークがあるjQuery.noConflict();場合は、言うように使用できますが、次のように異なる変数を割り当てることもできます。

var $j = jQuery.noConflict();

$j("#myDiv").hide();

$x(...)-style呼び出しに要約できるフレームワークがいくつかある場合に非常に役立ちます。

おお、jQueryメタデータをお忘れなく！data（）関数はすばらしいですが、jQuery呼び出しを介して入力する必要があります。

次のようなカスタム要素属性でW3C準拠を壊す代わりに：

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

代わりにメタデータを使用してください：

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

ライブイベントハンドラー

以下のためのイベントハンドラを設定する任意のそれは、最初のページのロード後にDOMに追加されていても、セレクタに一致する要素：

$('button.someClass').live('click', someFunction);

これにより、ajaxを介してコンテンツをロードしたり、JavaScriptを介してコンテンツを追加したり、これらの要素に対してイベントハンドラーを適切に自動的に設定したりできます。

同様に、ライブイベントの処理を停止するには：

$('button.someClass').die('click', someFunction);

これらのライブイベントハンドラーには、通常のイベントと比較していくつかの制限がありますが、ほとんどの場合にうまく機能します。

詳細については、jQueryのドキュメントを参照してください。

更新：live()およびdie()jQuery 1.7では非推奨です。同様の置換機能については、http：//api.jquery.com/on/およびhttp://api.jquery.com/off/を参照してください。

UPDATE2：live()jQuery 1.7より前でも、ずっと非推奨になっています。1.7より前のバージョンのjQuery 1.4.2+ではdelegate()、およびを使用しundelegate()ます。live()例は、（ $('button.someClass').live('click', someFunction);）を使用して書き換えることができるdelegate()そのような：$(document).delegate('button.someClass', 'click', someFunction);。

無名関数を名前付き関数に置き換えます。これは本当にjQueryコンテキストに取って代わるものですが、コールバック関数に依存しているため、jQueryを使用するときのように機能します。インラインの無名関数で私が抱えている問題は、デバッグが難しいこと（明確に名前が付けられた関数ではなく、6レベルの「無名」のコールスタックを見る方がはるかに簡単）であり、同じ中に複数の無名関数が存在するという事実です。 jQueryチェーンは、読み取りや保守が困難になる可能性があります。さらに、匿名関数は通常再利用されません。一方、名前付き関数を宣言すると、再利用される可能性が高いコードを書くことができます。

イラスト; の代わりに：

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

私は好む：

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

要素作成時のプロパティの定義

jQuery 1.4では、要素を作成するときにオブジェクトリテラルを使用してプロパティを定義できます。

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

...スタイルを追加することもできます。

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

ここにドキュメントへのリンクがあります。

jQueryオブジェクトに別のエイリアスを使用する代わりに（noConflictを使用する場合）、常にすべてをクロージャーでラップしてjQueryコードを記述します。これはdocument.ready関数で行うことができます：

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

あるいは、次のようにすることもできます。

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

これが最もポータブルであることがわかります。私はプロトタイプとjQueryの両方を同時に使用しているサイトで作業しており、これらの技術はすべての競合を回避しています。

インデックスをチェック

jQueryには.indexがありますが、要素のリストが必要であり、インデックスが必要な要素を渡すため、使用するのは面倒です。

var index = e.g $('#ul>li').index( liDomObject );

次の方がはるかに簡単です。

順序なしリスト内のセット（リストアイテムなど）内の要素のインデックスを知りたい場合：

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

準備完了イベントの省略形

明示的で冗長な方法：

$(document).ready(function ()
{
    // ...
});

略記：

$(function ()
{
    // ...
});

コアjQuery関数で、selectorパラメーターに加えてcontextパラメーターを指定します。contextパラメータを指定すると、jQueryはDOMルートからではなく、DOMのより深いブランチから開始できます。十分な大きさのDOMがある場合、コンテキストパラメータを指定すると、パフォーマンスが向上します。

例：ドキュメントの最初のフォーム内でradioタイプのすべての入力を検索します。

$("input:radio", document.forms[0]);

リファレンス：http : //docs.jquery.com/Core/jQuery#expressioncontext

本当にjQueryだけではありませんが、jQueryとMS AJAXの間に小さな橋をかけました。

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

多くのASP.NET AJAXを実行している場合は、jQueryがMSによってサポートされているので、とても便利です。今では、素敵なブリッジがあれば、jQuery操作を簡単に実行できます。

$get('#myControl').j().hide();

したがって、上記の例は素晴らしいものではありませんが、ASP.NET AJAXサーバーコントロールを作成している場合は、クライアント側のコントロール実装内にjQueryを簡単に含めることができます。

複雑なセレクターのパフォーマンスを最適化する

複雑なセレクターを使用するときにDOMのサブセットをクエリすると、パフォーマンスが大幅に向上します。

var subset = $("");

$("input[value^='']", subset);

ヒントとコツ、そしていくつかのチュートリアルといえば。Jeffery Wayによるチュートリアルのシリーズ（「jQuery for Absolute Beginners」ビデオシリーズ）を見つけましたが非常に役立つことを発見しました。

jQueryを初めて使用する開発者を対象としています。彼はアニメーション、要素の作成と削除など、jQueryで多くのクールなものを作成する方法を示しています...

私はそれから多くを学びました。彼は、jQueryの使い方がいかに簡単かを示しています。今では私はそれを愛していて、たとえそれが複雑であっても、あらゆるjQueryスクリプトを読んで理解することができます。

ここで「のような1例Iでサイズ変更テキスト」

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- CSSスタイリング...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

これらのチュートリアルを強くお勧めします...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

非同期each（）関数

jquery each（）関数を実行すると、反復中にブラウザーがロックされる本当に複雑なドキュメントがある場合、またはInternet Explorerが「このスクリプトの実行を継続しますか？」というメッセージをポップアップする場合、このソリューションは1日を節約します。

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

最初に使用する方法は、each（）と同じです。

$('your_selector').forEach( function() {} );

オプションの2番目のパラメータを使用すると、反復間での速度/遅延を指定できます（アニメーションのために有用である可能性がある次の例では、反復間で1秒を待機します）：

$('your_selector').forEach( function() {}, 1000 );

これは非同期で機能するため、次のコード行の前に反復が完了しているとは限りません。

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

私はこれを社内プロジェクトのために書きましたが、改善できると確信していますが、私たちが必要とするものでうまくいきました。ありがとう-

シンタックスショートシュガーシング-オブジェクトコレクションをキャッシュし、コマンドを1行で実行します。

の代わりに：

var jQueryCollection = $("");

jQueryCollection.command().command();

私がやります：

var jQueryCollection = $("").command().command();

やや「実際の」ユースケースは、次のようなものです。

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

宣言するのが好き $this無名関数の冒頭で変数をので、jQueriedを参照できることがわかります。

そのようです：

$('a').each(function() {
    var $this = $(this);

    // Other code
});

jQueryオブジェクトを変数に保存して再利用

jQueryオブジェクトを変数に保存すると、DOMをさかのぼって検索することなく再利用できます。

（@Louisが示唆したように、今では$を使用して、変数がjQueryオブジェクトを保持していることを示しています。）

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

より複雑な例として、店の食品のリストがあり、ユーザーの基準に一致するものだけを表示したいとします。チェックボックス付きのフォームがあり、それぞれに基準が含まれています。チェックボックスにはorganicおよびのような名前がありlowfat、製品には対応するクラスがあります- .organicなど。

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

これで、jQueryオブジェクトを操作し続けることができます。チェックボックスがクリックされるたびに（チェックまたはチェック解除）、食品のマスターリストから開始し、チェックされたボックスに基づいてフィルタリングします。

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

興味深い重要なヒントのほとんどはすでに言及されているようですので、これはほんの少しの追加です。

ちょっとしたヒントは、jQuery.each（object、callback）関数です。誰もがおそらくjQuery.each（callback）を使用しています関数をしてjQueryオブジェクト自体を反復処理しています。jQuery.each（object、callback）ユーティリティ関数は、オブジェクトと配列を反復処理します。長い間、私はどういうわけか、異なる構文を除いてそれが何であるかを知りませんでした（私はすべての昔ながらのループを書くことを気にしません）。

問題は、jQuery.each（object、callback）のループの本体が関数であるため、ループ内で毎回新しいスコープを取得することです。これは、ループ内でクロージャーを作成するときに特に便利です。

言い換えると、一般的な間違いは次のようなことです。

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

これで、functions配列内の関数を呼び出すと、3回警告が表示されundefinedます。これは、たいていは望んでいない内容です。問題は、変数が1つしかなくi、3つのクロージャすべてがそれを参照していることです。ループが終了すると、の最終値iは3で、someArrary[3]ですundefined。クロージャーを作成する別の関数を呼び出すことで、問題を回避できます。または、基本的にそれを行うjQueryユーティリティを使用します。

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

ここで、関数を呼び出すと、期待どおりにコンテンツ1、2、3の3つのアラートが表示されます。

一般的に、それはあなたが自分でできなかったことではありませんが、持っているのは素晴らしいことです。

配列と同じようにjQuery関数にアクセスする

ブール値に基づいてクラスを追加/削除...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

の短いバージョンです...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

このためのユースケースはそれほど多くありません。決して少なくない; きちんとしていると思います:)

更新

コメントの読み取りタイプではない場合に備えて、ThiefMasterは、toggleClassがブール値を受け入れることを指摘します。これは、クラスを追加するか削除するかを決定します。上記の私のコード例に関する限り、これは最良のアプローチです...

$('selector').toggleClass('name_of_the_class', true/false);

更新：

サイトにこのスクリプトを含めるだけで、Firebugコンソールが表示され、任意のブラウザーでデバッグするためにポップアップ表示されます。それほど機能が充実していませんが、それでもかなり役に立ちます！完了したら、必ず削除してください。

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

このリンクをチェックしてください：

CSSトリックから

更新：新しいものを見つけました。そのjQuery Hotboxです。

jQueryホットボックス

Googleは、Google CodeでいくつかのJavaScriptライブラリをホストしています。そこからロードすると帯域幅が節約され、すでにキャッシュされているクイックcosがロードされます。

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

または

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

これを使用して、イメージが完全に読み込まれたことを通知することもできます。

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

警告ボックスを使用せずにメッセージと変数を画面にダンプするために使用できるfirebugの「console.info」。「console.time」を使用すると、タイマーを簡単に設定して一連のコードをラップし、所要時間を確認できます。

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

jQueryがquerySelectorAllを使用できるように、可能であれば疑似セレクターでフィルタリングメソッドを使用します（sizzleよりはるかに高速です）。このセレクターを考えてみましょう：

$('.class:first')

同じ選択は、以下を使用して行うことができます。

$('.class').eq(0)

「.class」の最初の選択はQSA互換であるため、どちらがより高速でなければなりません。

コレクションから要素を削除して連鎖性を維持する

以下を検討してください。

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

このfilter()関数は、jQueryオブジェクトから要素を削除します。この場合：テキスト「One」または「Two」を含まないすべてのli要素は削除されます。

入力要素のタイプを変更する

DOMに既にアタッチされている入力要素のタイプを変更しようとしたときに、この問題に遭遇しました。既存の要素を複製し、古い要素の前に挿入してから、古い要素を削除する必要があります。それ以外の場合は機能しません。

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

フォームフィールドの検証やURL解析など、サードパーティのjQueryスクリプトの賢明な使用。次に何がJavaScriptの要件に遭遇したかがわかるように、内容を確認する価値があります。

改行と連鎖性

コレクションで複数の呼び出しをチェーンする場合...

$("a").hide().addClass().fadeIn().hide();

改行すると読みやすさが向上します。このような：

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

アニメーションをトリガーしてアニメーションが繰り返されないようにするには、.stop（true、true）を使用します。これは、ロールオーバーアニメーションで特に役立ちます。

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

.append()何かを繰り返すなどのメソッド呼び出しで、自己実行型の無名関数を使用する。IE：

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

私はこれを使用して、構築するためのチェーンから抜け出すには大きくて不快なものを繰り返し処理します。

ステロイドのHTML5データ属性のサポート！

データ機能前に言及されています。これにより、データをDOM要素に関連付けることができます。

最近、jQueryチームはHTML5カスタムdata- *属性のサポートを追加しました。そして、それで十分ではなかったかのように。データ関数にステロイドを強制的に供給しました。つまり、複雑なオブジェクトをJSONの形式でマークアップに直接保存できます。

HTML：

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

JavaScript：

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!