JQuery実践チュートリアルのソースコード無料ダウンロード

ダウンロードアドレス: http://www.php.cn/xiazai/code/1765

レクチャー 1:

このセクションで学ぶ JQuery とその他の開発知識:

1 はページコンテンツを担当し、CSS はページのスタイルを担当し、ページの動作を担当するのは Javascript です

2. レンダリングおよび表示メソッドをブラウザに通知するために HTML に DOCTYPE が必要です

3。サーバーは後で。

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 つの URLDecode で解決できます。中国語の文字化け問題。

関連トピックの推奨事項: 「

jquery 実践ビデオ

」 講義 2

このセクションで学習する JQuery とその他の開発知識:

1.table には thead と tbody を含めることができます

2 ヘッダーの内容を含めることができます。

3.table{} この書き込み方法はタグ セレクターと呼ばれ、ページ全体のすべてのテーブルに影響を与えることができます。

4.table td{} は、テーブルに含まれるすべての td を表します。

5. border-collapse: Collapse を使用して、テーブル内のセルの境界線を結合できます。

6. th に背景色がある場合、th が属する tr に定義されている背景色は無効になります。

7.$(function(){}) は、$(document).ready(function(){}) を記述する簡略化された方法です

8.$("tbody tr") は、次のすべての tr ノードを返すことができますtbody

9.$("tbody tr:even") は、tbody

10.css メソッドで偶数のインデックス値を持つすべての tr ノードを返すことができ、ノードの css 属性を設定または取得するために使用できます。パラメータ名は CSS 属性名です。

11. JQuery オブジェクトのコンテンツには、セレクターに対応する DOM ノードが含まれており、配列形式で保存されます。

12. JQuery オブジェクトに含まれる特定の DOM ノードを取得できます。 this in 関数はこの関数の実行を表します

14. $() メソッドのパラメータが DOM オブジェクトである場合、このメソッドは DOM オブジェクトを JQuery オブジェクトに変換することに相当します。

15. Children メソッドは、特定のノードの子ノードを取得でき、パラメータを指定して子ノードの内容を制限できます。

16. セレクターによって返された JQuery オブジェクトに複数の DOM ノードが含まれている場合、クリックなどのイベントがこのオブジェクトに登録されると、すべての DOM ノードがイベントに使用されます

17.html メソッドは、ノード Content

18.val メソッドは、ノード

19 の値を取得または設定できます。 $() メソッドのパラメータが HTML テキストの正しい部分である場合、DOM ノードを作成して、それをパッケージ化できます。 JQuery オブジェクト

20.JQuery ほとんどのメソッドは、このメソッドを実行する JQuery オブジェクトを返すため、チェーン メソッドを使用して JQuery のコードを作成できます。

21. width メソッドは、ノードの幅を設定または取得できます。

22. appendTo メソッドは、別のノードのすべての子ノードの後ろにノードを追加できます。

23. イベント配信をブロックすることができます。現在のノード return false

24.trigger メソッドは、特定の JavaScript イベントの発生をトリガーできます。

25. JQuery のイベント メソッドのパラメータ関数は、ブラウザのイベント パラメータを定義して、使用可能なイベント オブジェクトを渡すことができます。キーボードのキーのキー値を取得します

27.13 は Enter キーを表し、27 は ESC キーを表します

講義 3

このセクションで学習したその他の開発知識: ページ上のメニュー項目を渡すことができます。ネストされた 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. 背景画像が要素の実際のサイズより小さい場合、背景画像が領域全体を埋めるまで自動的に繰り返されます。

7. はい、bakcground-repeat を使用して、背景画像の繰り返し塗りつぶし方法を制御します。

8. 要素に背景画像と背景色の両方が定義されている場合、背景画像がある場合には背景色は表示されません。

9. text-decoration 属性値が none の場合は、キャンセルできます。テキストの下線

10.Background-position は、背景画像の位置を制御できます。属性値は、水平および垂直の位置を制御する数値または中央、左、上の値のいずれかです。この属性には 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

の子ノードの中から a ノードのみを選択することです。

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 であり、タグの下のコンテンツは p によって管理されます。

2. フローティング要素 (float) に続く要素は、フローティング要素を囲みます。これを望まない場合は、現在のラベルとコンテンツを実装します。領域の統合は、現在のラベルに同じ背景色と同じ色の境界線を使用することで実現できます。

4. JQueryのmouseoverメソッドとmouseoutメソッドは、標準JavaScriptのonmouseoverイベントとonmouseoutイベントに対応しており、マウスの出入りのイベントを処理できます。

5. 複数の要素を含むJQueryオブジェクトに対して各メソッドを実行する 各メソッドに登録できる関数の内容は各要素ごとに実行されます。同時に、この

関数は、この要素のインデックス値を示すパラメータを受け取ることもできます。 JQuery の多くのメソッドも each

6 を使用します。eq メソッドは、インデックス値に基づいて JQuery オブジェクトに含まれる複数の要素のうち 1 つだけを取得できますが、その要素に対応する新しい JQuery オブジェクトを返します。

7. $("p:eq(1)") などのセレクターで eq を使用します

8. addClass メソッドとremoveClass メソッドは、要素のクラス定義を追加および削除するために使用されます。

9. Javascript の setTimeout メソッドは特定のコードの実行を遅延させることができ、対応する clearTimeout は設定された遅延操作をクリアできます。

10. AJAX アプリケーションを作成する場合は、今すぐ FireFox でデバッグしてから、他のブラウザでチェックして、考えられる互換性の問題を修正することを検討できます。

11. カーソル属性は、要素のマウス スタイルを制御できます。これは、一般的なリンク マウス スタイルです。

12.値は相対的であり、元の位置を相対的に配置することを意味します。

13 の値を設定することで、元の位置に対する要素の移動を制御できます。値が大きいほど、ページに近くなります。以前は、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属性は、画像が読み込まれていない場合、または画像が存在しない場合に、この属性のテキスト情報が表示されます。ドロップダウン ボックス、および各ドロップダウン ボックスの各項目はオプションです。オプションの開始タグと終了タグの内容は、取得および送信に使用されます。サーバーは JQuery の val メソッドを使用します。

selected の属性値が選択されている場合、現在のオプションが選択されていることを意味すると定義されています

3. p 要素を中央に表示する方法: p の幅を設定し、次に の値を設定します。 margin-left と margin-right は両方とも自動です。省略方法は margin: 0 auto;

4. HTML の p タグは 1 行以上の内容を表し、次の内容が別の行に表示されます。 p の中国語テキストを作成するには、画像を中央に配置するには、値が center の text-align 属性を使用します。 pタグにはデフォルトでmargin-topとmargin-bottomの値が設定されていますが、visibility属性値がhiddenの場合は要素が非表示になりますが、表示がnoneの場合はcss

6でクリアできます。表示されないだけで、まだページのスペースが占有されています

7. 複数のセレクターが同じ属性値を持つ場合、それらはカンマで区切って定義できます

8。標準 Javascript の onchange イベントであり、ドロップダウン ボックスの内容が変更されたときに処理できます

9. 親メソッドはノードの親ノードを取得できます

10。 11. $.post メソッドは、サーバーとの非同期ポスト リクエストを開始できます。最初のパラメータはリクエストのサーバー側アドレス、2 番目のパラメータはサーバに送信されるデータ、パラメータは名前と値のペアの形式で表現された Javascript オブジェクト、3 番目のパラメータはコールバック メソッドです。 4 番目のパラメーター このパラメーターはサーバーから返されたデータ型を示し、JQuery はこのパラメーターに基づいてデータ型を変換するのに役立ちます。 getメソッドの第2パラメータのみが異なり、他のパラメータの使い方は同じです

12. Javascriptにおける単純なオブジェクト定義メソッドは、{key1:value1, key2:value2}のデータ形式です

13。 JSON は実際には Javascript の 1 つで、オブジェクトまたはデータ定義のテキスト形式のコンテンツ ({key1: value1, key2: [1,2,3]} または [1,2,{key2: value2}])

14 です。 $(“ ”) メソッドで直接ドロップダウン ボックスにオプションを作成し、appendTo

15.attr メソッドなどのメソッドを使用してオプションをドロップダウン ボックスに追加できます。特定のノードの属性値を設定または取得します

16.ajaxStart は、JQuery によって発行された各 ajax リクエストが実行された後、JQuery キュー内のすべての ajax リクエストが完了した後、ajaxStop が実行される前に実行されます。 JQuery.

17. fadeOut および fadeIn は、slideUp および slideDown メソッドと同様のフェードアウトおよびフェードイン効果を実現します。

18. animate メソッドは、特定の CSS 属性を制御して、アニメーションの効果を実現できます。

19. これは、要素の透明度を変更します。 IE のフィルターを使用して実現されます。100 は完全に表示されることを意味し、0 は完全に透明であることを意味します。非 IE ブラウザーは不透明属性を使用します。1 は完全に表示されることを意味し、0 は透明であることを意味します。 JQuery は、アニメーション メソッド

でブラウザーの違いをブロックし、不透明度を直接使用してフェードインおよびフェードアウト効果を実現できます。

20.dataメソッドを使用してデータをキャッシュできます。キャッシュにより、システムの動作効率が向上し、サーバー側の負荷が軽減されます

21. Javascript で Image オブジェクトを使用して画像をプリロードすると、画像がいつロードされたかを知ることができ、何らかのプロンプトが表示されます。画像読み込みに関する情報。

22. この例では、load メソッドは、画像がロードされるときにイベントをキャプチャするために使用されます。

このセクションで学習したその他の開発知識。

1. ページ上のシミュレーション ウィンドウ内のタイトルバーとコンテンツエリアはそれぞれ p で表現できます

2. p のグループを作成する方法はたくさんあります。たとえば、ウィンドウ全体で 1 つの背景色を使用し、コンテンツ領域で別の背景色を使用するように設定したり、ウィンドウに特定のパディング値を設定したり (または、ウィンドウの境界線を設定したり) することができます。コンテンツ領域) を使用して、コンテンツ領域とタイトル バーの後のウィンドウの外側との間のコントラストを実現し、ウィンドウのように見えます。

3. float の効果を正しく理解すると、実際には次の要素と float 要素の間の表示効果に影響します。したがって、この例では、html コード内の img がタイトル バーの最後にある場合は、float を使用します。 : right を実行すると、画像が実行されます。 コンテンツ領域

ドメインの右端に到達しました。 HTMLでimgがタイトルバーのテキストの前に配置されている場合のみ、float:rightで画像がタイトルバーの右端に配置されます

4 overflow属性値が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 はデータ型を判断するために使用できます。 typeof str == "string"

12 のような変数の値を取得します。 height() メソッドと width() メソッドは要素自体の高さと幅を取得し、innerHeight() と innerWidth() はパディングを含む高さと幅を取得します。 、outerHeight()とouterWidth() 取得した

のボーダーとパディングを含む高さと幅、outerHeight(true)とouterWidth(true)はマージン、ボーダー、パディングを含んだ高さと幅です

13.scrollは次の目的で使用できます。ブラウザまたは特定のノードを登録する スクロールバーをスクロールするために必要な操作。

14.resize を使用して、ブラウザのサイズが変更されたときに実行する必要がある操作を登録できます。

15. jquery によって提供されるイベント操作は、登録中に増分されます。たとえば、両方のコードが $(window).scroll(function(){}) である場合、2 番目の部分の関数の内容は変更されません。最初の段落では上書きされますが、スクロール時には両方のコードが実行されます

16. animate メソッドは、アニメーションの効果を実現するために、一定の時間内に左と上の値を変更できます。

17. dequeue メソッドは、アニメーション キューの先頭からアニメーション効果を削除し、すぐに実行できます。これにより、先頭のアニメーションを待たずに、キューの後ろにあるアニメーションを実行できるようになります。

18. is メソッドは、オブジェクトが is メソッドのパラメーターの jquery セレクターを満たすかどうかを判断するために使用できます

19. :visible セレクターは、ページ内の表示要素を取得するために使用できます

20。 document.ready のコードはブラウザの表示領域の幅と高さ、スクロール バーの左と上の値を取得しますが、これらは必ずしも正しいとは限らないため、この後にこれらの値が取得されることを確認する必要があります。メソッドが完成しました。

21.$.browser はブラウザの種類を決定するために使用できます。決定方法には $.browser.opera$.browser.safari も使用できます。 $.browser.mozilla

22.$.browser.version は、$.browser.version.indexOf(“8”)

などのブラウザのバージョン番号を決定できます。

以上がJQuery実践チュートリアルのソースコード無料ダウンロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。