jQuery API の click() は、クリックイベントを実行するメソッド。クリックイベント時の、ブラウザのデフォルト動作と、click( fn )などでバインドしたイベントハンドラを実行する。
「A要素のイベント時に、B要素のクリックイベントを実行させたい」なんて時に便利だ。
記述方法
jQuery( セレクター ) . click();
「セレクター」の要素のクリックイベントを実行する。
実装例(サンプル)
- リストアイテムA
- リストアイテムB
- リストアイテムC
実装例(サンプル)の動作について
リストアイテムA、リストアイテムB、リストアイテムCを、クリックすると、クリックしたリストアイテムが、フェードアウトで消え、すぐに、フェードインで出現する。
「click()」ボタンをクリックすると、全てのリストアイテムが、フェードアウトで消え、すぐに、フェードインで出現する。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click-button' ) . click( function () {
jQuery( '#jquery-api-click li' ) . click();
} );
jQuery( '#jquery-api-click li' ) . click( function () {
jQuery( this ) . fadeOut( 1000 ) . fadeIn( 1000 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click-button' ) . click( function () {
jQuery( '#jquery-api-click li' ) . click();
} );
jQuery( '#jquery-api-click li' ) . click( function () {
jQuery( this ) . fadeOut( 1000 ) . fadeIn( 1000 );
} );
} );
// -->
</script>
HTML
<p><button id="jquery-api-click-button">click()</button></p>
<ol id="jquery-api-click">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>
<ol id="jquery-api-click">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>