HTML5およびCSS3プログラミング用のjQueryオブジェクトにイベントを追加する方法 - ダミー

ビデオ: Testpassportの70-480試験材料を使えば2日で合格できます 2024

jQueryライブラリはJavaScriptに非常に強力な機能を追加します。これにより、HTML5およびCSS3のプログラマーは、どのjQueryオブジェクトにも簡単にイベントを添付できます。ホバーを見てください。 html。

リスト項目の上にカーソルを移動すると、項目の周りに境界線が表示されます。これは通常のCSSでは達成するのが難しい効果ではありませんが、jQueryではさらに簡単です。

- >

ホバーイベントを追加する方法

コードを見て、

ホバーを確認します。 html $（init）;関数init（）{$（ "li"）です。 hover（border、noBorder）;} // end init関数の境界線（）{$（this）。 css（ "border"、 "1px solid black"）;}関数noBorder（）{$（this）。 gamma

delta

HTMLは単純ではありませんでした。それは単純に順序付けられていないリストです。 JavaScriptはあまり複雑ではありません。これは3つの1行の関数で構成されています。
<！ - 2 - >
ドキュメントが準備できたら、init（）
が呼び出されます。

すべてのリスト項目のjQueryオブジェクトを作成し、それらにイベントを添付します。 hover（）関数は2つのパラメータを受け取ります。

最初は、カーソルがオブジェクトの上を移動したときに呼び出される関数です。

第2は、カーソルがオブジェクトを離れるときに呼び出される関数です。 border（） は、現在の要素の周りに境界線を描画します。
- $（this）識別子は、現在のオブジェクトを指定するために使用されます。
- <！ nobody（）
は border（） 関数と非常によく似ていますが、現在のオブジェクトからボーダーを削除します。この例では、3つの異なる機能が使用された。多くのjQueryプログラマーは、匿名関数（時には
lambda
関数と呼ばれる）を使用して、機能全体を1つの長い行： $（ "li"）で囲むことを好みます。 css（ "border"、 "0px none black"）;} hover（function（）{$（this）} css（ "border"、 "1px solid black"; これはまだ技術的には1行のコードであることに注意してください。すでに作成されている2つの関数を参照する代わりに、関数が必要な場所にすぐに構築できます。各関数定義は、hover（）メソッドのパラメータです。あなたがコンピュータ科学者であれば、これはラムダ関数の完全な例ではないと主張するかもしれませんが、あなたは正しいでしょう。重要なことは、関数型プログラミング（ラムダ関数など）のアイデアがAJAXプログラミングのメインストリームに浸透していることに注目することです。これはエキサイティングな開発です。

オンザフライでクラスを変更する jQueryはもう1つの素晴らしい機能をサポートしています。CSSスタイルを定義し、そのスタイルをエレメントに動的に追加または削除することができます。このコードは、この種の機能がどれくらい簡単に追加できるかを示しています。

クラス。 html。境界になっている{border：1px solid black;} $（init）;関数init（）{$（ "li"）です。クリック（toggleBorder）;} //終了init関数toggleBorder（）{$（this）。 alpha

beta

gamma

delta

このプログラムを作成する方法は次のとおりです。

基本HTMLページから始めます。

興味深いのは、CSSとJavaScriptで起こります。そのため、ページの実際の内容はそれほど重要ではありません。

追加して削除するクラスを作成します。

あなたは要素の周りに境界線を描くだけのCSSクラスを構築できます。もちろん、より洗練されたCSSクラスをあらゆる種類の書式で作成することができます。
init（）メソッドをリンクします。
始めに見てきたように、ほとんどのjQueryアプリケーションでは何らかの初期設定が必要です。最初の関数を呼び出すことができます。 init（）
ユーザーがリスト項目をクリックするたびにtoggleBorder（）関数を呼び出します。

init（）メソッドは単純にイベントハンドラを設定します。リストアイテムがclickイベントを受け取ると（つまり、クリックされると）、toggleBorder（）関数がアクティブになります。 toggleBorder（）関数は、境界線を切り替えます。

jQueryには、要素のクラスを操作するためのいくつかのメソッドがあります。

addClass（）は、要素にクラスを割り当てます。 removeClass（）は、要素からクラス定義を削除します。
toggleClass（）はクラスを切り替えます（現在接続されていない場合は追加、そうでない場合は削除します）。