jQuery/Method

jQuery Method

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

はじめに
テキストメソッド
- テキストの動的変更
HTMLメソッド
CSSメソッド
- CSSの動的変更
イベント処理
- イベント設定の構文
- イベントの種類

はじめに

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の記述とは異なるので注意が必要です。

↑

イベント処理

↑

イベント設定の構文

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

onメソッドを使う方法

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

書き方の例

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

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

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

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

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