JQuery実践チュートリアルのソースコード

全部で6章あり、JQueryの実践的なソースコードです。

講義 1:

このセクションで学ぶ JQuery およびその他の開発知識:
1.HTML はページのコンテンツを担当し、CSS はページのスタイルを担当し、JavaScript はページの動作を担当します
2. レンダリングおよび表示方法をブラウザに通知するために、HTML に DOCTYPE が必要です
3. 最初に div ノードまたは Span ノードを定義して、後でサーバーから返されたデータを表示できます。
4. border 属性はページ要素の境界線を制御できます
5.background-*** は、背景画像、その位置、繰り返し表示される方法を制御できます
6. #idname または .classname を使用してカスタム HTML ノード スタイルを定義できます
7. $(document).ready(function(){}) を使用して、ページのロード時に実行する必要があるメソッドを定義できます。
8. $() メソッドを通じてページの指定されたノードを取得できます。パラメータは特定の CSS セレクターです。 9. $() メソッドによって返された jquery オブジェクトに対してさまざまな Jquery メソッドを実行して、データの取得、イベントの定義、操作の実行を行うことができます。
10. val()メソッドは、ノード
のvalue属性値を取得できます。 11.html() メソッドはノードに HTML コンテンツを設定できます
12.click() メソッドはマウス クリック イベントに応答できます
13. keyup() メソッドはキーボード ポップアップ イベントに応答できます。
14. $.get() メソッドは、get モードでサーバーと対話できます。データが返されると、登録されたコールバック メソッドが呼び出されます。このメソッドは、サーバーから返されたデータを表すプレーン テキスト パラメータを受け取ります。
15.addClass()removeClass()メソッドは、クラス
をノードに追加または削除できます。 16. サーバーに送信されるデータは、サーバー コード内で JavaScript で 2 回エンコードされ、UTF-8 で 1 回 URL デコードされます。これにより、中国語の文字化けの問題が解決されます。



講義 2

このセクションで学ぶ JQuery およびその他の開発知識:
1.table には thead と tbody
を含めることができます 2. ヘッダーの内容は th
に配置できます。 3.table{} はタグ セレクターと呼ばれ、ページ全体のすべてのテーブルに影響を与えることができます。
4.table td{} は、テーブルに含まれるすべての td を表します。
5. border-collapse: Collapse を使用して、表内のセルの境界線を結合できます。
6. th に背景色がある場合、th が属する tr に定義されている背景色は無効となります。
7.$(function(){}) は、$(document).ready(function(){})
を記述する簡略化された方法です。 8.$("tbody tr") は tbody
内のすべての tr ノードを返すことができます 9.$("tbody tr:even") は、tbody
内の偶数のインデックス値を持つすべての tr ノードを返すことができます 10. css メソッドを使用して、ノードの css 属性を設定または取得できます。パラメータ名は css 属性名です。
11.JQuery のオブジェクト コンテンツにはセレクターに対応する DOM ノードが含まれており、配列形式で保存されます
12. get メソッドは、JQuery オブジェクトに含まれる特定の DOM ノードを取得できます
13.This in 関数は、この関数を実行するオブジェクトを表します
14. $() メソッドのパラメータが DOM オブジェクトの場合、このメソッドは DOM オブジェクトを JQuery オブジェクトに変換することと同等です。
15. Children メソッドはノードの子ノードを取得でき、パラメータを指定して子ノードのコンテンツを制限できます。
16. セレクターによって返された JQuery オブジェクトに複数の DOM ノードが含まれている場合、クリックなどのイベントがこのオブジェクトに登録されると、すべての DOM ノードがイベントに使用されます
17.html メソッドは、ノード
の HTML コンテンツを設定または取得できます。 18. val メソッドは、ノード
の値を取得または設定できます。 19. $() メソッドのパラメータが HTML テキストの正しい部分である場合は、DOM ノードを作成して、それを JQuery オブジェクトにパッケージ化できます。 20. JQuery のメソッドのほとんどは、このメソッドを実行する JQuery オブジェクトを返すため、チェーン メソッドを使用して JQuery のコードを作成できます。
21.width メソッドはノードの幅を設定または取得できます
22.appendTo メソッドは、ノードを別のノードのすべての子ノードに追加できます
23. イベント配信を防止すると、現在のノードのイベントが false を返す可能性があります
24. トリガー メソッドは、特定の JavaScript イベントの発生をトリガーできます。
25. JQuery のイベント メソッドのパラメーター関数はイベント パラメーターを定義できます。JQuery はブラウザーのイベント差異をブロックし、使用可能なイベント オブジェクトを渡します
26. JQuery イベント オブジェクトには、キーボード キーのキー値を取得するための what 属性があります
27.13 は Enter キーを表し、27 は ESC キーを表します


講義 3

このセクションで学ぶ JQuery およびその他の開発知識:
1. ページ内のメニュー項目は、ネストされた ul と li
で表すことができます。 2. メニューの最外層は ul です。1 つの層の各メイン メニューは li に配置されます。サブメニューがある場合は、メイン メニューの li に新しい ul を作成し、それをネストして、多層メニュー。
3. ブラウザでは、デフォルトで ul 要素と li 要素のテキストの前にドット識別子があり、li 要素はインデントされます。 Opera ブラウザは特殊で、li の識別子が他のブラウザとは異なります。
4. list-style 属性値が none の場合、ul と li
の前にある小さなドットをクリアできます。 5. サブメニューのインデント値をクリアするには、パディングとマージンの両方が 0 である必要があります。IE6 および IE7 は、マージンも 0
である場合にのみインデント値をクリアできます。 6. 要素の背景画像を指定するには、background-image を使用できます。背景画像が要素の実際のサイズより小さい場合、背景画像は領域全体を埋めるまで自動的に水平方向と垂直方向に繰り返されます。 7. bakcground-repeat を使用して、背景画像の繰り返し塗りつぶし方法を制御できます。
8. 要素に背景画像と背景色の両方が定義されている場合、背景画像がある場所には背景色は表示されません。 9.text-decoration属性値がnoneの場合、テキスト
の下線を解除できます。 10.Background-position は背景画像の位置を制御でき、属性値は数値または水平および垂直位置を制御する center、left、top の値のいずれかになります。この属性には 2 つの値があり、1 つ目は水平方向に対応し、2 つ目は垂直方向に対応します。 11.background-image の値は none です。これは、背景画像がないことを意味します
12.background-repeat の値が no-repeat の場合、背景画像はその領域に繰り返し表示されません。
13. IE6 以外のブラウザでは、表示値を block に設定することで、a 要素を領域いっぱいに表示できます。 IE6の場合、表示をインラインブロックに設定し、aの幅を設定する必要があります。
14. display の値は none で、要素を非表示にするために使用できます。
15. .main a と .main > a の違いは、前者は .main のこのクラスの要素内のすべての a ノードを選択するのに対し、後者は .main
の子ノードの中からノードのみを選択することです。 16. show メソッドと Hide メソッドを使用すると、要素の表示と非表示を切り替えることができます。パラメータを指定しない場合は、CSS の表示属性を変更するのと同じ効果になります。パラメータには、ミリ秒単位の数値、または「slow」、「normal」、「fast」の 3 文字を指定できます (
) 表示または非表示に必要な時間を制御できます。アニメーション効果は、要素の幅と高さを継続的に変更することによって実現されることに注意してください。
17. toggle メソッドはより強力で、要素が表示されているか非表示かを判断する手間を省き、表示されている要素を直接非表示にし、非表示の要素を表示します。パラメータの使い方は表示・非表示と同じです。
18. slideDown と slideUp は、上下にスクロールする効果を実現できます。実際、アニメーション効果は、指定された時間内で要素の高さを変更することによって実現されます。これら 2 つのメソッドのパラメータが空の場合は、show および Hide とは異なることに注意してください。
19.slideToggle と toggle は同様の効果を実現します
20.DOCTYPE は JQuery のアニメーションに影響を与えます。 DOCTYPE 定義がない場合、JQuery のアニメーションは IE で悪いちらつき効果をもたらします。
21. float の値は left です。これにより、元々 1 行に配置されていたすべての要素が 1 行内で左にフロート表示されます。
22. 複数のセレクターに同じスタイルを定義し、セレクターを分離するために使用できます。同様に、JQuery の $ メソッドでもセレクターを渡すことができます。



講義 4

このセクションで学ぶ JQuery およびその他の開発知識:
1. タグのグループは ul によって管理され、各タグは ul 内の li であり、タグの下のコンテンツは div
によって管理されます。 2. フローティング要素 (float) に続く要素はフローティング要素を囲みます。この囲みを望まない場合は、フローティング要素の後の要素に clear 属性を定義できます (
) 3. 現在のラベルとコンテンツ領域の統合を実現するには、現在のラベルに同じ背景色と同じ色の境界線を使用します。
4. JQueryのmouseoverメソッドとmouseoutメソッドは、標準JavaScriptのonmouseoverイベントとonmouseoutイベントに対応しており、マウスの出入りのイベントを処理できます。
5. 複数の要素を含むJQueryオブジェクトに対して各メソッドを実行すると、各メソッドに登録できる関数の内容が各要素で実行されます。同時にこれは
この関数は、この要素のインデックス値を示すパラメーターを受け取ることもできます。 JQuery の多くのメソッドもそれぞれを使用します
6. eq メソッドは、インデックス値に基づいて JQuery オブジェクトに含まれる複数の要素のうち 1 つだけを取得できますが、その要素に対応する新しい JQuery オブジェクトを返します。
7. $(“div:eq(1)”)
のようにセレクターで eq を使用します。 8. addClass メソッドとremoveClass メソッドは、要素のクラス定義を追加および削除するために使用されます。
9. Javascript の setTimeout メソッドは特定のコードの実行を遅延させることができ、対応する clearTimeout は遅延設定操作をクリアできます。
10. AJAX アプリケーションを作成する場合は、今すぐ FireFox でデバッグすることを検討してから、他のブラウザでチェックして、考えられる互換性の問題を修正することができます。
11. カーソル属性は要素上のマウス スタイルを制御できます。ポインタの属性値は手のスタイルを表し、これが一般的なリンク マウス スタイルです。 12.position 属性は、要素の配置方法を制御できます。値が相対的な場合、元の位置を基準にして配置することを意味します。 top、left、bottom、right の値を設定することで、要素の元の位置に対する相対的な移動を制御できます。 13. Z-index は、ページ上の要素のレイヤーの高さを制御できます。値が大きいほど、ページのレイヤーの高さが高くなり、Z-index 値が低い一部の要素もカバーされます。位置の値が相対または絶対である要素に対してのみ、z-index が有効になります。
14. JQuery の load メソッドは非常に強力で、指定された静的または動的ページ、またはサーバー側プログラムから出力されたデータを、load メソッドを実行する JQuery オブジェクトによってラップされた要素にロードできます。
15. ロードメソッドは部分ロードもサポートしており、ロードされたページアドレスの後にスペースを追加し、セレクタを使用して、セレクタに一致するページの部分をロードします。
16. ロードされるページは UTF-8 でエンコードされている必要があります。そうしないと、ロード後に中国語の文字が文字化けします。
17.bind を使用すると、JavaScript イベントまたは JQuery で定義されたイベントを指定したノードにバインドできます。 JQuery で登録メソッドを直接提供しないイベントの場合は、この方法で登録できます。メソッドの 2 番目のパラメーターは、イベント実行のメソッド定義にすることができます。
18.ajaxStart と ajaxStop は、ajax インタラクションの開始および終了の前後のイベントに対応しており、これら 2 つのイベントをノードに登録すると、現在のページでの ajax インタラクションの開始および終了の前後に、指定されたメソッドが実行されます。



講義 5

1. imgタグのalt属性を記述する 画像が読み込まれていない場合や画像が存在しない場合は、この属性のテキスト情報が表示されます
2.select はドロップダウン ボックスを表します。ドロップダウン ボックスの各項目はオプションです。オプションの開始タグと終了タグの内容がページに表示されます。value 属性の値は取得と送信に使用されますJQuery の val メソッドを使用してサーバーに送信します。
選択された属性値が選択されている場合は、現在のオプションが選択されていることを意味します
3. div 要素を中央に表示する方法: div の幅を設定し、margin-left と margin-right の値を両方とも auto にします。略語は margin: 0 auto;
です。 4. htmlのpタグは段落の内容を表しており、内容は1行以上となり、次の内容は改行で表示されます。 5. p 内のテキストと画像を中央に配置するには、text-align 属性を使用できます。属性値は center です。 p タグにはデフォルトで margin-top と margin-bottom の値がありますが、必要に応じて CSS を通じてクリアできます
6. 属性値のvisibilityがhiddenの場合、要素は非表示になりますが、noneのdisplayとは異なり、ページ上の一定のスペースを占有しますが、表示されません。 7. 複数のセレクターが同じ属性値を持つ場合、それらを一緒に定義し、カンマで区切ることができます
8.change メソッドは、標準 Javascript の onchange イベントに対応し、ドロップダウン ボックスの内容が変更されたときのイベントを処理できます。9.parentメソッドはノード
の親ノードを取得できます。 10. 次のメソッドはノードの次の兄弟ノードを取得でき、対応する前のメソッドはノードの前の兄弟ノードを取得できます。 11. $.post メソッドは、サーバーとの非同期ポスト リクエストを開始できます。最初のパラメータは要求されたサーバーのアドレス、2 番目のパラメータはサーバーに送信されるデータ、パラメータは
を使用した Javascript オブジェクトです。 名前と値のペアの形式で表現され、3 番目のパラメーターはコールバック メソッドで、4 番目のパラメーターはサーバーから返されたデータ型を示します。JQuery は、このパラメーターに基づいて変換するのに役立ちます。 get メソッドは 2 番目のパラメーターのみが異なり、他のパラメーターの使用法は同じです
12.JavaScript での簡単なオブジェクト定義方法は {key1: value1, key2: value2}
です。 13. JSON のデータ形式は、実際には、{key1: value1, key2: [1,2,3]} や [1,2,{key2: value2} など、JavaScript のオブジェクトまたはデータで定義されたテキスト形式のコンテンツです。 ]
14. $("<option></option>") メソッドを直接使用してドロップダウン ボックスにオプションを作成し、appendTo メソッドを使用してそれらをドロップダウン ボックスに追加できます
15.attr メソッドはノードの属性値を設定または取得できます
16.ajaxStart は JQuery によって発行された各 ajax リクエストが開始される前に実行され、ajaxStop は JQuery キュー内のすべての ajax リクエストが終了した後に実行され、ajaxComplete は JQuery によって発行された各 ajax リクエストが終了した後に実行されます。 17. fadeOut および fadeIn は、フェードアウトおよびフェードインの効果を実現できます。パラメーターの内容は、slideUp および slideDown メソッドと同様です。
18. animate メソッドは、任意のアニメーション効果を実現でき、特定の CSS 属性を制御して、アニメーションの効果を達成するために一定期間内に変更することができます。 19.不透明度は要素の透明度を変更できます。これは IE のフィルタを使用して実装されます。100 は完全に表示されることを意味し、0 は完全に透明であることを意味します。IE 以外のブラウザでは不透明度属性が使用されます。1 は完全に表示されることを意味し、0 は透明であることを意味します。 animate メソッドの JQuery
ブラウザの違いは遮蔽され、不透明度を直接使用してフェードインおよびフェードアウト効果を実現できます。
20. data メソッドを使用してデータをキャッシュできます。キャッシュによりシステムの運用効率が向上し、サーバーの負荷が軽減されます
21. Javascript で Image オブジェクトを使用して画像をプリロードすると、画像がいつロードされるかを知ることができ、画像のロードに関するプロンプト情報を提供できます。
22.load メソッドは Javascript の onload イベントに対応できます。この例では、画像が読み込まれるイベントをキャプチャするために使用されます


講義 6

このセクションで学ぶ JQuery およびその他の開発知識:
1. ページ内のシミュレートされたウィンドウは HTML の div タグを通じて実現できます。ウィンドウ内のタイトル バーとコンテンツ エリアはそれぞれ div で表現できます。 2. div のグループをウィンドウのように見せる方法はたくさんあります。たとえば、ウィンドウ全体で 1 つの背景色を使用するように設定し、コンテンツ領域で別の背景色を使用することができます。 ウィンドウに特定のパディング値を設定 (またはコンテンツ領域の境界線を設定) して、タイトル バーの後のコンテンツ領域とウィンドウの外側との間のコントラストを実現し、ウィンドウのように見えるようにします。
3. 実際に次の要素と float 要素の間の表示効果に影響する float の効果を正しく理解する したがって、この例では、HTML コード内の img がタイトル バーの最後にある場合、float を実行します。右に押すと画像が暴走します。コンテンツエリア
ドメインの右端。 img が HTML のタイトル バー テキストの前に配置されている場合にのみ、float: right は画像をタイトル バーのちょうど右端に配置します。 4. オーバーフロー属性値が auto の場合、コンテンツ領域が定義された高さまたは幅を超えると、スクロール バーが表示されます。
このセクションで学ぶ JQuery およびその他の開発知識:
5. Position 属性値が絶対値の場合、要素はページ上で絶対的に配置されます (デフォルトでは、ページの左上隅を基準とした相対位置に配置されます)。祖先ノードにposition:relativeの定義がある場合、祖先ノードの左上隅を基準にして配置されます
6. ブラウザの表示領域の幅と高さは、$(window).width() および $(window).height()
を通じて取得できます。 7. ブラウザのスクロール バーの左境界と上境界は、$(window).scrollLeft() および $(window).scrollTop()
を通じて取得できます。 8. ウィンドウを画面の表示領域の中央に配置します。ウィンドウを使用して、ウィンドウを画面の表示領域の中央に配置する必要があります。ウィンドウの幅を減算する必要があります。画面の表示領域の幅を 2 ​​で割って、スクロール バーの幅を加算します。ウィンドウを取得するには、左の境界値が必要です。
希望の左境界値と上境界値も同様に取得されます。
9. プラグインの書き方: $.fn.myplugin = function(){//mycode}、メソッド内のこれは、このメソッドを実行する jquery オブジェクトを表します。確実にするために、メソッドは最後にこれを返す必要があることに注意してください。他の jquery メソッドがカスケード操作できること。
10.instanceof は、変数がオブジェクトであるかどうかなど、変数が特定の js クラスのインスタンスであるかどうかを判断するために使用できます。 11. typeof は、typeof str == “string”
のように、変数のデータ型を決定するために使用できます。 12. height() メソッドと width() メソッドは要素自体の高さと幅を取得し、innerHeight() と innerWidth() はパディングを含む高さと幅を取得し、outerHeight() と externalWidth() はボーダーとパディングを含む高さを取得します。の＃＃＃ 高さと幅、outerHeight(true) とouterWidth(true) は、マージン、ボーダー、パディングを含む高さと幅を取得します。 13.Scrollは、ブラウザのスクロールバーや特定のノードのスクロールに必要な操作を登録するために使用できます。
14.resize を使用すると、ブラウザのサイズが変更されたときに実行する必要がある操作を登録できます。
15. jquery によって提供されるイベント操作は、登録中に増分されます。たとえば、$(window).scroll(function(){}) というコードが 2 つあります。2 番目の部分の関数の内容は、2 番目の部分をカバーしません。 1 つの段落ですが、スクロールすると両方のコードが実行されます
16. animate メソッドは、アニメーションの効果を実現するために、一定の時間内で左と上の値を変更できます。
17. デキュー メソッドは、アニメーション キューの先頭からアニメーション効果を削除し、すぐに実行できます。これにより、先頭のアニメーションを待たずに、キューの後ろにあるアニメーションを実行できるようになります。
18. is メソッドを使用すると、オブジェクトが is メソッド パラメータの jquery セレクターを満たすかどうかを判断できます。19. :visible セレクターを使用して、ページ上の可視要素を取得できます。 20. ブラウザ間の違いにより、document.ready のコードはブラウザの表示領域の幅と高さ、スクロール バーの左と上の値を取得するため、値が確実に取得されるようにする必要があります。これらの値は、このメソッドの完了後に取得されます。
21.$.browser はブラウザの種類を判定するために使用できます。判定方法は $.browser.msie == true です。値には $.browser.opera$.browser.safari $ も使用できます.browser.mozilla
22.$.browser.version は、$.browser.version.indexOf(“8”)
のようにブラウザのバージョン番号を決定できます。