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-01-28 (火) 14:25:02