ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery イベントに関する関連ナレッジポイント

jQuery イベントに関する関連ナレッジポイント

jackloveオリジナル: 2018-05-08 11:39:301391ブラウズ

jQueryは、jsで特に重要なイベント処理用に特別に設計されているため、この記事ではjQueryイベントについて学びます。

jQueryイベント関数

jQueryイベント処理メソッドは、jQueryの中核となる関数です。

イベントハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。ある出来事によって「引き起こされた」（または「触発された」）という用語がよく使われます。

通常は、93f0f5c25f18dab9d176bd4f6de5d30e セクションのイベント処理メソッドに jQuery コードを記述します:

例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){  $("button").click(function(){
    $("p").hide();
  });});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

自分で試してみてください

上記の例では、ボタンのクリックイベントが発生したときに呼び出されます。トリガーされた関数:

$("button").click(function() {..some code... } )

このメソッドは、すべての e388a4556c0f65e1904146cc1a846bee 要素を非表示にします:

$("p")。 Hide ();

関数を別のファイルに配置する

Web サイトに多くのページが含まれており、jQuery 関数の保守を容易にしたい場合は、jQuery 関数を別の .js ファイルに配置します。

チュートリアルで jQuery を説明するときは、関数を 93f0f5c25f18dab9d176bd4f6de5d30e セクションに直接追加します。ただし、次のように、それらを別のファイルに置く方がよいでしょう (src 属性を介してファイルを参照します):

Example

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名の競合

jQuery は、jQuery への入門方法として $ 記号を使用します。。

他の JavaScript ライブラリの一部の関数 (Prototype など) も $ 記号を使用します。

jQuery は、この問題を解決するために noConflict() と呼ばれるメソッドを使用します。

var jq=jQuery.noConflict() は、$ 記号の代わりに独自の名前 (jq など) を使用するのに役立ちます。

結論

jQuery は HTML イベントを処理するように特別に設計されているため、次の原則に従うと、コードはより適切になり、保守が容易になります:

すべての jQuery コードをイベントハンドラーに配置する

場所すべてのイベント処理関数は、ドキュメント準備完了イベントハンドラー

jQuery コードを別の .js ファイルに配置します

名前の競合がある場合は、jQuery ライブラリの名前を変更します

この記事では、jQuery イベントについての適切な理解を提供します。その他の学習資料については、注意してください。 php 中国語 Web サイトにアクセスしてご覧ください。

jQuery イベントに関する関連ナレッジポイント

関連記事