📒 😬 🤛🏾 jQueryの保護-25のヒント 🤲 ♐️ 🚶🏼

優れた記事の翻訳。 jQueryを使い始めたばかりの初心者と、しばらくの間jQueryを使用してきた初心者の両方に役立つと思います。そしておそらく、誰かがこの素晴らしい図書館を見ることを余儀なくされるでしょう。多くのヒントは、jQueryだけでなく、JavaScript全般にも関連しています。個人的に、私は非常に非常に有益だったので、これを大衆に伝えたかった。翻訳は文字通りではありませんが、意味を伝え、ロシア語に最も適合しています。

さらに、すべてが元の記事の著者に代わって書かれています。

はじめに

jQueryは素晴らしいです。ほぼ1年間使用しています。最初は非常に感銘を受けましたが、使用するにつれて、また内部での配置について学ぶにつれて、ますます気に入っています。

私はjQueryの専門家ではありません。そして、もしあなたがエラーに遭遇した場合、私はふりをすることすらしません。

私は自分を「平均的な」jQueryユーザーと呼んでいますが、他の誰もがこの1年で習得した「チップ」、「トリック」、およびテクニックから何かを読んで学ぶことに興味があると思います。この記事は当初考えていたよりもはるかに長いことがわかったため、最初はナビゲーションを簡単にするための「コンテンツ」と、必要に応じて興味のない瞬間をスキップできるようにしました。

内容

Google Codeからフレームワークをダウンロードする
チートシートを使用する
すべてのスクリプトを組み合わせて、ファイルサイズを削減します
Firebugのログ機能を使用する
キャッシュを優先してフェッチ操作を最小限に抑える
DOMツリーの操作を最小限に抑える
DOMへの挿入に関しては、すべてを単一の要素にラップします
可能な場合、クラスの代わりに「id」を使用します
セレクターのコンテキストを設定する
メソッド呼び出しシーケンスを賢く使用する
アニメーションの使用方法を学ぶ
イベントのスケジュールと委任を学びます。
クラスを使用して状態を保存する
さらに良い-jQueryでdata（）メソッドを使用して状態を保存する
独自のセレクターを書く
HTMLを準備し、ページが読み込まれたときに変更します
特定のコンテンツに遅延読み込みを使用して、全体的な速度とSEOの利点を得る
jQueryユーティリティ関数を使用する
「noconflict」を使用して、他のフレームワークで使用するときにグローバル「jquery」オブジェクトの名前を変更します
アップロードされている写真を確認する方法は？
常に最新バージョンを使用してください。
アイテムが存在することを確認する方法は？
「JS」クラスを「html」要素に追加します
デフォルトの動作をオーバーライドするにはfalseを返します
ドキュメント準備イベントの短いエントリ

1. Google Codeからフレームワークをダウンロードします

GoogleはGoogle CodeにいくつかのJavaScriptライブラリを保持しており、サーバーに保存するのに比べてそこからダウンロードすることにはいくつかの利点があります。これにより、トラフィックを節約し、非常に高速にロードできます。そして最も重要なことは、ユーザーがGoogle Codeからダウンロードしたこのライブラリを使用していずれかのサイトにアクセスした場合、ライブラリはすでにキャッシュにあります。

これは少なからず重要です。キャッシュされていないjQueryの同一のコピーを生成するサイトはいくつありますか？とても簡単です...

 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> //  jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // ,  ,    - . }); </script>

または、このような直接リンクを単に有効にすることができます...

詳細な手順はこちらです。

2.チートシートを使用する

ほとんどの言語には多くのチートシートがあるため、ヒントはjQueryに限定されません。 A4サイズの印刷用紙のすべての機能を手元に置いておくと非常に便利です。

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/

3.すべてのスクリプトを接続し、ファイルサイズを小さくします

それは、JavaScriptの一般的なアドバイスの1つです。ただし、 mQueryとmainでjQueryを使用する大規模なプロジェクトは、おそらく多くのプラグインを使用するため（著者のサイトではlocalScroll、lightbox、preloadを使用） 、このアドバイスは非常に役立ちます。

ブラウザは同時にスクリプトをロードできません（少なくとも、まだではありません）。つまり、一度に複数のスクリプトをダウンロードしている場合、ページ全体のロード時間が短縮されます。したがって、通常は各ページにスクリプトをロードする必要があることを考慮して、展開前にスクリプトを1つの大きなファイルに収集することをお勧めします。

一部のプラグインはすでに最小化およびパッケージ化できますが、残りのスクリプトを結合する必要があります。個人的にはパッカーディーンエドワーズが好きです。

4. Firebugのログ機能を使用する

Firebugをまだインストールしていない場合~~は、危険なカミソリで緊急に自分自身を殺してください~~ 。トラフィックの分析やCSSの問題の検索など、他の非常に優れた機能に加えて、Firebugにはコード実行の「ロギング」用の優れたツールがあり、スクリプトをすばやく簡単にデバッグできます。

完全な説明は次のとおりです。

私のお気に入りの「機能」は、アラートウィンドウを使用せずに画面にメッセージと変数を直接表示できる「console.info」と、選択したコードにタイマーを設定して実行にかかる時間を確認できる「console.time」です。この作品。そして、これはすべて非常に使いやすいです。

 console.time（「リストの作成」）;  
  
 for（i = 0; i <1000; i ++）{  
     var myList = $（ '。myList'）;  
     myList.append（ 'これはリスト項目です' + i）;  
 }  
  
 console.timeEnd（ 'リストの作成'）;

この例では、非常に単純で本質的に役に立たないコードを意図的に作成しました。以下のヒントのいくつかでは、タイマーを使用して改善する方法を示します。

5.キャッシングを優先してキャッシング操作を最小限に抑える

JQueryセレクターは素晴らしいです。ページの要素を非常に簡単に選択できますが、「内部」では適切な量のアクションが生成され、それらを乱用すると全体的なパフォーマンスが低下する可能性があります。

同じ要素を何度も（たとえばループで）選択する必要がある場合は、その要素を1回選択して、その内容を操作するためにメモリに保存することをお勧めします。ループを使用して箇条書きリストに項目を追加する次の例をご覧ください。

 for（i = 0; i <1000; i ++）{  
     var myList = $（ '。myList'）;  
     myList.append（ 'これはリスト項目番号' + i）;  
 }

Firefox 3のコンピューターでは1066ミリ秒かかります（IE6でどのように機能するか想像してみてください！）。これはJavaScriptの標準により非常に遅いです。次に、セレクターを1回使用する別の例を見てみましょう。

 var myList = $（ '。myList'）;  
  
 for（i = 0; i <1000; i ++）{  
     myList.append（ 'これはリスト項目番号' + i）;  
 }

1行しか変更していないにもかかわらず、224ミリ秒しかかからず、4倍以上高速です。

6. DOMツリーの操作を最小限に抑える

挿入するDOM呼び出しの数を最小限に抑えると、前のヒントのコードをさらに高速化できます。 .append（）、. prepend（）、after（）、wrap（）などのDOMでの挿入操作はリソース集約型であり、乱用すると事態が悪化する可能性があります。

必要なのは、文字列結合を使用してリストを作成し、.html（）などの関数を1つだけ使用して、箇条書きリストにアイテムをすばやく追加することだけです。例を見てみましょう：

 var myList = $（ '＃myList'）;  
  
 for（i = 0; i <1000; i ++）{  
     myList.append（ 'これはリスト項目番号' + i）;  
 }

216ミリ秒かかりました。これは1/5秒を少し上回りますが、リストアイテムを文字列として作成し、次のように.html（）メソッドを使用して挿入すると...

 var myList = $（ '。myList'）;
 var myListItems = '';
  
 for（i = 0; i <1000; i ++）{  
     myListItems + = '<li>これはリストアイテム番号です。' + i + '</ li>';  
 }  
  
 myList.html（myListItems）;

185ミリ秒かかりますが、それほど高速ではありませんが、結局は31ミリ秒短縮されます。

7. DOMへの挿入に関しては、すべてを単一の要素にラップします

さて、これがなぜ機能するのか私に聞かないでください（経験豊富な誰かがこれを説明できると確信しています）。

最後の例では、.html（）メソッドを使用して、1000個のリスト項目を箇条書きリストに挿入しました。
挿入する前にそれらをulタグに入れ、完成したulを別のタグ（div）に入れると、おそらく1000の代わりに1つのタグのみが正常に挿入され、おそらく効果があります。このようなもの...

 var myList = $（ '。myList'）;  
 var myListItems = '<ul>';  
  
 for（i = 0; i <1000; i ++）{  
     myListItems + = '<li>これはリストアイテム番号です。' + i + '</ li>';  
 }  
  
 myListItems + = '</ ul>';  
 myList.html（myListItems）;

今回、「すべてに関するすべて」にかかった時間はわずか19ミリ秒で、これは非常に大きな改善であり、生産性は最初の例と比較して50倍以上向上しました。

8.可能な場合、クラスの代わりに「id」を使用します

jQueryでは、javascriptが「id」で要素を選択するのと同じくらい簡単にクラスごとにDOM要素を選択します。その結果、多くの人々が以前よりもはるかに広くクラスを使用しています。ただし、jQueryは任意のブラウザーの標準メソッド（getElementById）を使用し、DOMで追加の操作を実行しないため、「id」で要素を選択する方がはるかに優れています。どれくらいいいですか？見てみましょう。

前の例を使用し、各「li」要素に一意のクラスが追加されるように変更します。次に、ループ内のすべての要素を選択します（一度に1つずつ）。

 //リストを作成します
 var myList = $（ '。myList'）;  
 var myListItems = '<ul>';  
  
 for（i = 0; i <1000; i ++）{  
     myListItems + = '<li class = "listItem' + i + '">これはリストアイテム番号です</ li>';  
 }  
  
 myListItems + = '</ ul>';  
 myList.html（myListItems）;  
  
 //ループ内の各要素を選択します
 for（i = 0; i <1000; i ++）{  
     var selectedItem = $（ '。listItem' + i）;  
 }

予想どおり、ブラウザは弱くフリーズせず、5066ミリ秒（5秒以上）後にのみ終了しました。そのため、各要素にクラスではなくidを指定してコードを変更し、ループ内でそれぞれを選択しましたが、すでにidによって選択しています。

 //リストを作成します
 var myList = $（ '。myList'）;  
 var myListItems = '<ul>';  
  
 for（i = 0; i <1000; i ++）{  
     myListItems + = '<li id = "listItem' + i + '">これはリストアイテムです</ li>';  
 }  
  
 myListItems + = '</ ul>';  
 myList.html（myListItems）;  
  
 //ループ内の各要素を選択します
 for（i = 0; i <1000; i ++）{  
     var selectedItem = $（ '＃listItem' + i）;  
 }

今回はわずか61ミリ秒です。約100倍高速。

9.セレクターのコンテキストを設定する

デフォルトでは、$（ '。MyDiv'）のようなセレクターを使用すると、DOMドキュメント全体にアクセスします。特定の場合（たとえば、大きなページの場合）、パフォーマンスに大きな影響を与える可能性があります。

jQuery関数はフェッチ時に2番目のパラメーターを取ります。

 <i> jQuery（式、コンテキスト）</ i>

セレクタにコンテキストを渡すことで、検索を開始する要素を伝えます。したがって、DOMドキュメント全体にアクセスする必要はありません。

これを実証するために、最初のヒントから例を再度取り上げます。 1000個の要素の箇条書きリストを作成し、各要素には独自のクラスがあります。次に、ループ内のスクリプトが各要素を選択します。クラスで選択する場合、1000個の要素すべてを選択するのに約5秒かかったことを思い出してください。

 var selectedItem = $（ '。listItem' + i）;

次に、jQueryが箇条書きリスト内でのみセレクターを使用するようにコンテキストを追加しました。このように：

 var selectedItem = $（ '。listItem' + i、$（ '。myList'））;

3818ミリ秒かかりましたが、それ自体はまだ非常に遅いですが、セレクターへの最小限の変更で既に25％以上の速度向上が実現しています。

10.メソッド呼び出しシーケンスを使用する

jQueryの最も優れた機能の1つは、メソッド呼び出しのシーケンスを作成する機能です。たとえば、要素のクラスを変更する場合：

 $（ 'myDiv'）。removeClass（ 'off'）。addClass（ 'on'）;

ほとんどの場合、jQueryを使用して最初の5分間でこれを学習しましたが、それだけではありません。まず、これは改行でうまく機能します（jQueryはまだJavaScriptであるため）。つまり、次のような美しいコードを書くことができます。

 $（「＃mypanel」）  
     .find（ 'TABLE .firstCol'）  
     .removeClass（ '。firstCol'）  
     .css（「背景」：「赤」）  
     .append（ '<span>現在、このセルは赤</ span>'）;

シーケンスを使用すること自体も、セレクターの使用を制限するのに役立ちます。

しかし、それだけではありません。要素に対していくつかの機能を実行したいが、最初の使用の1つが何らかの方法で要素を変更したとしましょう。たとえば：

 $（ '＃myTable'）。find（ '。firstColumn'）。css（ 'background'、 'red'）;

テーブルを選択し、「firstColumn」クラスを持つセルを見つけるためにさらに調査し、それらを赤で色付けしました。

クラス「lastColumn」ですべてのセルを青で着色する必要があると想像してください。 find（）関数を使用したため、「firstColumn」クラスでマークされていないすべてのセルをフィルターで除外したため、セレクターを再利用してテーブル要素を取得する必要があり、すぐにシーケンスを並べることはできませんか？さいわい、jQueryにはend（）関数があり、以前の元の選択に戻すため、シーケンスを続行できます。

 $（ '＃myTable'）  
     .find（ '。firstColumn'）  
         .css（「背景」、「赤」）  
     .end（）  
     .find（ '。lastColumn'）  
         .css（ 'background'、 'blue'）;

シーケンスに含めることができる独自のjQuery関数を作成するよりも簡単です。必要なことは、要素を変更してそれを返す関数を書くことだけです。

 $ .fn.makeRed = function（）{  
     return $（this）.css（ 'background'、 'red'）;  
 }  

 $（ '＃myTable'）。find（ '。firstColumn'）。makeRed（）。append（ 'hello'）;

ちょうどいい？

11.アニメーションの使用方法を学ぶ

jQueryを初めて使い始めたとき、slideDown（）やfadeIn（）などのインラインアニメーションを使用してクールな効果を簡単に得られることに満足しました。 jQueryのanimate（）メソッドは非常に使いやすく、同時に非常にクールなので、もう少し先へ進むのは非常に簡単です。実際、jQueryソースを見ると、これらのメソッドはすべて、ミニ抽象化の一種であり、animate（）関数を使用する特殊なケースであることがわかります。

 slideDown：function（speed、callback）{  
     this.animateを返します（{height： "show"}、speed、callback）;  
 }、  
  
 fadeIn：関数（速度、コールバック）{  
     return this.animate（{opacity： "show"}、speed、callback）;  
 }

animate（）メソッドは単純に任意のCSSスタイルを取り、1つの値から別の値にスムーズに変換します。したがって、幅、高さ、透明度、背景色、インデント、色、フォントサイズなど、必要に応じて変更できます。

ここでは、たとえば、マウスをホバーするとアイテムの高さが100ピクセルに増加するアニメーションメニューを作成します。

 $（ '＃myList li'）。mouseover（function（）{  
     $（これ）.animate（{"高さ"：100}、 "遅い"）;  
 }）;

他のjQuery関数とは異なり、アニメーションは自動的にキューに入れられるため、最初の直後に2番目の同じ効果が必要な場合は、メソッドを再度呼び出すだけで、イベントとコールバックを割り当てる必要はありません。

 $（ '＃myBox'）。mouseover（function（）{  
     $（これ）.animate（{"width"：200}、 "slow"）;  
     $（これ）.animate（{"高さ"：200}、 "遅い"）;  
 }）;

エフェクトを同時に流したい場合は、オブジェクトのパラメーターで両方のスタイルを指定して、1回呼び出します。このようなもの：

 $（ '＃myBox'）。mouseover（function（）{  
     $（this）.animate（{"幅"：200、 "高さ"：200}、 "遅い"）;  
 }）;

そのため、可変数値を持つプロパティをアニメーション化できます。また、デフォルトではこれを行いたくないプロパティのアニメーション化に役立つプラグインをダウンロードすることもできます。色や背景色など。

12.イベントの指定と委任を学びます。

jQueryでは、イベントハンドラーは単にDOM要素に割り当てられますが、これは素晴らしいことですが、ハンドラーを追加しすぎるとパフォーマンスが低下します。イベント処理の委任により、機能の面で同様の結果を持つ要素によって「リスン」されるイベントを追加することができます。理解する最良の方法は、以下を確認することです

 $（ '＃myTable TD'）。クリック（関数（）{  
     $（これ）.css（ 'background'、 'red'）;  
 }）;

これらのセルをクリックすると、表のセルを赤に変える簡単な機能。 10列50行の小さなテーブルがあるとしますが、これは、500個のイベントハンドラーが既に「待機中」であることを意味します。たぶん、テーブル全体に1つのイベントのみを割り当て、テーブルでクリックが発生したときに、ハンドラーにイベントを引き起こしたセルを決定させる方がはるかに適切でしょうか？

これはイベント委任と呼ばれるものであり、実装は非常に簡単です。

 $（ '＃myTable'）。クリック（関数（e）{  
     var clicked = $（e.target）;  
     clicked.css（ 'background'、 'red'）;  
 }）;

「e」には、クリックが発生した要素など、イベントに関する情報が含まれます。確認する必要があるのは、ユーザーがクリックしたセルを確認することだけです。はるかに便利です。

イベントの委任には、別の非常に大きなボーナスがあります。ハンドラーを要素のセットにバインドすると、イベントが割り当てられたときにこのセットに含まれていた要素だけが結合されます。セレクターによって選択される新しい要素をDOMに追加する場合、それらにはハンドラーがありません。私が得ているものを参照してください？要素が変更された場合、それらは常に割り当てられ、再割り当てされなければなりません。

委任を使用する場合、必要なだけ要素をDOMに追加でき、イベントハンドラーはそれらの要素で正常に機能します。

この記事の執筆時点では、著者はバージョン1.2.6を使用していましたが、バージョン1.3以降、jQueryにはイベントの再割り当ての問題に対処する新しい機能、 jQuery Event / liveがあります。

13.クラスを使用して状態を維持する

これは、HTMLピース情報を保存する最も簡単な方法です。 jQueryはクラスに基づいて要素を完全に操作するため、要素の状態に関する情報を保存する必要がある場合は、保存するために追加のクラスを追加してみませんか？

以下に例を示します。プルダウンメニューを作成します。ボタンをクリックすると、パネルが閉じている場合はslideDown（）で表示され、開いている場合はslideUp（）で表示されるようになります。 HTMLから始めましょう。

 <div class = "menuItem expanded">  
     <div class = "button">  
        私をクリック  
     </ div>  
     <div class = "panel">  
         <ul>  
             <li>メニュー項目1 </ li>  
             <li>メニュー項目2 </ li>  
             <li>メニュー項目3 </ li>  
         </ ul>  
     </ div>  
 </ div>

とても簡単です！ラッパー要素（div）に追加のクラスを追加しました。このクラスには、要素の状態を伝える以外の役割はありません。したがって、必要なのは、ボタンが押されたときに対応するパネルのslideUp（）またはslideDown（）を生成するonclickイベントハンドラだけです。

 $（ '。button'）。クリック（関数（）{  
  
     var menuItem = $（this）.parent（）;  
     var panel = menuItem.find（ '。panel'）;  
  
     if（menuItem.hasClass（ "expanded"））{  
         menuItem.removeClass（ 'expanded'）。addClass（ 'collapsed'）;  
         panel.slideUp（）;  
     }  
     else if（menuItem.hasClass（ "collapsed"））{  
         menuItem.removeClass（ 'collapsed'）。addClass（ 'expanded'）;  
         panel.slideDown（）;  
     }  
 }）;

これは非常に単純な例ですが、他のクラスを追加して、要素またはHTMLの一部に関するあらゆる種類の情報を保存できます。

ただし、少し複雑な場合はすべて、次のヒントを使用することをお勧めします。

14.非常にクール-jQueryの組み込みデータ（）メソッドを使用して状態を保存する

特定の理由により、これは十分に文書化されていませんが、jQueryには内部データ（）メソッドがあり、DOM要素に従って、キー/値のペアで情報を保存するために使用できます。データの保存は次のように簡単です。

 $（ '＃myDiv'）。data（ 'currentState'、 'off'）;

過去のヒントから例を改善できます。同じHTML（「拡張」クラスを除く）を使用し、data（）関数を使用します。

 $（ '。button'）。クリック（関数（）{  
  
     var menuItem = $（this）.parent（）;  
     var panel = menuItem.find（ '。panel'）;  
  
     if（menuItem.data（ 'collapsed'））{  
         menuItem.data（ 'collapsed'、false）;  
         panel.slideDown（）;    
     }  
    その他{  
         menuItem.data（ 'collapsed'、true）;  
         panel.slideUp（）;  
     }  
 }）;

data（）およびremoveData（）の詳細については、 jQueryの内部構造に関するこのページを参照してください。

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

jQueryには、ID、クラス、タグ、属性などで要素を取得するための多数の組み込みセレクターが含まれています。しかし、他の基準に従って要素を選択する必要があり、jQueryに適切なツールがない場合はどうすればよいでしょうか？

最初に頭に浮かぶのは、最初に要素にクラスを追加することです。その後、選択にそれらを使用しますが、実際には、jQueryの新しいセレクターを作成することはそれほど問題ではありません。

これまでのところ、これを実証する最良の方法は例を使用することです。

 $ .extend（$。expr ['：']、{  
     over100pixels：関数（a）{  
         return $（a）.height（）> 100;  
     }  
 }）;  
  
 $（ '。box：over100pixels'）。クリック（関数（）{  
    アラート（「クリックによって妨げられた要素、高さ100ピクセル以上」）;
 }）;

コードの最初のブロックは、100ピクセルを超えるすべての要素を検索する独自のセレクターを作成します。 2番目のブロックは、最初のブロックを使用して、これらすべての要素にハンドラーを割り当てます。

ここではこれについて詳しくは説明しませんが、このようなツールがいかに優れているか想像できます。「カスタムjqueryセレクター」というトピックをGoogleで検索すると、多くの興味深いことが見つかります。

16. HTMLを準備し、ページが読み込まれたら変更します

タイトルはそれほど明確ではないかもしれませんが、このヒントは~~ひどい~~コードを改善し、その重量と読み込み時間を削減し、とりわけ、SEOで~~より多くのキーワード~~を~~ページに~~詰め込むのに役立ちます。このようなHTMLを例としてみましょう。

 <div class = "fieldOuter">  
     <div class = "inner">  
         <div class = "field">これはフィールド番号1です</ div>  
     </ div>  
     <div class = "errorBar">  
         <div class = "icon"> <img src = "icon.png" alt = "icon" /> </ div>  
         <div class = "message"> <span>これはエラーメッセージです</ span> </ div>  
     </ div>  
 </ div>  
 <div class = "fieldOuter">  
     <div class = "inner">  
         <div class = "field">これはフィールド番号2です</ div>  
     </ div>  
     <div class = "errorBar">  
         <div class = "icon"> <img src = "icon.png" alt = "icon" /> </ div>  
         <div class = "message"> <span>これはエラーメッセージです</ span> </ div>  
     </ div>  
 </ div>

これはフォームレイアウトの例であり、タスクを説明するために少し変更されています。このコードはひどいものであり、フォームが大きい場合は、ひどく長いページになってしまい、見苦しいページになってしまうことに同意するでしょう。 HTMLで次のようなものを使用する方がはるかに良いでしょう。

<div class="field">  1</div>  
<div class="field">  2</div>  
<div class="field">  3</div>  
<div class="field">  4</div>  
<div class="field">  5</div>

, — jQuery, HTML. :

$(document).ready(function() {  
    $('.field').before('<div class="fieldOuter"><div class="inner">');  
    $('.field').after('</div><div class="errorBar"><div class="icon">  
        <img src="icon.png" alt="icon" /></div><div class="message">  
        <span>   </span></div></div></div>');
 }）;

, , , HTML-, .

17. « » (lazy loading) SEO

HTML, — «lazy loading» - - — , AJAX- , . , — , .

. 3 , Google, . HTML load(), . :

$('#forms').load('content/headerForms.html', function() {  
    //       
    //       . .
 }）;

. , . , , - , .

18. jQuery

jQuery — . , JavaScript:

jQuery utilities

, - ( IE7 indexOf()!). jQuery , , , .

JavaScript , , , . JavaScript «select», getElementById, «» , , . jQuery :

$('#selectList').val();

, jQuery .

19. «noconflict» «jquery»,

JavaScript- "$" , . , . .noconflict() "$" ,

var $jabrajabr = jQuery.noConflict();  
$jabrajabr('#myDiv').hide();

20. ?

, , ( -, «» . .). , .

, — .load() «img» () callback-. «src» :

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

, alert , .

21.

jQuery John Resig, , .

jQuery ( — . .) 1.2.6, , — Sizzle, , , Firefox, 4 . , — .

22. , ?

, , , jQuery , -, DOM. - , - , , length:

if ($('#myDiv).length) {  
    // your code  
 }

, .

23. «JS» «html»

Karl' Swedberg', jQuery.

…

, jQuery ,
«JS» «html»:

$('HTML').addClass('JS');

, , JavaScript , CSS-, , JavaScript :

.JS #myDiv{display:none;}

これは、JavaScriptがオンになっているときにコンテンツを非表示にし、必要に応じてjQueryを使用して表示できることを意味します（たとえば、一部のパネルを最小化し、ユーザーがクリックしたときにのみ展開します）。（検索ボットを含む）、非表示ではないため、すべてのコンテンツが表示されます。私自身もこれを積極的に使用します。

彼の全文はこちらで読むことができます。

24.デフォルトの動作をオーバーライドするには、falseを返します。

これは明らかな場合とそうでない場合があります。そうする習慣がある場合：

<a href="#" class="popup">悪役、クリックしてください</a>

...そして、次のようなイベントハンドラを割り当てます。

$（ '。popup'）。クリック（関数（）{  
    //ポップアップの起動コード
 }）;

… , , , . , , , «» ( #).

, — , , . «return false;» , :

$('.popup').click(function(){  
    //   popup'
     falseを返します。  
 }）;

25.

, , $(document).ready.

:

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

$(function (){  
    //  
 }）;

これは、仲間のJon Hobbs-Smithからの叙事詩jQuery トリックコレクションの終わりです。あなたがあなた自身のために何か新しいことを学んだことを願っています。

更新する「順不同リスト」を箇条書きリストと正しく呼んでくれたNemeZZiZZ habruiserに感謝します（「順不同リスト」として翻訳しました。もちろん、文字通りですが、間違いなくチュクチを放ちます）。

更新2。イベントの予約と委任に関連するバージョン1.3以降のjQueryの新機能を指摘してくれたhabraiser david_mzに感謝します（セクション 12を参照）。

jQueryの保護-25のヒント