jQuery/Method
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*jQuery Method
[[jQuery]]|[[jQuery/Selector]]|[[jQuery/Sample]]
~
jQuery には、関数とメソッドの2つのAPI が用意されています...
~
***CONTENTS
#contents2_1
~
**はじめに
***メソッドの構文
jQueryのメソッドは、jQuery のセレクタが持つ「関数オブジェ...
$( セレクタ ) . メソッド名( 引数 );
jQueryには、メソッドを連結させて順に処理させる「メソッド...
$( セレクタ ) . メソッドA( ) . メソッドB( ) . メソッドC...
~
***事例
テキストの動的変更を行う .text() メソッドの事例で説明しま...
-例えば、<p id="message">・・</p>の内容(テキスト)を変更す...
$( '#message' ).text( 'Hello World!' );
-これをどこにどう書くか・・ですが、HTMLの中に直接上記の1...
:
<script>
$( '#message' ).text( 'Hello World!' );
</script>
</body>
</html>
-.js ファイルに記述して、<head> で読み込む場合は、[[jQuer...
$(function(){
$( '#message' ).text( 'Hello World!' );
});
~
~
**よく用いるメソッド
***.html() メソッド
-HTML要素の動的変更を行います。
例えば、<div id="contents">・・</div> の内容(HTML)を変更...
$( '#contents' ).html( ' <h1>・・</h1> <p id="XXX">・・...
~
***.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( {
プロパティ名: 値,
プロパティ名: 値,
プロパティ名: 値,
});
プロパティーを ' ' で囲む必要があること、区切りが [ , ] ...
~
***.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メソッドは、一つのセレクタに対して複数のイベントハンド...
$( '#button' ).on({
'click' : function( ) {・・・},
'mouseover' : function( ) {・・・},
'mouseout' : function( ) {・・・}
});
-ショートカットメソッドを使う方法
$( セレクタ ).click( イベントハンドラ );
書き方の例
$( '#btn' ).click( function() {
・・・ここに処理を書く・・・
} );
~
***イベントの種類
-ユーザーイベント
代表的なものに click、mouseover、mouseout イベントがあり...
-ブラウザイベント
代表的なものに resize(Window幅の変更)イベントがあります。
-readyイベント
jQuery はDOM の読み込み完了時に実行される・・が前提となり...
jQuery の定番のフレーム
$( function( ) {・・・ } );
というのは、エイリアスを使わずにフルで書くと以下のとおり...
$( document ).ready( function() {・・・} );
-参考:[[Google:jQuery イベント]]
~
//***イベントハンドラ
//イベントハンドラとは、イベントが発生した時点で実行され...
//(書きかけです)
~
~
終了行:
*jQuery Method
[[jQuery]]|[[jQuery/Selector]]|[[jQuery/Sample]]
~
jQuery には、関数とメソッドの2つのAPI が用意されています...
~
***CONTENTS
#contents2_1
~
**はじめに
***メソッドの構文
jQueryのメソッドは、jQuery のセレクタが持つ「関数オブジェ...
$( セレクタ ) . メソッド名( 引数 );
jQueryには、メソッドを連結させて順に処理させる「メソッド...
$( セレクタ ) . メソッドA( ) . メソッドB( ) . メソッドC...
~
***事例
テキストの動的変更を行う .text() メソッドの事例で説明しま...
-例えば、<p id="message">・・</p>の内容(テキスト)を変更す...
$( '#message' ).text( 'Hello World!' );
-これをどこにどう書くか・・ですが、HTMLの中に直接上記の1...
:
<script>
$( '#message' ).text( 'Hello World!' );
</script>
</body>
</html>
-.js ファイルに記述して、<head> で読み込む場合は、[[jQuer...
$(function(){
$( '#message' ).text( 'Hello World!' );
});
~
~
**よく用いるメソッド
***.html() メソッド
-HTML要素の動的変更を行います。
例えば、<div id="contents">・・</div> の内容(HTML)を変更...
$( '#contents' ).html( ' <h1>・・</h1> <p id="XXX">・・...
~
***.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( {
プロパティ名: 値,
プロパティ名: 値,
プロパティ名: 値,
});
プロパティーを ' ' で囲む必要があること、区切りが [ , ] ...
~
***.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メソッドは、一つのセレクタに対して複数のイベントハンド...
$( '#button' ).on({
'click' : function( ) {・・・},
'mouseover' : function( ) {・・・},
'mouseout' : function( ) {・・・}
});
-ショートカットメソッドを使う方法
$( セレクタ ).click( イベントハンドラ );
書き方の例
$( '#btn' ).click( function() {
・・・ここに処理を書く・・・
} );
~
***イベントの種類
-ユーザーイベント
代表的なものに click、mouseover、mouseout イベントがあり...
-ブラウザイベント
代表的なものに resize(Window幅の変更)イベントがあります。
-readyイベント
jQuery はDOM の読み込み完了時に実行される・・が前提となり...
jQuery の定番のフレーム
$( function( ) {・・・ } );
というのは、エイリアスを使わずにフルで書くと以下のとおり...
$( document ).ready( function() {・・・} );
-参考:[[Google:jQuery イベント]]
~
//***イベントハンドラ
//イベントハンドラとは、イベントが発生した時点で実行され...
//(書きかけです)
~
~
ページ名: