LogoMark.png

jQuery/Method

jQuery Method

jQueryjQuery/SelectorjQuery/Sample

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

CONTENTS


はじめに

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

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

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

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




テキストメソッド

テキストの動的変更

例えば、<p id="message">・・</p>の内容(テキスト)を変更するには・・

$( '#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通りの記述方法があります。


イベントの種類




PAGES

GUIDE

DATA

Last-modified: 2020-06-17 (水) 18:47:17