Jquery詳細に精通するまで簡単に入門-(4)Jqueryのイベント
jQueryイベント
jQueryはイベント処理のために特別に設計されています.
jQueryイベント関数
jQueryイベントの処理方法は、jQueryのコア関数です.
イベントハンドラとは、HTMLでイベントが発生したときに呼び出されるメソッドです.用語は、イベント「トリガ」(または「励起」)によってよく使用される.
通常、jQueryコードはセクションのイベント処理方法に格納されます.
≪インスタンス｜Instance｜emdw≫
みずからやってみる
上記の例では、ボタンのクリックイベントがトリガーされると、関数が呼び出されます.
このメソッドは、すべての
個別ファイルの関数
Webサイトに多くのページが含まれており、jQuery関数を簡単に維持したい場合は、jQuery関数を独立したものにしてください.jsファイルにあります.
チュートリアルでjQueryを説明すると、セクションに関数が直接追加されます.ただし、これらを別のファイルに配置すると、次のようになります(srcプロパティでファイルを参照します):
≪インスタンス｜Instance｜emdw≫
jQuery名の競合
jQueryは、jQueryのプロフィールとして$記号を使用します.
Prototypeなどの他のJavaScriptライブラリの関数でも$記号が使用されています.
jQueryはnoConflict()という方法を用いてこの問題を解決する.
var jq=jQuery.noConflict()は、$記号の代わりに自分の名前(例えばjq)を使用するのに役立ちます.
みずからやってみる
結論
jQueryはHTMLイベントを処理するために特別に設計されているため、次の原則に従うと、コードがより適切でメンテナンスが容易になります.すべてのjQueryコードをイベント処理関数に配置する すべてのイベント処理関数をドキュメントレディイベントプロセッサに配置する jQueryコードを個別に配置する.jsファイル 名前の競合がある場合は、jQueryライブラリ の名前を変更します.
jQueryイベント
次に、jQueryのイベントメソッドの例を示します.
Event関数バインド関数＃Eventカンスウバインドカンスウ＃
$(document).ready(function)
関数をドキュメントにバインドする準備完了イベント(ドキュメントのロードが完了した場合)
$(selector).click(function)
選択した要素に関数をバインドするクリックイベントをトリガーまたはバインドします.
$(selector).dblclick(function)
選択した要素に関数をバインドするダブルクリックイベントをトリガーまたはバインドします.
$(selector).focus(function)
選択した要素に関数をバインドするフォーカスイベントをトリガーまたはバインドします.
$(selector).mouseover(function)
選択した要素に関数をバインドするマウスのサスペンションイベントをトリガーまたはバインドします.
jQueryはイベント処理のために特別に設計されています.
jQueryイベント関数
jQueryイベントの処理方法は、jQueryのコア関数です.
イベントハンドラとは、HTMLでイベントが発生したときに呼び出されるメソッドです.用語は、イベント「トリガ」(または「励起」)によってよく使用される.
通常、jQueryコードはセクションのイベント処理方法に格納されます.
≪インスタンス｜Instance｜emdw≫
<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... } )このメソッドは、すべての
要素を非表示にします.
$("p").hide();個別ファイルの関数
Webサイトに多くのページが含まれており、jQuery関数を簡単に維持したい場合は、jQuery関数を独立したものにしてください.jsファイルにあります.
チュートリアルでjQueryを説明すると、セクションに関数が直接追加されます.ただし、これらを別のファイルに配置すると、次のようになります(srcプロパティでファイルを参照します):
≪インスタンス｜Instance｜emdw≫
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery名の競合
jQueryは、jQueryのプロフィールとして$記号を使用します.
Prototypeなどの他のJavaScriptライブラリの関数でも$記号が使用されています.
jQueryはnoConflict()という方法を用いてこの問題を解決する.
var jq=jQuery.noConflict()は、$記号の代わりに自分の名前(例えばjq)を使用するのに役立ちます.
みずからやってみる
結論
jQueryはHTMLイベントを処理するために特別に設計されているため、次の原則に従うと、コードがより適切でメンテナンスが容易になります.
jQueryイベント
次に、jQueryのイベントメソッドの例を示します.
Event関数バインド関数＃Eventカンスウバインドカンスウ＃
$(document).ready(function)
関数をドキュメントにバインドする準備完了イベント(ドキュメントのロードが完了した場合)
$(selector).click(function)
選択した要素に関数をバインドするクリックイベントをトリガーまたはバインドします.
$(selector).dblclick(function)
選択した要素に関数をバインドするダブルクリックイベントをトリガーまたはバインドします.
$(selector).focus(function)
選択した要素に関数をバインドするフォーカスイベントをトリガーまたはバインドします.
$(selector).mouseover(function)
選択した要素に関数をバインドするマウスのサスペンションイベントをトリガーまたはバインドします.