*jquery [#r5b786c8]
参考サイトを自分が読みやすいように変えただけ。
#contents
**jqueryの入手とScriptタグの記述 [#me83b875]
+[[公式サイト>http://jquery.com/]]からの入手
+[[Google>http://code.google.com/intl/ja/apis/libraries/devguide.html#jquery]]が提供するスクリプトを参照する
公式からダウンロードした場合
#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>
}}
**jqueryのコードを記述する場所 [#vbd15b25]
#codeprettify{{
$(document).ready(function){
ここにコードを記述
})
}}
上記の記述は省略して以下のように記述できる
#codeprettify{{
$(function){
ここにコードを記述
})
}}
jqueryは要素を指定し、その要素で何か起きた場合などに処理を行わせます。~
その要素をセレクターと呼びます。~
セレクターは以下のように指定します。~
#codeprettify{{
$("セレクター")
}}
セレクターはCSSのセレクターと同じような指定ができます。
#codeprettify{{
$("#main img")
}}
上記はidがmainの要素内に存在するimg要素を指定しています。
**メソッドの呼び出し [#f768be48]
メソッドは以下のような形式で呼び出します
#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="スタイル変更"/>
}}
**イベント [#y007ae3e]
イベントに対して処理を行いたい場合、以下のように記述します。
#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>
}}
**アニメーション [#xb5fb575]
セレクターの表示/非表示の切り替えは以下のように行います。
#codeprettify{{
$("セレクター").show();
$("セレクター").hide();
}}
スライドアニメーションは以下のように行います。
#codeprettify{{
$("セレクター").slideDown(速度);
$("セレクター").slideUp(速度);
}}
フェードアニメーションは以下のように行います。
#codeprettify{{
$("セレクター").fadeIn(速度);
$("セレクター").fadeOut(速度);
}}
速度のところは以下の値が設定できます。
-slow,normal,fastのいずれか
-ミリ秒（1秒＝1000秒）
**おまけ [#z8d370aa]
***セレクターの種類 [#t9bc90da]
|名称|書式|指定対象|h
|>|>|BGCOLOR(#00FFFF):CSSでよく利用されるセレクター|
|要素セレクター |$(要素名) |特定のHTML要素 |
|IDセレクター |$(#ID名) |特定のid属性を持つ要素 |
|クラスセレクター |$(.クラス名) |特定のclass属性を持つ要素 |
|子孫セレクター |$(要素1 要素2) |特定の要素の内側にある要素 |
|ユニバーサルセレクター |$(*) |すべての要素 |
|グループセレクター |$(セレクター1) |セレクター2 |
|>|>|BGCOLOR(#00FFFF):CSS2のセレクター|
|子セレクター |$(親要素名 > 子要素名) |特定の要素の直下の子要素 |
|隣接セレクター |$(要素1 + 要素2) |特定の要素の次の要素 |
|first-child擬似クラス |$(要素:first-child) |同一の親要素内の最初の要素 |
|>|>|BGCOLOR(#00FFFF):CSS3のセレクター|
|間接セレクター |$(要素1 ~ 要素2) |特定の要素の後に出現する要素 |
|否定擬似クラス |$(要素1:not(要素2)) |特定の要素内で指定した要素以外の要素 |
|empty擬似クラス |$(要素:empty")" |子要素やテキストを含まない要素 |
|nth-child擬似クラス |$(要素:nth-child(番号)) |特定の要素内の指定した番号の要素 |
|last-child擬似クラス |$(要素:last-child) |特定の要素内の最後の要素 |
|only-child擬似クラス |$(要素:only-child) |指定した要素が1つだけ含まれる特定の要素 |
|>|>|BGCOLOR(#00FFFF):CSSの属性セレクター|
|[attribute] |$([属性名]) |特定の属性を持つ要素 |
|[attribute='value'] |$([属性名='値']) |特定の属性が指定した値を持つ要素 |
|[attribute!='value'] |$(要素名[属性名!='値']) |特定の属性が指定した値を持たない要素 |
|[attribute^='value'] |$([属性名^='値']) |特定の属性が特定した値で始まっている要素 |
|[attribute$='value'] |$([属性名$='値']) |特定の属性が特定した値で終わっている要素 |
|[attribute*='value'] |$([属性名*='値']) |特定の属性が特定した値を含んでいる要素 |
|[attributeFilter1][attributeFilter2]|$([属性セレクター1][属性セレクター2])|複数の属性セレクターに該当する要素 |
|>|>|BGCOLOR(#00FFFF):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) |子要素やテキストを含む要素 |
|>|>|BGCOLOR(#00FFFF):フォームフィルター|
|: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) |セレクトボックスで選択されている要素|
***jQueryで利用できる主なHTML/CSSを操作する命令 [#g5185f38]
|命令名・書式 |意味|h
|>|BGCOLOR(#00FFFF):テキストの変更と取得|
|text(変更後のテキスト) |テキストを変更する|
|text() |テキストを取得する|
|>|BGCOLOR(#00FFFF):HTMLの変更と取得|
|html(変更後のHTML) |HTMLを変更する|
|html() |HTMLを取得する|
|>|BGCOLOR(#00FFFF):HTMLの挿入|
|prepend(挿入するHTML) |要素内の先頭にHTMLを挿入する|
|append(挿入するHTML) |要素内の最後にHTMLを挿入する|
|before(挿入するHTML) |要素の前にHTMLを挿入する|
|after(挿入するHTML) |要素の後にHTMLを挿入する|
|>|BGCOLOR(#00FFFF):HTMLの移動|
|prependTo(移動先のセレクター) |他の要素内の先頭に要素を移動する|
|appendTo(移動先のセレクター) |他の要素内の最後に要素を移動する|
|insertBefore(移動先のセレクター) |他の要素の前に要素を移動する|
|insertAfter(移動先のセレクター) |他の要素の後に要素を移動する|
|>|BGCOLOR(#00FFFF):他の要素で包む|
|wrap(<要素名></要素名>) |要素を他の要素で包む|
|wrarpAll(<要素名></要素名>) |要素をまとめて他の要素で包む|
|wrapInner(<要素名></要素名>) |子要素/テキストを他の要素で包む|
|>|BGCOLOR(#00FFFF):要素の置き換え|
|replaceWith(置換後の要素) |要素を他の要素に置き換える|
|>|BGCOLOR(#00FFFF):要素の削除|
|remove() |要素を削除する|
|>|BGCOLOR(#00FFFF):属性値の変更と取得|
|attr(属性名, 属性値) |指定した属性の値を変更する|
|attr(属性名) |指定した属性の値を取得する|
|removeAttr(属性名) |指定した属性を削除する|
|>|BGCOLOR(#00FFFF):class属性の追加と削除|
|addClass(class属性値) |class属性を追加する|
|removeClass(class属性値) |class属性を削除する|
|>|BGCOLOR(#00FFFF):CSSの制御|
|css(プロパティ名,値) |指定したCSSプロパティの値を設定する|
|css(プロパティ名) |指定したCSSプロパティの値を取得する|
|>|BGCOLOR(#00FFFF):フォーム部品の操作|
|val（"入力値"） |フォームの入力値（val ue属性の値）を変更する|
|val（） |フォームの入力値（val ue属性の値）を取得する|
***イベント [#g766f135]
|イベント |意味|h
|click |クリック|
|dblclick |ダブルクリック|
|mousedown|マウスダウン|
|mouseup |マウスアップ|
|mouseover|マウスオーバー|
|mouseout |マウスアウト|
|mousemove|マウスムーブ|
**参考 [#pf85d190]
-[[40分で覚える！jQuery速習講座>http://ascii.jp/elem/000/000/498/498710/index.html]]
-[[jQuery日本語リファレンス>http://semooh.jp/jquery/]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
