jQuery


jQueryの基本

 jQueryはJavaScriptを使いやすくするためのライブラリで、事実上の標準ライブラリになっています。jQueryを使うためには、HTMLのhead要素内に次のような行を追加します。この行で x.xx.xはバージョン番号で、具体的な数字に置き換える必要があります。(例) 1.11.1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.xx.x/jquery.min.js"></script>
あるいは
<script src="http://code.jquery.com/jquery-x.xx.x.js"></script>

 もし、外部のインターネットに接続されていない場合は、上のようにするとjquery.min.jsをダウンロードできないので、別途ダウンロードしておいたjquery-x.xx-x.min.jsをサーバにインストールし、それを参照する必要があります。

<script src="/js/jquery-x.xx.x.min.js"></script>

 jQueryの文法は基本的に次のようになります。

$(selector).action()

 selectorは対象のHTML要素を特定するための ID, クラス、タグ名などです。

$("#id").hide();
$(".class").hide();
$("p").hide();

セレクタ

 セレクタがID, クラス、タグ名のどれなのか区別するため、次のルールがあります。 セレクタのサンプル


 さらに複雑な指定も可能です。

セレクタ説明
"*"$("*").show();すべての要素。
":animated"$("div:animated").toggleClass("colored");アニメーションを行う要素。
"[attribute|='value']"$("a[hreflang|='en']").css("border", "3px dotted green");指定した属性が指定した値の要素。
[attribute*='value']$("input[name*='man']").val("has man in it!");属性 (attribute) の値が (value) を含む要素。
[attribute~='value']$("input[name~='man']").val("mr. man is in it!");属性 (attribute) の値が指定した語 (value) を含む要素。語は空白で区切り複数指定可能。
[attribute$='value']$("input[name$='letter']").val("a letter");属性 (attribute) の値が指定した語 (value) で終わる要素。valueは大文字・小文字の区別あり。
[attribute='value']$("input[value='Hot Fuzz']").next().text("Hot Fuzz");属性 (attribute) の値が指定した語 (value) である要素。
[attribute!='value']$("input[name!='newsletter']").next().append("<b>; not newsletter</b>" );属性 (attribute) の値が指定した語 (value) でない要素。
[attribute^='value']$("input[name^='news']").val("news here!");属性 (attribute) の値が指定した語 (value) で始まる要素。
":button"var input = $(":button").addClass("marked");<button>要素とtype="button"を持つすべての要素。
":checkbox"var input = $("form input:checkbox");type="checkbox"を持つすべての要素。
":checked" var n = $("input:checked").length;checkedまたはselected属性を持つすべての要素。
"parent > child"$("ul.topnav > li").css("border", "3px double red");parentで指定した要素の子要素を直接指定する。
":contains(text)"$("div:contains('John')").css("text-decoration", "underline");指定したテキストを持つすべての要素。
":empty" $("td:empty").text("Was empty!");子要素(テキストノードを含む)を持たないすべての要素。
":enabled"$("input:enabled").val("this is it");enabled (有効) なすべての要素。
":eq(index)"$("td:eq(2)").css("color", "red");0から始まる順番がindexに一致する要素。:lt(), :gt()も同様の機能を持つ。
":even"$("tr:even").css("background-color", "#bbf");0から始まる順番が偶数である要素。:oddも同様。
":file"var input = $("input:file").css(...);type="file"を持つすべての要素。
":first-child"$("div span:first-child").css(...);親の要素に含まれる最初の子要素。
":first-of-type" $("span:first-of-type").addClass("fot");同じタグ名を持つ兄弟要素の先頭。
":first"$("tr:first").css("font-style", "italic");最初の要素。
":focus"elem.toggleClass("focused", elem.is( ":focus" ));現在、フォーカスを持つ要素。
"[attribute]" $("div[id]").one("click", function() { ...指定した属性を持つすべての要素。
":has(selector)" $("div:has(p)").addClass("test");selectorを少なくとも1つ以上持つすべての要素。
":header"$(":header").css({ background: "#ccc", color: "blue" });ヘッダを持つすべての要素。ヘッダとは、h1, h2 など。
":hidden"var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );非表示のすべての要素。単にhidden属性を持つものだけではなく、display:noneやwidth=height=0のものなどを含む。
":image" var input = $("input:image").css(...);type="image"を持つすべての要素。
":input"var allInputs = $(":input");input, textarea, select, button などすべてのフォーム要素。
":lang(language)"$("div:lang(en-us)").addClass("usa");指定された言語のすべての要素。
":last-child"$("div span:last-child").css(...);:first-childの逆。最後の要素。
":last-of-type" $("span:last-of-type").css(...)同じタグ名を持つ兄弟のうち最後の要素。
"[attributeFilter1][attributeFilter2][attributeFilterN]"$("input[id][name$='man']").val( "only this one" );属性を複数個指定し、それに一致したすべての要素。
"selector1, selector2, selectorN"$("div, span, p.myClass").css( "border", "3px solid red" );複数のセレクタを指定したときの要素の集合。
"prev + next"$("label + input").css("color", "blue").val("Labeled!");prevに続くnextで指定されたすべての要素。
"prev ~ siblings"$("#prev ~ div").css("border", "3px groove blue");prevに続く同じ親を持つsiblingsでフィルタされる兄弟要素。
":not(selector)"$("input:not(:checked) + span").css(...);selectorに一致しないすべての要素。
":nth-child(index/even/odd/equation)"$("ul li:nth-child(2)").append(...);親のnth-childで指定される子要素。
":nth-last-child(index/even/odd/equation)":nth-childの逆。
":nth-last-of-type(index/even/odd/equation)"$("ul li:nth-last-of-type(2)").append(...);最後から数えてnth-childで指定された子要素。
":nth-of-type(index/even/odd/equation)"$("span:nth-of-type(2)").ppend(...);同じタグ名の兄弟要素のうちnth番目のもの。
":only-child"$("div button:only-child").text("Alone");子要素のうちただ一つだけの要素。
":only-of-type"$("button:only-of-type").text("Alone");そのタグ名で兄弟がないもの。
":parent"$("td:parent").fadeTo(1500, 0.3);少なくとも1つの子ノードを持つすべての要素。
":password"var input = $("input:password").css(...);type="password"であるすべての要素。
":radio" var input = $("form input:radio")type="radio"であるすべての要素。
":reset"var input = $("input:reset").css(...);type="reset"であるすべての要素。
":root"$("<b></b>" ).html($(":root")[0].nodeName).appendTo("#log");そのドキュメントの最上位要素。つまり<html>
":selected"$("select option:selected").each(function() {...}selectedであるすべての要素。
":submit"var submitEl = $("td :submit");type="submit"であるすべての要素。
":target"$("p:target")ドキュメントURIの部分識別名(*.html#name)で指定されるターゲット要素。
":text"var input = $("form input:text").css(...);type="text"であるようなすべてのよそ。
":visible" $("div:visible").click(...);すべての可視要素。

 詳しい内容についてはこちら。jQuery.com


イベント

 jQueryでは匿名関数を多用します。特にイベントハンドラは次のようにイベントメソッドの引数となります。

$(selector).event(function() { ... })

 イベントメソッドには次のようなものがあります。

イベント文法説明
click$(selector).click(function() { .. })selectorでマウスボタンがクリックされたときfunctionを実行する。
dblclick$(selector).dblclick(function() { .. })>selectorでマウスボタンがダブルクリックされたときfunctionを実行する。
mouseenter$(selector).mouseenter(function() { .. })selectorで指定された要素にマウスカーソルが入ったとき。
mouseleave$(selector).mouseleave(function() { .. })selectorで指定された要素からマウスカーソルが出るとき。
mouseover$(selector).mouseover(function() { .. })selectorで指定された要素にマウスカーソルがあるとき。
keypress$(selector).keypress(function() { .. })キーが押されたとき。
keydown$(selector).keydown(function() { .. })キーが下がるとき。
keyup$(selector).keyup(function() { .. })キーが上がるとき。
submit$(selector).submit(function() { .. })フォームが送信されるとき。
change$(selector).change(function() { .. })要素の状態が変化したとき。
focus$(selector).focus(function() { .. })selectorで指定された要素がフォーカスを得たとき。
blur$(selector).blur(function() { .. })selectorで指定された要素がフォーカスを失うとき。
ready$(selector).ready(function() { .. })要素のロードが完了し使用可能になったとき。
resize$(selector).resize(function() { .. })リサイズイベントが発生したとき。
scroll$(selector).scroll(function() { .. })スクロールイベントが発生したとき。

 

HTML要素の内容取得

メソッド文法説明
text$(selector).text()selectorで指定された要素の内容をテキストとして得る。
html$(selector).htm()selectorで指定された要素の内容をHTMLとして得る。
val$(selector).val()selectorで指定された要素のvalue属性の値を得る。
attr$(selector).attr(name)selectorで指定された要素のnameで指定された属性の値を得る。
css$(selector).css(name)selectorで指定された要素のnameで指定されたスタイルの値を得る。

 

HTML要素の内容設定

メソッド文法説明
text$(selector).text(string)selectorで指定された要素の内容にテキスト string を設定する。
html$(selector).html(string)selectorで指定された要素の内容にHTML string を設定する。
val$(selector).val(string)selectorで指定された要素のvalue属性に string を設定する。
attr$(selector).attr(name, string)selectorで指定された要素のnameで指定した属性に string を設定する。
css$(selector).css(name, string)selectorで指定された要素のnameで指定したスタイルに string を設定する。

 

HTML要素の操作

メソッド文法説明
append$(selector).append(string)selectorで指定された要素の内容に string を追加する。
prepend$(selector).prepend(string)selectorで指定された要素の内容の先頭に string を追加する。
after$(selector).after(string)selectorで指定された要素の後に string を追加する。
before$(selector).before(string)selectorで指定された要素の前に string を追加する。
remove$(selector).remove()selectorで指定された要素をドキュメントから削除する。
empty$(selector).empty()selectorで指定された要素の内容を空にする。

 

HTML要素の効果

メソッド文法説明
animate$(selector).animate([{styles},speed,easing,callback])カスタムアニメーションを開始する。
clearQueue$(selector).clearQueue([queueName])キューからまだ実行されていない項目を削除する。
delay$(selector).delay([speed[, queueName]])キューの次の要素の実行を遅らせる。
dequeue$(selector).dequeue([queueName])キューから次の項目を削除し、それを実行する。
fadeIn$(selector).fadeIn([speed,easing,callback])フェードイン効果を出す。
fadeOut$(selector).fadeOut([speed,easing,callback])フェードアウト効果を出す。
fadeTo$(selector).fadeTo([speed,opacity,easing,callback])フェードツー効果を出す。
fadeToggle$(selector).fadeToggle([speed,easing,callback])フェードイン・フェードアウト効果を繰り返す。
finish$(selector).finish([queueName])アニメーションを停止する。
hide$(selector).hide([speed,easing,callback])selectorで指定された要素を隠す。
queue$(selector).queue([queueName])実行すべき項目を表示する。
show$(selector).show([speed,easing,callback])selectorで指定された要素を表示する。
slideDown$(selector).slideDown(speed,easing,callback)選択された項目をスライドダウン表示する。
slideToggle$(selector).slideToggle([speed,easing,callback])選択された項目をスライドダウン/アップ表示する。
slideUp$(selector).slideUp(speed,easing,callback)選択された項目をスライドアップ表示する。
stop$(selector).stop([stopAll,goToEnd])アニメーションを停止する。
toggle$(selector).toggle(speed,easing,callback)showとhideを交互に行う。

 

HTML要素の親子関係

メソッド文法説明
add$(selector).add(string)子要素を追加する。
parent$(selector).parent()親の要素を得る。
parents$(selector).parents()すべての祖先を得る。
parentsUntil$(selector).parentsUntil(arg)パラメータで指定した祖先までの全要素を得る。
children$(selector).children([arg])パラメータで指定した子までの全要素を得る。
find$(selector).find(arg)パラメータで指定した子を見つける。
siblings$(selector).siblings()selectorで指定した要素のすべての兄弟を得る。
next$(selector).next()次の兄弟を得る。
nextAll$(selector).nextAll()残りの兄弟をすべて得る。
nextUntil$(selector).nextUntil(arg)パラメータで指定した兄弟までのすべての兄弟を得る。
prev$(selector).prev()前の兄弟を得る。
prevAll$(selector).prevAll()すべての前の兄弟を得る。
prevUntil$(selector).prevUntil(arg)パラメータで指定した兄弟までのすべての前の兄弟を得る。

 

Ajax

 Ajax はウェブサーバとJavaScriptが直接、通信を行うことでデータを取得したり、逆に送ったりする機能です。Ajaxを使うと、ページ更新なしでページの内容を書き換えることができます。jQueryでは、Ajaxを簡単に使えるようにするためのメソッドが用意されています。下の表によく使われるものを示します。

メソッド文法説明
load$(selector).load(URL, [data, [callback]])サーバからデータを取得し、selectorで指定した要素の内容とする。
get$.get(URL[, data[, callback]])GETメソッドでサーバからデータを取得する。
post$.post(URL[,data[, callback]])POSTメソッドでサーバからデータを取得する。
ajax$.ajax(options)getやpostの元になっているメソッド。
getJSON$.getJSON(URL[, data[, callback]])GETメソッドでJSON形式データを取得する。

 

 

このページの先頭へ戻る