4. HTML を動かす
jQuery を使用して、いくつかの基本的なアニメーションと効果を実行できます。アニメーション効果の中核となるのは、指定された CSS スタイルをいつでも変更できる関数 animate() です。たとえば、アニメーションの高さ、幅、透明度、位置を変更することもできます。速度を変更する場合はミリ秒を使用することも、低速、標準、または高速の所定の速度値を使用することもできます。
ここでは、要素の幅と高さを同時に変更するアニメーションの例を示します。初期値はなく、最終値のみです。同時に、コールバック関数
$('#grow').animate({ height: 500)
も追加しました。, width: 500 }, "slow", function() {alert('要素の成長が完了しました!');});これらの jQuery の組み込み関数を使用すると、非常に簡単にアニメーション効果を作成できます。 show() 関数と hide() 関数を使用して要素を表示または非表示にできます。また、fadeIn() 関数と fadeOut() 関数、または slideDown() 関数と slideUp() 関数を使用して、要素を即座に実行するか、指定した速度で実行するように設定できます。必要な効果に応じて、要素を表示または非表示にします。以下は、ナビゲーション バーのスライド ダウン効果を表示する簡単な例です。
$('#nav').slideDown('slow');スクリプトとイベント処理 jQuery はおそらく DOM の操作に最適であり、イベント処理が実行されます。DOM の走査と操作は非常に簡単で、イベントのバインド、削除、呼び出しも非常に自然で使いやすいです。実際、これらのコードを記述すると、jQuery によって DOM のさまざまな操作が簡素化されます。append() 関数を使用して要素を作成し、他の要素にリンクしたり、clone() を使用して要素をコピーしたりできます。 html() 関数を使用してコンテンツを設定すること、empty() 関数を使用してコンテンツを削除すること、() 関数を使用して要素とコンテンツを削除すること、さらには、wrap() 関数を使用してこの要素を別の要素でラップすることもできます。 DOM をトラバースすることで jQuery オブジェクト自体の内容を変更できる関数。 next() および prev() を使用して要素の兄弟() を取得することもできます。 find() は、これらの関数の中でおそらく最も強力です。これを使用すると、jQuery オブジェクトとその子孫ノード内を検索できます。これらの関数は、end() 関数と組み合わせるとさらに強力になります。 end() 関数は元に戻すように動作し、jQuery オブジェクトを find() またはparents() を呼び出した時点、または上記のメソッド リンクを使用する場合は非常に複雑な関数を使用する前のその他の状態に戻します。簡単なコードで実装できます。リスト 7 に例を示します。ログイン フォームを見つけて、その要素に対していくつかの操作を実行します。$('form#login')// 簡単に DOM を走査して操作します。 'optional' を使用したフォーム内のラベル class.find( 'label.optional').hide().end()// form.find('input:password') 内のパスワード フィールドに赤い境界線を追加します.css('border', '1px 単色赤'). end()// 送信ハンドラーを form.submit(function(){returnconfirm('送信してもよろしいですか?');}) に追加します。 ; 信じられないかもしれませんが、この例には、途中にスペースが入った 1 つのコード行しかありません。次に、その中にあるオプションのラベルを見つけて非表示にし、end( を呼び出しました)。 ) パスワード入力ボックスを見つけて枠線を赤に変更し、再度 end() を呼び出してフォームに戻ります。興味深いのは、非常に簡潔なコードに加えて、jQuery がすべての操作を独自に最適化し、すべてが適切に接続されている場合に要素を 2 回探す必要がないことです。一般的なイベントの処理も非常に簡単です。関数 click()、submit()、または Mouseover() を呼び出し、それをイベント リスナーに渡します。 さらに、bind('eventname', function(){}) を使用して次のことを行うこともできます。イベント処理関数を指定します。 unbind('eventname') を使用してイベントをアンバインドすることも、 unbind() を使用してすべてのイベントをアンバインドすることもできます。この一連の関数とその使用方法の詳細については、jQuery のアプリケーション プログラミングを参照してください。 6. jQuery セレクターの機能を明らかにする
通常、要素を選択するには #myid; などの ID を使用するか、div.myclass などのクラス名を使用します。単一のセレクターを使用して要素の任意の組み合わせを検索できるようにするセレクター構文
。CSS3 と XPath について詳しく知るほど、jQuery セレクターの詳細を参照できます。 CSS3 と XPath を含む、この記事の最後にあるリソース リンクを参照してください。CSS3
にはすべての言語でサポートされている構文が含まれているため、あまり目にすることはありませんが、jQuery で要素を選択するために使用することはできます。 jQuery には独自のカスタマイズされたセレクター解析エンジンがあるため、たとえば、テーブル内の各空の列にダッシュを追加するには、:empty 擬似演算子を使用できます:
$('td:empty').html('- '); 特定のクラス名を含まないすべての要素を検索するにはどうすればよいですか? CSS3 には、:not 疑似演算子を使用する特定の構文があります。次のコードは、必要なクラス名を含まないすべてのテキスト入力ボックス要素を非表示にします。 class name. $('input:not(.required)').hide( ); CSS と同じように、カンマを使用して複数のセレクターを接続することもできます。次のコードでは、ページ上のさまざまな種類のリスト要素を非表示にします。 $('ul, ol, dl' ).hide();XPath はドキュメント内の要素を検索するための強力なツールであり、CSS では検索できない多くの要素を検索できます。たとえば、境界線の場合、次のように追加できます。 $("input:checkbox/..").css('border', '1px Solid #777');たとえば、CSS や XPath にはありません。テーブルの可読性を高めるために、奇数行と偶数行に異なるクラス名を使用するように設定できます。これを jQuery で行うのは簡単です。 :odd セレクターのおかげで、ストライプ クラスを使用してテーブル内の奇数行の背景色を変更するコードを示します: $('table.striped > tr:odd').css('background', ' #999999'); 見てください、jQuery の強力なセレクターは、影響を与えたい要素に関係なく、それがどれほど明確であっても、ぼやけていても、シンプルな jQuery セレクター 7 を使用してそれをターゲットにする方法を常に見つけることができます。プラグインを使用して jQuery を拡張する 他のソフトウェアとは異なり、jQuery プラグインを作成することは、複雑な API がたくさんあるため決して難しいことではありません。実際、jQuery 用のプラグインを作成するのは非常に簡単なので、試してみることもできます。コードをより簡潔にするために、後でプラグインを作成します。これは、これから作成するプラグインの最も基本的な部分です。 $.fn.donothing = function(){return this;}; 非常に単純ですが、まず、各 jQuery オブジェクトに関数を追加する必要があります。次に、関数はメソッド チェーンを壊さないように this (jQuery オブジェクト) を返す必要があります。プラグインの背景色を変更するには、css('background') を使用する代わりに、上記のコードを簡単に拡張できます。 $.fn.background = function(bg) {return this.css('background', bg);}; css () 関数はすでに jQuey オブジェクトそのものであるため、直接返すことができることに注意してください。そのため、メソッド チェーンは、jQuery プラグインを使用することをお勧めします。たとえば、 each( ) 関数を使用して同じことを何度も処理している場合は、プラグインの使用を検討してください [注釈: jQuery プラグイン以降]。開発は非常に簡単で、jQuery にはテーブル、角丸、スライドショー、日付選択など、思いつく限りのあらゆるアプリケーション用のプラグインが用意されています。プラグインの完全なリストは、この記事の最後にあるリソース リストにあります。最も複雑で広く使用されているプラグインは、並べ替え、ドラッグ効果、さまざまな複雑な特殊効果などを処理するアニメーション プラグインです。興味深い複雑なユーザー インターフェイスの効果。インターフェイスは、Scriptaculous のプロトタイプと同じです。同様に人気があり便利なプラグインは、ajax を使用してバックグラウンドでフォームを送信することを可能にします。この状況: フォーム送信イベントをハイジャックする必要がある場合、さまざまなテキスト出力フィールドをすべて見つけて、それらを使用して ajax 呼び出しを構築します。 その後、jQuery についていくつかの表面的なことについて説明しました。学習する新しい機能や新しいメソッドは非常に自然で論理的であるため、使用するのが興味深いです。一度 jQuery を使用すると、何かを学習するたびにコードが簡素化されることがわかります。
jQuery を学んだ後、
Javascript プログラミングの楽しさを発見しました。退屈なことはすべてうまく処理できるので、jQuery を使用した後は、最後に for を使用したことをほとんど思い出せません。 jQuery のおかげで、JavaScript プログラミングに対する私の見方が完全に変わりました。