![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
参考サイトを自分が読みやすいように変えただけ。
公式からダウンロードした場合
#codeprettify{{
HTML>
<HEAD> <script src="./jquery-1.7.1.js"></script> </HEAD>}}
Googleのライブラリを使う場合
#codeprettify{{
HTML>
<HEAD> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </HEAD>}}
#codeprettify{{ $(document).ready(function){
ここにコードを記述
}) }} 上記の記述は省略して以下のように記述できる
#codeprettify{{ $(function){
ここにコードを記述
}) }}
jqueryは要素を指定し、その要素で何か起きた場合などに処理を行わせます。
その要素をセレクターと呼びます。
セレクターは以下のように指定します。
#codeprettify{{ $("セレクター") }}
セレクターはCSSのセレクターと同じような指定ができます。
#codeprettify{{ $("#main img") }} 上記はidがmainの要素内に存在するimg要素を指定しています。
メソッドは以下のような形式で呼び出します
#codeprettify{{ $(セレクタ).メソッド }}
たとえば、pタグのidがfirstの内容を変更したい場合、html()メソッドを利用します。
#codeprettify{{
p id="first">変更前</p>
input type="button" onclick="$('p#first').html('<strong>変更後</strong>');" value="内容変更"/> }}
スタイルを変更する場合は、css()メソッドを利用します。
#codeprettify{{ .css('要素','値') }} 実際の例だと
#codeprettify{{
p id="first">変更前</p>
input type="button" onclick="$('p#first').css('color','red');" value="スタイル変更"/> }}
イベントに対して処理を行いたい場合、以下のように記述します。
#codeprettify{{ $(セレクター).イベント(function(){ イベントの処理 }); }}
実際の例は以下のようになります。
以下の例は「テスト」というリンクをクリックすると、「ああああ」に変わります。
#codeprettify{{
HTML>
HEAD>
script src="./jquery-1.7.1.js"></script>
Script> $(function(){
$('a#link').click(function(){ $('a#link').html("ああああ"); });});
/Script>
/HEAD>
BODY>
a id="link" href="#">テスト</a>
/BODY>
/HTML> }}
セレクターの表示/非表示の切り替えは以下のように行います。
#codeprettify{{ $("セレクター").show(); $("セレクター").hide(); }}
スライドアニメーションは以下のように行います。
#codeprettify{{ $("セレクター").slideDown(速度); $("セレクター").slideUp(速度); }}
フェードアニメーションは以下のように行います。
#codeprettify{{ $("セレクター").fadeIn(速度); $("セレクター").fadeOut(速度); }}
速度のところは以下の値が設定できます。
| 名称 | 書式 | 指定対象 |
| CSSでよく利用されるセレクター | ||
| 要素セレクター | $(要素名) | 特定のHTML要素 |
| IDセレクター | $(#ID名) | 特定のid属性を持つ要素 |
| クラスセレクター | $(.クラス名) | 特定のclass属性を持つ要素 |
| 子孫セレクター | $(要素1 要素2) | 特定の要素の内側にある要素 |
| ユニバーサルセレクター | $(*) | すべての要素 |
| グループセレクター | $(セレクター1) | セレクター2 |
| CSS2のセレクター | ||
| 子セレクター | $(親要素名 > 子要素名) | 特定の要素の直下の子要素 |
| 隣接セレクター | $(要素1 + 要素2) | 特定の要素の次の要素 |
| first-child擬似クラス | $(要素:first-child) | 同一の親要素内の最初の要素 |
| CSS3のセレクター | ||
| 間接セレクター | $(要素1 ~ 要素2) | 特定の要素の後に出現する要素 |
| 否定擬似クラス | $(要素1:not(要素2)) | 特定の要素内で指定した要素以外の要素 |
| empty擬似クラス | $(要素:empty")" | 子要素やテキストを含まない要素 |
| nth-child擬似クラス | $(要素:nth-child(番号)) | 特定の要素内の指定した番号の要素 |
| last-child擬似クラス | $(要素:last-child) | 特定の要素内の最後の要素 |
| only-child擬似クラス | $(要素:only-child) | 指定した要素が1つだけ含まれる特定の要素 |
| CSSの属性セレクター | ||
| [attribute] | $([属性名]) | 特定の属性を持つ要素 |
| [attribute='value'] | $([属性名='値']) | 特定の属性が指定した値を持つ要素 |
| [attribute!='value'] | $(要素名[属性名!='値']) | 特定の属性が指定した値を持たない要素 |
| [attribute^='value'] | $([属性名^='値']) | 特定の属性が特定した値で始まっている要素 |
| [attribute$='value'] | $([属性名$='値']) | 特定の属性が特定した値で終わっている要素 |
| [attribute*='value'] | $([属性名*='値']) | 特定の属性が特定した値を含んでいる要素 |
| [attributeFilter1][attributeFilter2] | $([属性セレクター1][属性セレクター2]) | 複数の属性セレクターに該当する要素 |
| jQueryの独自フィルター | ||
| firstフィルター | $(要素:first) | 同一の親要素内の最初の要素 |
| lastフィルター | $(要素:last) | 指定した要素の最後の要素 |
| evenフィルター | $(要素:even) | 指定した要素の偶数番目の要素 |
| oddフィルター | $(要素:odd) | 指定した要素の奇数番目の要素 |
| eqフィルター | $(要素:eq(番号)) | 指定した番号の要素 |
| gtフィルター | $(要素:gt(番号)) | 指定した番号より後の要素 |
| ltフィルター | $(要素:lt(番号)) | 指定した番号より前の要素 |
| headerフィルター | $(要素:header) | h1～h6までのheader要素 |
| containsフィルター | $(要素:contains(文字列)) | 特定の文字列が含まれている要素 |
| hasフィルター | $(要素1:has(要素2)) | 特定の要素が含まれている要素 |
| parentフィルター | $(要素:parent) | 子要素やテキストを含む要素 |
| フォームフィルター | ||
| :inputフィルター | $(要素:input) | input要素/textarea要素/select要素/button要素 |
| :textフィルター | $(要素:text) | 1行テキスト入力フォーム（type属性がtextのinput要素） |
| :passwordフィルター | $(要素:password) | パスワード入力フォーム（type属性がpassowordのinput要素） |
| :radioフィルター | $(要素:radio) | ラジオボタン（type属性がradioのinput要素） |
| :checkboxフィルター | $(要素:checkbox) | チェックボックス（type属性がcheckboxのinput要素） |
| :submitフィルター | $(要素:submit) | 送信ボタン（type属性がsubmit/imagesのinput要素） |
| :imageフィルター | $(要素:image) | イメージボタン（type属性がimageのinput要素） |
| :resetフィルター | $(要素:reset) | リセットボタン（type属性がresetのinput要素） |
| :buttonフィルター | $(要素:button) | ボタン（button要素） |
| :fileフィルター | $(要素:file) | ファイル選択フォーム（type属性がfileのinput要素） |
| :checkedフィルター | $(要素:checked) | ラジオボタン、チェックボックスでチェックが入っている要素 |
| :selectedフィルター | $(要素:selected) | セレクトボックスで選択されている要素 |
| 命令名・書式 | 意味 |
| テキストの変更と取得 | |
| text(変更後のテキスト) | テキストを変更する |
| text() | テキストを取得する |
| HTMLの変更と取得 | |
| html(変更後のHTML) | HTMLを変更する |
| html() | HTMLを取得する |
| HTMLの挿入 | |
| prepend(挿入するHTML) | 要素内の先頭にHTMLを挿入する |
| append(挿入するHTML) | 要素内の最後にHTMLを挿入する |
| before(挿入するHTML) | 要素の前にHTMLを挿入する |
| after(挿入するHTML) | 要素の後にHTMLを挿入する |
| HTMLの移動 | |
| prependTo(移動先のセレクター) | 他の要素内の先頭に要素を移動する |
| appendTo(移動先のセレクター) | 他の要素内の最後に要素を移動する |
| insertBefore(移動先のセレクター) | 他の要素の前に要素を移動する |
| insertAfter(移動先のセレクター) | 他の要素の後に要素を移動する |
| 他の要素で包む | |
| wrap(<要素名></要素名>) | 要素を他の要素で包む |
| wrarpAll(<要素名></要素名>) | 要素をまとめて他の要素で包む |
| wrapInner(<要素名></要素名>) | 子要素/テキストを他の要素で包む |
| 要素の置き換え | |
| replaceWith(置換後の要素) | 要素を他の要素に置き換える |
| 要素の削除 | |
| remove() | 要素を削除する |
| 属性値の変更と取得 | |
| attr(属性名, 属性値) | 指定した属性の値を変更する |
| attr(属性名) | 指定した属性の値を取得する |
| removeAttr(属性名) | 指定した属性を削除する |
| class属性の追加と削除 | |
| addClass(class属性値) | class属性を追加する |
| removeClass(class属性値) | class属性を削除する |
| CSSの制御 | |
| css(プロパティ名,値) | 指定したCSSプロパティの値を設定する |
| css(プロパティ名) | 指定したCSSプロパティの値を取得する |
| フォーム部品の操作 | |
| val（"入力値"） | フォームの入力値（val ue属性の値）を変更する |
| val（） | フォームの入力値（val ue属性の値）を取得する |
| イベント | 意味 |
| click | クリック |
| dblclick | ダブルクリック |
| mousedown | マウスダウン |
| mouseup | マウスアップ |
| mouseover | マウスオーバー |
| mouseout | マウスアウト |
| mousemove | マウスムーブ |
