LogoMark.png

jQuery/Method の変更点


#author("2021-06-22T15:44:31+09:00;2021-06-22T15:33:54+09:00","default:inoue.ko","inoue.ko")
*jQuery Method
[[jQuery]]|[[jQuery/Selector]]|[[jQuery/Sample]]
~

jQuery には、関数とメソッドの2つのAPI が用意されています。ここでは [[セレクタ>jQuery/Selector]] に対して使用できるメソッドについて、概説します。
~
***CONTENTS
#contents2_1

~

**はじめに
***メソッドの構文
jQueryのメソッドは、jQuery のセレクタが持つ「関数オブジェクト」で、基本的な構文は以下の形になります。

 $( セレクタ ) . メソッド名( 引数 );

jQueryには、メソッドを連結させて順に処理させる「メソッド・チェーン」という構文もあります。条件としては、各メソッドが「セレクタを返す」タイプのものであることが必要です。

 $( セレクタ ) . メソッドA( ) . メソッドB( )  . メソッドC( ) ;
~

***事例
テキストの動的変更を行う .text() メソッドの事例で説明します。

-例えば、<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> ' );
~

***.attr() メソッド
-要素の''属性''の動的変更を行います。
例えば、<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メソッドでは、以下のように特定のプロパティのみを設定する場合と、複数のプロパティーを設定する場合(オブジェクト形式)があります。上記の例はオブジェクト形式の書き方に該当します。
 $( '#message' ).css( プロパティ名, 値 );
 $( '#message' ).css( {
       プロパティ名: 値,
       プロパティ名: 値,
       プロパティ名: 値,
 });
プロパティーを ' ' で囲む必要があること、区切りが [ , ] であることが、 通常のCSSの記述とは異なるので注意が必要です。

~

***.each()メソッド
-クラス要素やTAG要素など、要素数が不定の要素すべてに対して繰り返し処理を行うためのメソッドです。文法は以下。
 $('.セレクタ').each( function( index, element ){ 〜 } );
index は要素が何番めかを示す数字で、elememt は当該要素そのものです。

-2つの引数をともに使う場合
 $(".comment").each( function( i, elm ) {
    alert( i + ': ' + $( elm ).text() );
 });

-第1引数のみ使う場合
 $(".comment").each( function( i ) {
    alert( i + ': ' + $( this ).text());
 });
処理中の要素を取得するには this が利用できます。
~

***.eq() メソッド
-クラス要素やTAG要素などで、指定した順番の要素を取得します。文法は以下。
 $( 'li' ).eq( 要素の順番号 ).メソッド;
-例えば li 項目の3番め(添字では2)のテキストを表示したい場合は・・
 alert( $('li').eq(2).text() );
~

***.remove() メソッド
-HTML要素の動的削除を行います。
例えば、<form id="entry">・・</form> の部分を削除するには・・
 $( '#entry' ).remove();

~
~

**イベント処理
***イベント設定の構文
以下の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() {・・・} );


-参考:[[Google:jQuery イベント]]
~

//***イベントハンドラ
//イベントハンドラとは、イベントが発生した時点で実行される関数のことです。書き方は以下のようになります。

//(書きかけです)

~
~