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メソッドの指定イベントを削除

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-01-20 (火) 14:21:14