FrontPage > Web > jQuery
jQuery†
JavaScriptのライブラリ群の1つ
機能説明†
- jQuery
- HTMLの操作
- イベント処理
- エフェクト処理 - アニメーション機能
- jQuery UI
- Accordion - [GUI]ジャバラ式の表示
- Autocomplete - [GUI]補完テキスト
- Button - [GUI]ボタン
- Datepicker - [GUI]カレンダー
- Dialog - [GUI]ダイアログ
- Menu - [GUI]メニュー
- Progressbar - [GUI]プログレスバー
- Slider - [GUI]スライダー
- Spinner - [GUI]トグルボタン
- Tabs - [GUI]タブ
- Tooltip - [GUI]ポップアップメッセージ
- jQuery Alert
- Alert - [GUI]アラート
- Confirm - [GUI]Yes,Noアラート
- Prompt - [GUI]入力アラート
jQueryコーディング†
ヘッダ部分†
<html>
<head>
<title>XXXXX</title>
<meta http-equiv=content-type content="text/html; charset=euc-jp">
<link href="./css/jquery-ui-1.10.3.custom.css" type=text/css rel=stylesheet>
<link href="./css/jquery.alerts.css" type=text/css rel=stylesheet>
<script src="./js/jquery-1.10.1.min.js" type=text/javascript></script>
<script src="./js/jquery-ui-1.10.3.custom.min.js" type=text/javascript></script>
<script src="./js/jquery.alerts.js" type=text/javascript></script>
</head>
<body>
・・・
</body>
</html>
- jQuery UI用のCSSの「jquery-ui-xxxx.css」
- jQuery Alert用のCSSの「jquery.alerts.css」
- jQuery用のJavaScriptの「jquery-xxxx.js」
- jQuery UI用のJavaScriptの「jquery-ui-xxxx.js」
- jQuery Alert用のJavaScriptの「jquery.alerts.js」
「xxxx.min.js」と「xxx.js」は同一のプログラムです。
「min」は、インタプリタ用に最適化されています。
セレクタ†
$([セレクタ])[.命令]
基本セレクタ†
- "*"
全てのHTML要素 (重いため殆ど使用しない)
- "#id名"
id属性で絞り込み
- ".クラス名"
class属性で絞り込み
- "要素"
要素で絞り込み (div, span, input, select等のタグ)
- "セレクタ,セレクタ,..."
複数のセレクタ
階層セレクタ†
- "要素1 要素2"
子孫セレクタ要素1内の要素2 (「<div><a><span>xx</span></a><div>」なら"div span")
- "要素1>要素2"
子セレクタ要素1の直下の要素2 (「<div><a><span>x</span></a><div>」なら"div a")
- "要素1+要素2"
隣接セレクタ要素1の次の要素2
- "要素1~要素2"
間接セレクタ要素1の後の要素2
子セレクタ†
- "要素:first-child"
最初の子要素
- "要素:last-child"
最後の子要素
- "要素:nth-child(n)"
n目の子要素
- "要素:only-child"
1つしか存在しない要素
属性セレクタ†
- "[属性]"
特定の属性を持つ要素 ("[id]"と言う方法で使用)
- "[属性='値']"
特定の属性で指定した値を持つ要素 ("[id='aaaa']"と言う方法で使用)
- "[属性!='値']"
特定の属性で指定した値を持たない要素 ("[id!='aaaa']"と言う方法で使用)
- "[属性^='値']"
特定の属性で指定した値から始まる要素 ("[id^='test_']"と言う方法で使用)
- "[属性$='値']"
特定の属性で指定した値で終わる要素 ("[id$='_type']"と言う方法で使用)
- "[属性*='値']"
特定の属性で指定した値を含む要素 ("[id*='_data_']"と言う方法で使用)
- "[属性*='値']"
特定の属性で指定した値を含む要素 ("[id*='_data_']"と言う方法で使用)
- "[属性|='値']"
特定の属性で'-'+指定した値で始まる要素 ("[id|='data']"と言う方法で使用)
- "[属性~='値']"
特定の属性で指定した値の何れかが含まれる要素 ("[id~='data1 data2']"と言う方法で使用)
- "[属性1][属性2]"
複数の属性に該当する要素 ("[id][class]"と言う方法で使用)
基本フィルタ†
- "要素:first"
最初の要素
- "要素:last"
最後の要素
- "要素:even"
偶数番目の要素
- "要素:odd"
奇数番目の要素
- "要素:eq(n)"
n番目の要素 (0から数える)
- "要素:gt(n)"
n番目より後の要素
- "要素:lt(n)"
n番目より前の要素
- ":header"
h1〜h6の要素
- "要素:anumated"
アニメーションしている要素
- "要素:not(セレクタ)"
否定疑似クラス セレクタで指定された条件以外の要素
コンテンツフィルタ†
- "要素:contains(文字列1)"
文字列1が含まれて居る要素
- "要素:empty"
子要素やテキストを含まない要素
- "要素1:has(要素2)"
要素2が含まれて居る要素1
- "要素:parent"
子要素やテキストを含む要素
フォームフィルタ†
- ":button"
buttonタグ又は、inputタグのtypeが"button"の要素
- ":checkbox"
inputタグのtypeが"checkbox"の要素
- ":checked"
inputタグのtypeが"checkbox"又は"redio"で選択状態の要素
- ":disabled"
disabled属性が設定されて居る要素
- ":enabled"
disabled属性が設定されて居ない要素
- ":file"
inputタグのtypeが"file"の要素
- ":image"
inputタグのtypeが"image"の要素
- ":input"
input、textarea、select、buttonタグ等の要素
- ":password"
inputタグのtypeが"password"の要素
- ":radio"
inputタグのtypeが"radio"の要素
- ":reset"
inputタグのtypeが"reset"の要素
- ":selected"
セレクトボックスで選択されているoptonタグの要素
- ":submit"
inputタグのtypeが"submit"又は、"image"の要素
- ":text"
inputタグのtypeが"text"の要素 (確か、textareaタグも)
可視フィルタ†
- ":hidden"
CSSでdisplayが"none"の要素、inputタグのtypeが"hidden"の要素
- ":visible"
ブラウザで表示される要素
$([セレクタ])[.命令]
ダグ要素の操作†
- .text();
テキスト取得
text=$("[id='text']").text();
- .text(...);
テキストの書き換え
$("[id='text']").text("abcd");
- .html();
htmlの取得
text=$("[id='text']").html();
- .html(...);
htmlの書き換え (innerHTMLの類似機能)
※bodyタグなど一部のタグは消される
$("[id='text']").html("<a href=''>abcd</a>");
- .prepend(...);
要素の先頭に挿入
- .append(...);
要素の末尾に挿入
- .before(...);
要素の前に挿入
- .after(...);
要素の後に挿入
- .prependTo(セレクタ);
要素の先頭に要素を挿入
- .appendTo(セレクタ);
要素の末尾に要素を挿入
- .insertBefore(セレクタ);
要素の前に要素を挿入
- .insertAfter(セレクタ);
要素の後に要素を挿入
- .wrap(...);
各要素タグで囲む
- .wrapAll(...);
要素全体をタグで囲む
- .wrapInner
要素の内容をタグで囲む
- .unwrap();
要素を囲むHTMLタグを削除
- .replaceWith(...);
要素の置き換え
- .replaceAll(セレクタ);
要素の置き換え
- .empty();
子要素を全て削除
- .remove();
要素を全て削除
タグの属性操作†
- .attr(属性名);
属性名の取得 attribute_id=$("[id='text']").attr("id");
- .attr(属性名, 変更後の値);
属性名の設定
$("[id='text']").attr("id", "text2");
$("[id='text']").attr({"id":"text2","name":"text2",});
- .removeAttr(...);
属性を削除
- .addClass(...);
class属性の追加
$("[id='text']").addClass("number");
$("[id='text']").addClass("number border");
- .removeClass(...);
class属性の削除
$("[id='text']").removeClass("number");
$("[id='text']").removeClass("number border");
- .toggleClass(...);
class属性の削除か追加 (反転処理)
- .val();
入力値の取得
- .val(...);
入力値の変更
- .css(CSS名);
CSS状態の取得
attribute_id=$("[id='text']").css("border");
- .css(CSS名, CSS設定値);
CSS状態の設定
$("[id='text']").css("border", "1px solid black");
$("[id='text']").css({"margin":"1px","padding":"1px",});
部品のサイズ等の取得†
- .offset().top;
ブラウザの上からの距離
- .offset().left;
ブラウザの左からの距離
- .position().top;
親要素の上からの距離
- .position().left;
親要素の左からの距離
- .scrollTop();
縦スクロールの位置
- .scrollLeft();
横スクロールの位置
- .height();
要素の高さを取得
- .width();
要素の幅を取得
- .innerHeight();
パディングを含む高さを取得
- .innerWidth();
パディングを含む幅を取得
- .outerHeight();
ボーダーを含む高さを取得
- .outerWidth();
ボーダーを含む幅を取得
イベント†
$([セレクタ])[.イベント](function() { … });
イベントの種類†
- $(document).ready(function(){ … });
HTMLが読み込まれた時に実行
- $( function(){ … });
HTMLが読み込まれた時に実行
- $(window).load(function(){ … });
Webページが完全に読み込まれた時に実行
- $(セレクタ).load(function(){ … });
要素にファイルの読込が完了した時に実行
- $(window).unload(function(){ … });
Webページを閉じた時に実行
- $(window).resize(function(){ … });
Webページをリサイズした時に実行
- $(window).scroll(function(){ … });
Webページをスクロールした時に実行
- $(セレクタ). scroll (function(){ … });
要素をスクロールした時に実行
- $(window).error(function(){ … });
Jsでエラーが発生した時に実行
- $(imgセレクタ). error (function(){ … });
画像読込が失敗した時に実行
- $(セレクタ). click (function(){ … });
要素でクリックした時に実行
- $(セレクタ). toggle (function(){ … });
要素でクリックされる度に実行
- $(セレクタ). dblclick (function(){ … });
要素でダブルクリックした時に実行
- $(セレクタ). mousedown (function(){ … });
要素でマウスボタンを押下した時に実行
- $(セレクタ). mouseup (function(){ … });
要素でマウスボタンを戻したした時に実行
- $(セレクタ). mousemove (function(){ … });
要素でマウスカーソルを動かした時に実行
- $(セレクタ). mouseenter(function(){ … });
要素でマウスカーソルが乗った時に実行
- $(セレクタ). mouseover(function(){ … });
要素でマウスカーソルが乗った時に実行(子から伝播)
- $(セレクタ). mouseleave(function(){ … });
要素でマウスカーソルが外れた時に実行
- $(セレクタ). hover(function(){ … });
要素でマウスカーソルが乗る／外れた時に実行
- $(セレクタ). change(function(){ … });
要素の値が変わった時に実行
- $(セレクタ). select(function(){ … });
要素のテキストが選択された時に実行
- $(セレクタ). focus(function(){ … });
要素にフォーカスが当たった時に実行
- $(セレクタ). focusin(function(){ … });
要素にフォーカスが当たった時に実行(子から伝播)
- $(セレクタ). blur(function(){ … });
要素にフォーカスが外れた時に実行
- $(セレクタ). focusout(function(){ … });
要素にフォーカスが外れた時に実行(子から伝播)
- $(セレクタ). submit(function(){ … });
送信ボタンが押された時などに実行
- $(セレクタ). keydown(function(){ … });
キーが押された時に実行
- $(セレクタ). keypress(function(){ … });
文字が入力された時に実行
- $(セレクタ). keyup(function(){ … });
キーが離された時に実行
その他のイベント関係処理†
- $(セレクタ). bind
("イベントの種類",function(event){ … });
イベントとイベント処理を対応づける
- $(セレクタ). one
("イベントの種類",function(event){ … });
イベント発生時に1度だけ実行
- $(セレクタ). trigger("イベントの種類");
特定のイベントを実行
- $(セレクタ). unbind("イベントの種類");
イベントとイベント処理を解除
- $(セレクタ). live
("イベントの種類",function(event){ … });
要素の存在が不明な時のイベント処理
- $(親セレクタ). delegate
(セレクタ,"イベントの種類",
function(event){ … });
親要素内の要素の存在が不明な時のイベント処理
- $(セレクタ). die();
要素のliveメソッドの全てのイベントを削除
- $(セレクタ). die("イベントの種類");
要素のliveメソッドの指定イベントを削除
- $(親セレクタ). delegate();
親要素内のdelegateメソッドの全てのイベントを削除
- $(親セレクタ). delegate(セレクタ);
親要素内の要素のdelegateメソッドの全てのイベントを削除
- $(親セレクタ). delegate
(セレクタ,"イベントの種類");
親要素内の要素のdelegateメソッドの指定イベントを削除
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
