jQuery/Method

jQuery Method

jQuery｜jQuery/Selector｜jQuery/Sample

jQuery には、関数とメソッドの２つのAPI が用意されています。ここではセレクタに対して使用できるメソッドについて、概説します。

↑

はじめに
- メソッドの構文
- 事例
よく用いるメソッド
イベント処理
- イベント設定の構文
- イベントの種類

↑

はじめに

↑

メソッドの構文

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 は当該要素そのものです。

２つの引数をともに使う場合

$(".comment").each( function( i, elm ) {
   alert( i + ': ' + $( elm ).text() );
});

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

↑

.eq() メソッド

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

↑

.remove() メソッド

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

↑

イベント処理

↑

イベント設定の構文

以下の２通りの記述方法があります。

onメソッドを使う方法

$( セレクタ ).on( イベント名 , イベントハンドラ );

書き方の例

$( '#btn' ).on( 'click' ,  function() {
 　・・・ここに処理を書く・・・
 } );

onメソッドは、一つのセレクタに対して複数のイベントハンドラを定義したい場合に便利です。以下はボタンに３種のマウスイベントを設定する例。

$( '#button' ).on({
  'click' : function( ) {・・・},
  'mouseover' : function( ) {・・・},
  'mouseout' : function( ) {・・・}
});

ショートカットメソッドを使う方法

$( セレクタ ).click( イベントハンドラ );