jQuery Method
jQuery|jQuery/Selector|jQuery/Sample
jQuery には、関数とメソッドの2つのAPI が用意されています。ここでは セレクタ に対して使用できるメソッドについて、概説します。
CONTENTS
はじめに
jQueryのメソッドは、jQuery のセレクタが持つ「関数オブジェクト」で、基本的な構文は以下の形になります。
$( セレクタ ) . メソッド名( 引数 );
jQueryには、メソッドを連結させて順に処理させる「メソッド・チェーン」という構文もあります。条件としては、各メソッドが「セレクタを返す」タイプのものであることが必要です。
$( セレクタ ) . メソッドA( ) . メソッドB( ) . メソッドC( ) ;
テキストメソッド
テキストの動的変更
例えば、<p id="message">・・</p>の内容(テキスト)を変更するには・・
$( '#message' ).text( 'Hello World!' );
確認:これをどこにどう書くかについて
- HTMLの中に直接上記の1行だけ記述する場合は、</body>の直前に、以下のように<script>タグで囲んで記述します。
: <script> $( '#message' ).text( 'Hello World!' ); </script> </body> </html>
- .js ファイルに記述して、<head> で読み込む場合は、jQueryのページで書き方の基本として紹介したとおり $(function(){・・・}); の中に入れます。
$(function(){ $( '#message' ).text( 'Hello World!' ); });
HTMLメソッド
HTML要素の動的変更
例えば、<div id="contents">・・</div> の内容(HTML)を変更するには・・
$( '#contents' ).html( ' <h1>・・</h1> <p id="XXX">・・・</p> ' );
HTML要素の動的削除
例えば、<form id="entry">・・</form> の部分を削除するには・・
$( '#entry' ).remove();
要素の属性の動的変更
例えば、<a id="extLink" href=https://・・> の href = の部分を変更するには
$( '#extLink' ).attr( 'href', 'http://example.com/' )
要素の属性情報の取得
例えば、<a id="extLink" href=https://・・> の URLを取得するには
$url = $( '#extLink' ).attr( 'href' );
CSSメソッド
CSSの動的変更
例えば、<p id="message">・・</p> のCSSを変更するには・・
$( '#message' ).css( { 'color': 'red', 'font-size': '18px' });
プロパティーを ' ' で囲む必要があること、区切りが [ , ] であることが、 通常のCSSの記述とは異なるので注意が必要です。
イベント処理
イベント設定の構文
以下の2通りの記述方法があります。
- onメソッドを使う方法
$( セレクタ ).on( イベント名 , イベントハンドラ );
書き方の例$( '#btn' ).on( 'click' , function() { ・・・ここに処理を書く・・・ } );
onメソッドは、一つのセレクタに対して複数のイベントハンドラを定義したい場合に便利です。以下はボタンに3種のマウスイベントを設定する例。$( '#button' ).on({ 'click' : function( ) {・・・}, 'mouseover' : function( ) {・・・}, 'mouseout' : function( ) {・・・} });
- ショートカットメソッドを使う方法
$( セレクタ ).click( イベントハンドラ );
書き方の例$( '#btn' ).click( function() { ・・・ここに処理を書く・・・ } );
イベントの種類
- ユーザーイベント
代表的なものに click、mouseover、mouseout イベントがあります。 - ブラウザイベント
代表的なものに resize(Window幅の変更)イベントがあります。 - readyイベント
jQuery はDOM の読み込み完了時に実行される・・が前提となりますが、この「読み込み完了」を意味するイベントが ready イベントです。
jQuery の定番のフレーム$( function( ) {・・・ } );
というのは、エイリアスを使わずにフルで書くと以下のとおりで、要するに ready イベント処理だということです。$( document ).ready( function() {・・・} );