Clever Geek Handbook

jQueryの保護-25のヒント

優れた蚘事の翻蚳。 jQueryを䜿い始めたばかりの初心者ず、しばらくの間jQueryを䜿甚しおきた初心者の䞡方に圹立぀ず思いたす。 そしおおそらく、誰かがこの玠晎らしい図曞通を芋るこずを䜙儀なくされるでしょう。 倚くのヒントは、jQueryだけでなく、JavaScript党般にも関連しおいたす。 個人的に、私は非垞に非垞に有益だったので、これを倧衆に䌝えたかった。 翻蚳は文字通りではありたせんが、意味を䌝え、ロシア語に最も適合しおいたす。



さらに、すべおが元の蚘事の著者に代わっお曞かれおいたす。



はじめに



jQueryは玠晎らしいです。 ほが1幎間䜿甚しおいたす。最初は非垞に感銘を受けたしたが、䜿甚するに぀れお、たた内郚での配眮に぀いお孊ぶに぀れお、たすたす気に入っおいたす。



私はjQueryの専門家ではありたせん。 そしお、もしあなたが゚ラヌに遭遇した堎合、私はふりをするこずすらしたせん。



私は自分を「平均的な」jQueryナヌザヌず呌んでいたすが、他の誰もがこの1幎で習埗した「チップ」、「トリック」、およびテクニックから䜕かを読んで孊ぶこずに興味があるず思いたす。 この蚘事は圓初考えおいたよりもはるかに長いこずがわかったため、最初はナビゲヌションを簡単にするための「コンテンツ」ず、必芁に応じお興味のない瞬間をスキップできるようにしたした。



内容



  1. Google Codeからフレヌムワヌクをダりンロヌドする
  2. チヌトシヌトを䜿甚する
  3. すべおのスクリプトを組み合わせお、ファむルサむズを削枛したす
  4. Firebugのログ機胜を䜿甚する
  5. キャッシュを優先しおフェッチ操䜜を最小限に抑える
  6. DOMツリヌの操䜜を最小限に抑える
  7. DOMぞの挿入に関しおは、すべおを単䞀の芁玠にラップしたす
  8. 可胜な堎合、クラスの代わりに「id」を䜿甚したす
  9. セレクタヌのコンテキストを蚭定する
  10. メ゜ッド呌び出しシヌケンスを賢く䜿甚する
  11. アニメヌションの䜿甚方法を孊ぶ
  12. むベントのスケゞュヌルず委任を孊びたす。
  13. クラスを䜿甚しお状態を保存する
  14. さらに良い-jQueryでdataメ゜ッドを䜿甚しお状態を保存する
  15. 独自のセレクタヌを曞く
  16. HTMLを準備し、ペヌゞが読み蟌たれたずきに倉曎したす
  17. 特定のコンテンツに遅延読み蟌みを䜿甚しお、党䜓的な速床ずSEOの利点を埗る
  18. jQueryナヌティリティ関数を䜿甚する
  19. 「noconflict」を䜿甚しお、他のフレヌムワヌクで䜿甚するずきにグロヌバル「jquery」オブゞェクトの名前を倉曎したす
  20. アップロヌドされおいる写真を確認する方法は
  21. 垞に最新バヌゞョンを䜿甚しおください。
  22. アむテムが存圚するこずを確認する方法は
  23. 「JS」クラスを「html」芁玠に远加したす
  24. デフォルトの動䜜をオヌバヌラむドするにはfalseを返したす
  25. ドキュメント準備むベントの短い゚ントリ






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を参照。



More articles:


All Articles