選択イベントを使用してjQueryページをロードするときに使用するもの

jQuery は、フロントエンド開発で非常に人気のある JavaScript ライブラリであり、HTML ドキュメントと CSS スタイルを迅速かつ簡単に操作できます。 jQuery では、セレクターは非常に重要でよく使用される機能であり、これを使用してページ上の要素を選択し、それらを操作できます。

jQuery は、タグ名、クラス名、ID 値、属性値などに基づいて要素を選択できるさまざまなセレクターを提供します。ページが読み込まれるとき、通常、特定の要素の表示または非表示、イベントのバインドなど、特定の要素に対して特別な処理が実行されます。

この場合、jQuery のセレクターとイベント バインディングを使用してこれを実現できます。ここでは、一般的に使用されるイベントとセレクターをいくつか示します。

1. ページ読み込み完了イベント

jQuery では、ready() メソッドを使用してページ読み込み完了イベントをバインドでき、DOM が読み込まれた直後に実行されます。サンプル コードは次のとおりです。

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

さらに、ready() が一般的に使用されるため、jQuery には短縮形式も用意されています。

$(function() {
  // 页面加载完成后执行的代码
});

これら 2 つの形式は完全に同等であり、次の形式でロードできます。ページを終了したら、何かを行います。

2. セレクター

1. 基本セレクター

基本セレクターは、タグ名、クラス名、ID 値に基づくセレクターの最も単純な形式です。要素の要素を選択します。

タグ名に基づいて要素を選択:

$('p') // 选择所有<p>元素</p>

クラス名に基づいて要素を選択:

$('.my-class') // 选择所有class属性值为my-class的元素

ID 値に基づいて要素を選択:

$('#my-id') // 选择ID值为my-id的元素

2。属性セレクター

属性セレクターは、属性値に基づいて要素を選択できます。最も一般的に使用されるものは [class^="xxx"] と [class$="xxx"] です。

属性名と属性値に基づいて要素を選択します:

$('input[type="text"]') // 选择所有type属性值为text的input元素

属性値の先頭に基づいて要素を選択します:

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

属性値の末尾に基づいて要素を選択します属性値:

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3. 階層セレクター

階層セレクターは、要素の子要素、親要素、兄弟要素などを選択できます。

要素の子要素を選択します:

$('ul li') // 选择所有ul元素下的li元素

要素の親要素を選択します:

$('li').parent() // 选择所有li元素的父元素

要素の兄弟要素を選択します:

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4. フォーム セレクター

フォーム セレクターでは、テキスト ボックス、チェック ボックス、ラジオ ボタン、ドロップダウン ボックスなどのフォーム要素を選択できます。

すべてのテキスト ボックス要素を選択:

$('input[type="text"]') // 选择所有type属性值为text的input元素

すべてのチェック ボックス要素を選択:

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

すべてのラジオ ボタン要素を選択:

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

すべてのドロップダウンを選択ボックス要素:

$('select') // 选择所有select元素

3. イベント バインディング

1. クリック イベント

クリック イベントは、最も一般的に使用されるイベントの 1 つであり、click() を通じてバインドできます。方法 確かに。サンプル コードは次のとおりです:

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2. ダブルクリック イベント

ダブルクリック イベントは、dblclick を通じてバインドできる要素を素早く 2 回クリックするイベントを指します。 （） 方法。サンプル コードは次のとおりです:

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3. キーボード イベント

キーボード イベントとは、ページ上のキーボード キーを押すか離すイベントを指し、keypress()、keydown を通じて実行できます。 ()、keyup() の 3 つのメソッドをバインドします。

4. マウス イベント

マウス イベントとは、ページ上でのマウスの移動、クリック、ダブルクリック、プレス、リリースなどのイベントを指します。これは、mousemove( を介して渡すことができます) )、mousedown()、mouseup()、mouseenter()、mouseleave()、hover()、およびその他のバインドするメソッド。

5. ページ スクロール イベント

Scroll イベントは、ユーザーがページをスクロールしたときにトリガーされるイベントを指し、scroll() メソッドを通じてバインドできます。

上記は、一般的に使用されるイベントとセレクターの一部です。これらは、ページ上の要素をすばやく見つけてイベント バインディングを実行するのに役立ちます。もちろん、jQuery は他にも多くの関数やメソッドを提供しており、興味のある読者は自分で学習して探索することができます。

以上が選択イベントを使用してjQueryページをロードするときに使用するものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。