jQuery 入門チュートリアル: セレクターとイベントの使用

jQuery 入門チュートリアル - セレクターとイベントの使用
jQuery には、HTML 要素を選択する 2 つの方法があります:

1 つ目は、CSS セレクターと Xpath セレクターを組み合わせて、jQuery のコンストラクターに送信する文字列を形成する方法です ( $( など) "div > ul a"));

2 番目の方法は、jQuery オブジェクトのいくつかのメソッドを使用することです。これら 2 つの方法を組み合わせて使用​​することもできます。

これらのセレクターをテストするには、starterkit.html の最初の順序付きリストを選択して変更してみましょう。

まず、「順序リスト」と呼ばれる ID を持つリスト自体を選択する必要があります。通常の JavaScript の記述は次のとおりです。 document.GetelementByid ("OrderEdlist") jQuery では、 $ (docume). READY () ");
}); ここで、スターターキットの CSS スタイル red が、順序付きリストにアタッチされます (翻訳者の Keel のメモ:テスト パッケージの css ディレクトリにある core.css を参照してください。これは赤色のスタイルを定義します)。したがって、starterkit.html を更新すると、最初の順序付きリストの背景色が赤に変わり、2 番目の順序付きリストは変化しないことがわかります。
次に、リストの子ノードにいくつかの新しいスタイルを追加しましょう。 $(document).ready(function() {
$("#ownedlist > li").addClass("blue");
}); このように、順序リスト内のすべての li はスタイル "blue" になります。添付。

ここで、もう少し複雑なことをしてみましょう。マウスが li オブジェクトの上に置かれたときとそこから離れたときにスタイルを切り替えます。ただし、これはリストの最後の要素にのみ有効です。 $(document).ready(function() {
$(document).removeClass("green ");
});
}); 同様の CSS および XPath の例も多数あります。その他の例リストはここにあります。 (翻訳者 Keel の注: 始めるにはこの記事を読んでください。栽培は個人によって異なります。開始後にさらに詳しく知りたい場合は、遅かれ早かれこの段落のリンクを読む必要があります!)

すべての onXXX イベントは有効です。 onclick、onchange、onsubmit などはすべて jQuery と同等の表現メソッドを持っています (翻訳者の Keel の注: jQuery は onXXX を好まないため、これらは XXX に変更され、on は削除されました)。他のイベント (ready や hover など) も、対応するメソッドを提供します。

イベントの完全なリストは、Visual jQuery の [イベント] 列にあります。

これらのセレクターとイベントを使用してすでに多くのことができますが、さらに優れたものがあります。 $(document).ready(function() {
+ " BAM! " + i );
});
});


find() を使用すると、選択した要素で条件付き検索を実行できるため、 $( "#ownedlist).find("li") は $("#ownedlist li") と似ています。

each() はすべての li を反復処理し、これに基づいてさらに多くの処理を行うことができます。addClass() などのほとんどのメソッドは、独自の each() を使用できます。

この例では、html() を使用して各 li の HTML テキストを取得し、テキストを追加して、それを li の HTML テキストとして設定します。この例からわかるように、 .html() メソッドはオブジェクトの HTML コードを取得し、 .html('xxx') は 'xxx' をオブジェクトの HTML コードとして設定します。

もう 1 つの頻繁に発生するタスクは、AJAX を使用して DOM 要素を正常に送信した後のリセットを想像してください。 $(document).ready(function() {
/ / これを使用して単一のフォームをリセットする
Keel の注: ここでの作成者は、フォームの ID を form として記述しています。これは非常に悪い書き方です。この ID は変更できます。 form1 または testForm に入力し、$ ("#form1") または $("#testForm") を使用してそれを表し、テストします。)

このコードは、ID が「form」であるすべての要素を選択し、リセットを呼び出します。 （最初のものについて。）。複数のフォームがある場合は、これを行うことができます：$（document）.ready（function（）{


カスタム.jsでこれらのコードを自分で書き、starterkit.htmlの効果をテストして感触を得る必要があります。必要に応じて、starterkit.html の HTML コードを確認してください)

このように、[リセット] リンクをクリックした後、ドキュメント内のすべてのフォーム要素を選択して変更し、reset() が 1 回実行されます。

直面しなければならないもう 1 つの問題は、特定の要素を選択したくないことです。 jQuery は、この問題を解決するために filter() メソッドと not() メソッドを提供します。 filter() はフィルター式を使用してフィルター式に一致しない選択された項目を減らします。not() はフィルター式に一致するすべての選択された項目をキャンセルするために使用されます。順序なしリストを考えて、次の要素をすべて選択したいとします。 li 要素はありません。 $(document).ready(function() {
$("li").not("[ul]").css("border", "1px plain black");
});このコードはすべての li を選択します要素を削除し、ul サブ要素のない li 要素を削除します。ブラウザを更新すると、ul サブ要素の li 要素を除き、すべての li 要素に境界線が表示されます。

(翻訳者 Keel の注: 非常に便利な css() メソッドに注目して、実際にテストして効果を観察することをもう一度思い出してください。たとえば、CSS スタイルを変更するのはどうですか? 別の CSS スタイルを追加するのはどうですか? このように: $(" li").not("[ul]").css("border", "1px ソリッド ブラック").css("color","re​​d");)

の [式] 構文上記のコードは XPath からのもので、要素と属性のフィルターとして使用できます。たとえば、次のように name 属性を持つすべてのリンクを選択できます。 a[ @name]").background("#eee");
});このコードは、name 属性を持つすべてのリンクに背景色を追加します。 (翻訳者の Keel の注: この色は微妙すぎるため、$("a[@name]").background("red"); と書くことをお勧めします。)

より一般的な状況は、名前でリンクを選択することです。 、特徴的な href 属性を持つリンクを選択する必要がある場合があります。 href の理解はブラウザによって異なる可能性があるため、完全一致 ("=") の代わりに部分一致 ("*=") を使用します: $(document )。 ready（function（）{
）;
}）;今まで、セレクターは子要素またはフィルター要素を選択するために使用されています。別の状況では、FAQ ページなど、最初に回答が非表示になり、質問をクリックすると回答が表示されます。 $(document).ready( function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var 答え = $(this). next（）;});ここでは、コードの量を減らし、より直感的で理解しやすくするために、いくつかのチェーン式を使用します。 '#faq' が 1 回だけ選択されるのと同様に、end() メソッドを使用すると、最初の find() メソッドが終了 (取り消し) されるため、後で $( '#faq') を書かなくても find('dt') を続けることができます。 .find('dt')。

click イベントでは、$(this).next() を使用して dt のすぐ下にある dd 要素を見つけます。これにより、クリックされた質問の下の回答をすばやく選択できます。

(翻訳者の Keel の注: この例は本当に素晴らしいです。FAQ の回答は縮小することができます! next() を使用するというアイデアからこれらの効果を実現するまで、理解する必要がある場所がたくさんあります。注意してください。 if (answer.is(':visible')) の使用法については、answer.slideUp() に注意してください。わからない場合は、最初に説明した 2 つの必読 API ドキュメントを確認してください)

同じレベルの要素を選択するのに加えて、親レベルの要素を選択することもできます。ユーザーがマウスを動かしたときに、記事の特定の段落にあるリンクの親要素を強調表示したい場合があります。 $(document).ready(function() {
("a").hover(function( ) {
テスト結果からわかるように、リンクを記事の特定のセクションに移動すると、そのセクションではスタイルを強調表示し、削除すると元の状態に戻ります。

(翻訳者 Keel の注: ハイライトは core.css で定義されているスタイルです。変更することもできます。ここに 2 番目の function() があることに注意してください。これは hover メソッドの特徴です。API ドキュメントで hover を確認してください。例)
続行する前にこのステップを見てみましょう: jQuery を使用すると、コードが短くなり、理解しやすくなり、保守しやすくなります。 $(document).ready(callback) の省略形は次のとおりです。 (function( ;alert("Hello world!");
});
});これらの基本的な知識を手に入れたので、AJAX から始めて、他の側面をさらに調査することができます。

その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。