開発メモ/Web/JS/jquery
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
*jquery [#r5b786c8]
参考サイトを自分が読みやすいように変えただけ。
#contents
**jqueryの入手とScriptタグの記述 [#me83b875]
+[[公式サイト>http://jquery.com/]]からの入手
+[[Google>http://code.google.com/intl/ja/apis/libraries/d...
公式からダウンロードした場合
#codeprettify{{
<HTML>
<HEAD>
<script src="./jquery-1.7.1.js"></script>
</HEAD>
}}
Googleのライブラリを使う場合
#codeprettify{{
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/lib...
</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>...
}}
スタイルを変更する場合は、css()メソッドを利用します。
#codeprettify{{
.css('要素','値')
}}
実際の例だと
#codeprettify{{
<p id="first">変更前</p>
<input type="button" onclick="$('p#first').css('color','r...
}}
**イベント [#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でよく利用されるセレクター|
|要素セレクター |$(要素名) ...
|IDセレクター |$(#ID名) ...
|クラスセレクター |$(.クラス名) ...
|子孫セレクター |$(要素1 要素2) ...
|ユニバーサルセレクター |$(*) ...
|グループセレクター |$(セレクター1) ...
|>|>|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) ...
|>|>|BGCOLOR(#00FFFF):CSSの属性セレクター|
|[attribute] |$([属性名]) ...
|[attribute='value'] |$([属性名='値']) ...
|[attribute!='value'] |$(要素名[属性名!='...
|[attribute^='value'] |$([属性名^='値']) ...
|[attribute$='value'] |$([属性名$='値']) ...
|[attribute*='value'] |$([属性名*='値']) ...
|[attributeFilter1][attributeFilter2]|$([属性セレクター1]...
|>|>|BGCOLOR(#00FFFF):jQueryの独自フィルター|
|firstフィルター |$(要素:first) ...
|lastフィルター |$(要素:last) ...
|evenフィルター |$(要素:even) ...
|oddフィルター |$(要素:odd) ...
|eqフィルター |$(要素:eq(番号)) ...
|gtフィルター |$(要素:gt(番号)) ...
|ltフィルター |$(要素:lt(番号)) ...
|headerフィルター |$(要素:header) ...
|containsフィルター |$(要素:contains(文...
|hasフィルター |$(要素1:has(要素2))...
|parentフィルター |$(要素:parent) ...
|>|>|BGCOLOR(#00FFFF):フォームフィルター|
|:inputフィルター |$(要素:input) ...
|:textフィルター |$(要素:text) ...
|:passwordフィルター |$(要素:password) ...
|:radioフィルター |$(要素:radio) ...
|:checkboxフィルター |$(要素:checkbox) ...
|:submitフィルター |$(要素:submit) ...
|:imageフィルター |$(要素:image) ...
|:resetフィルター |$(要素:reset) ...
|:buttonフィルター |$(要素:button) ...
|:fileフィルター |$(要素:file) ...
|: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 ...
|val() |フォームの入力値(val ...
***イベント [#g766f135]
|イベント |意味|h
|click |クリック|
|dblclick |ダブルクリック|
|mousedown|マウスダウン|
|mouseup |マウスアップ|
|mouseover|マウスオーバー|
|mouseout |マウスアウト|
|mousemove|マウスムーブ|
**参考 [#pf85d190]
-[[40分で覚える!jQuery速習講座>http://ascii.jp/elem/000/...
-[[jQuery日本語リファレンス>http://semooh.jp/jquery/]]
終了行:
*jquery [#r5b786c8]
参考サイトを自分が読みやすいように変えただけ。
#contents
**jqueryの入手とScriptタグの記述 [#me83b875]
+[[公式サイト>http://jquery.com/]]からの入手
+[[Google>http://code.google.com/intl/ja/apis/libraries/d...
公式からダウンロードした場合
#codeprettify{{
<HTML>
<HEAD>
<script src="./jquery-1.7.1.js"></script>
</HEAD>
}}
Googleのライブラリを使う場合
#codeprettify{{
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/lib...
</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>...
}}
スタイルを変更する場合は、css()メソッドを利用します。
#codeprettify{{
.css('要素','値')
}}
実際の例だと
#codeprettify{{
<p id="first">変更前</p>
<input type="button" onclick="$('p#first').css('color','r...
}}
**イベント [#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でよく利用されるセレクター|
|要素セレクター |$(要素名) ...
|IDセレクター |$(#ID名) ...
|クラスセレクター |$(.クラス名) ...
|子孫セレクター |$(要素1 要素2) ...
|ユニバーサルセレクター |$(*) ...
|グループセレクター |$(セレクター1) ...
|>|>|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) ...
|>|>|BGCOLOR(#00FFFF):CSSの属性セレクター|
|[attribute] |$([属性名]) ...
|[attribute='value'] |$([属性名='値']) ...
|[attribute!='value'] |$(要素名[属性名!='...
|[attribute^='value'] |$([属性名^='値']) ...
|[attribute$='value'] |$([属性名$='値']) ...
|[attribute*='value'] |$([属性名*='値']) ...
|[attributeFilter1][attributeFilter2]|$([属性セレクター1]...
|>|>|BGCOLOR(#00FFFF):jQueryの独自フィルター|
|firstフィルター |$(要素:first) ...
|lastフィルター |$(要素:last) ...
|evenフィルター |$(要素:even) ...
|oddフィルター |$(要素:odd) ...
|eqフィルター |$(要素:eq(番号)) ...
|gtフィルター |$(要素:gt(番号)) ...
|ltフィルター |$(要素:lt(番号)) ...
|headerフィルター |$(要素:header) ...
|containsフィルター |$(要素:contains(文...
|hasフィルター |$(要素1:has(要素2))...
|parentフィルター |$(要素:parent) ...
|>|>|BGCOLOR(#00FFFF):フォームフィルター|
|:inputフィルター |$(要素:input) ...
|:textフィルター |$(要素:text) ...
|:passwordフィルター |$(要素:password) ...
|:radioフィルター |$(要素:radio) ...
|:checkboxフィルター |$(要素:checkbox) ...
|:submitフィルター |$(要素:submit) ...
|:imageフィルター |$(要素:image) ...
|:resetフィルター |$(要素:reset) ...
|:buttonフィルター |$(要素:button) ...
|:fileフィルター |$(要素:file) ...
|: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 ...
|val() |フォームの入力値(val ...
***イベント [#g766f135]
|イベント |意味|h
|click |クリック|
|dblclick |ダブルクリック|
|mousedown|マウスダウン|
|mouseup |マウスアップ|
|mouseover|マウスオーバー|
|mouseout |マウスアウト|
|mousemove|マウスムーブ|
**参考 [#pf85d190]
-[[40分で覚える!jQuery速習講座>http://ascii.jp/elem/000/...
-[[jQuery日本語リファレンス>http://semooh.jp/jquery/]]
ページ名: