JavaScript Hello World! #1
「window.onload = function() {…}」では、windowオブジェクトのonloadイベントを登録しています。
このイベントは、ブラウザにウェブページがロードされたときに実行されます。
onloadイベントでは、documentオブジェクトのgetElementById()メソッドを実行してボタン要素を検索します。
このメソッドの引数には、<button>タグのid(btnSay)を指定します。
「btn.onclick = function() {…}」では、ボタンのクリック時のイベントを登録しています。
このイベントは、ボタンをクリックしたときに実行されます。
ここでは、alert()関数で警告ダイアログに「Hello World!」を表示します。
Download»»
jQuery Hello World! #2
「$(document).ready(function() {…})は、JavaScriptの「window.onload = function() {…}」と類似しています。
window.onloadイベントは、Webページがブラウザにロードされたときに発生しますが、
$(document).readyもWebページがブラウザにロードされたときに発生します。
ただし、jQueryのreadyイベントは、Webページに配置されているイメージなどがロードされる前に発生するといった違いがあります。
ここでは、readyイベントでボタンのクリック時のイベントを登録しています。
jQueryでボタン要素を検索するにはセレクタを使用します。
jQueryのセレクタは、スタイルシート(CSS)のセレクタと同じ意味ですから理解しやすいと思います。
ここでは、<button>要素のid(btnSay)を指定して検索します。
この場合、idの先頭に「#」を付加して「$('#btnSay')」のように記述します。ボタンにクリック時のイベントを登録するには「.click」を使用します。
ボタンがクリックされたときに警告ダイアログを表示するには、ボタンのクリック時のイベントにalert()関数を追加して「Hello World!」を表示します。
Download»»
Google CDN #3
jQueryのライブラリをランタイム時にダイナミックにロードするには、GoogleのAJAX Libraries APIを利用します。
jQueryのライブラリをダイナミックにロードするには、head要素にscript要素を追加してsrc属性に
「http://www.google.com/jsapi」を設定します。
2個目のscript要素を追加したら、次のようなコードを入力します。
google.load()の引数1には「jquery」を指定します。
引数2には、jQueryのバージョン番号(1.2.3、1.2.6、1.3.0、1.3.1、1.3.2)を指定します。
引数3には、ライブラリの種類（開発版／縮小版）を指定します。
開発版をロードするときはuncompressedオプションに「true」を設定します。
オプションを省略したときは、縮小版をロードします。
ライブラリのロードが完了した、google.setOnLoadCallbackイベントが実行されます。
このイベントハンドラにjQueryのコードを記述します。
Download»»
Microsoft CDN #4
jQueryのライブラリをランタイム時にダイナミックにロードするには、MicrosoftのScript Loaderを利用します。
jQueryのライブラリをダイナミックにロードするには、
head要素にscript要素を追加してsrc属性にMicrosoft Ajaxのstart.jsファイルのパス「http://ajax.microsoft.com/ajax/.../Start.js」を設定します。
2個目のscript要素を追加したら、次のようなコードを入力します。
Sys.require()では、jQuery 1.3.2のライブラリをMicrosoft Ajax CDN経由で非同期にロードします。
jQuery 1.3.2のロードが完了したら、Sys.onReady()イベントハンドラが実行されます。
このイベントハンドラにjQueryのコードを記述します。
ここでは、div#msg要素に「Welcome…」メッセージを表示しています。
Download»»
Selectors Basics #5
jQueryでxhtml要素を検索するには、xhtml要素のid属性を使用します。スタイルシートと同様、セレクタにidを指定するときは「#」を付加して「#id」のように記述します。
たとえば、次のようなbutton要素を検索するにはjQueryのセレクタに「$('#btnAlert')」のように記述します。特定の要素のidを検索するには、jQueryのセレクタに「$('button#btnAlert')」にように要素を付加することができます。
Download»»
Selectors Hierarchy #6
たとえば、次の例ですべてのspan要素を検索するにはセレクタに「$('span')」のように記述します。この場合、div1とdiv2要素にネストしているspan要素が検索されます。div1要素のspan要素を検索するには「$('#div1 span')」のように記述します。同様に、div2要素のspan要素を検索するときは「$('#div1 span'))」のように記述します。「$('#div2 span')」のように記述したときは、「div2」のすべての子孫を検索します。したがって、span要素はdiv2直下の子孫である必要はありません。div2直下に配置されているspan要素(子供)を検索するときは後述する「$('#div2 > span')」のような構文で記述します。
Download»»
Selectors Basic Filters #7
「:first」と「:last」のフィルタは、検索結果の先頭と最後の要素を絞り込みます。これらのフィルタは、検索するhtml要素に付加します。
たとえば、次のようなtable要素から先頭行と最終行を検索するには、「$('tr:first')」「$('tr:last')」のように記述します。ここでは、先頭行の背景色を「赤」、最終行の背景色を「黄」に設定しています。
Download»»
Attributes css api #8
たとえば、次のようなdiv要素からスタイルシートの「background-color」プロパティの値を取得するには「$('div').css('background-color')」のように記述します。特定のdiv要素のスタイルシート情報を取得するには「$('div:eq(0)').css('background-color')」のようにフィルターを使用して絞り込みます。ここでは、each(function({…}))を使用して個別のdiv要素を処理しています。each()の処理でカレントのdiv要素を参照するには「$(this)」を使用します。「$(this).css('background-color')」では、カレントのdiv要素の背景色を取得しています。「$(this).text(…))」では、カレントのdiv要素に背景色を追加しています。これでdiv要素の背景色(Red/Green/Blue)が表示されます。
Download»»
addClass, removeClass, toggelClass api #9
たとえば、次のdiv要素のclass属性にスタイルシートのクラスを追加するには「$("div").addClass("red")」のように記述します。特定のdiv要素のclass属性にクラスを追加するには「$("div:eq(0)").addClass("red")」のようにフィルターを追加して絞り込みます。div要素のclass属性にすでにクラスが設定されているときは、そのクラスの後ろに空白区切りで追加されます。複数のクラスを追加するときは空白区切りで「.addClass("red green blue")」のように記述します。
Download»»
attr, removeAttr api #10
ここでは、anchor要素のhref属性を取得して変数hrefsに格納しています。each()の処理が終了したらdiv要素に変数hrefsの内容を追加して表示します。変数hrefsにhtml要素が含まれるときは.html()を使用してdiv要素に挿入します。hrefsにテキストデータのみ含まれるときは.text()を使用してdiv要素に挿入します。これで、hrefsに格納されている内容がdiv要素に表示されます。
Download»»
text(), text(value) api #11
たとえば、anchor(a)要素のアンカーテキストを取得するには「$("a").text()」のように記述します。div要素にテキストコンテンツを挿入するには「$("div").text(…)」のように記述します。ここでは、anchor要素から取得したアンカーテキストをdiv要素に挿入して表示します。
Download»»
html(), html(value) api #12
たとえば、div要素からhtmlコンテンツを取得するには「$("div").html()」のように記述します。div要素にhtmlタグを含むコンテンツを挿入するには「$("div").html("太字");」のように記述します。コンテンツにhtmlタグが含まないときは「$("div").text("太字")」のように.text()が使用できます。
この例では、div1のhtmlコンテンツを取得してdiv2に挿入します。div1には「jQuery 1.3.1」が宣言されています。div1のspan要素には「color: Red」、div2のspan要素には「color:Blue」のスタイルシートが宣言されています。div1からdiv2にhtmlコンテンツをコピーすると、div2のコンテンツ「jQuery 1.3.1」が青で表示されます。
Download»»
val(), val(value) api #13
たとえば、テキストボックスのvalue値を取得するには「$("input:text").val()」のように記述します。特定のテキストボックスのvalue値を取得するには「$("input:text:first").val()」のようにフィルターを使用して絞り込みます。
テキストボックスにvalue値を設定するには「$("input:text").val(…)」のように記述します。特定のテキストボックスにvalue値を設定するには「$("input:text:last").val(…)」のようにフィルターを使用して絞り込みます。
この例では、1番目のテキストボックス(input type="text")のvalue値「jQuery 1.3.1」を2番目のテキストボックス(input type="text")のvalue値にコピーしています。
Download»»
click events #14
たとえば、button要素のクリック時のイベントを登録するには「$("button").click(function() {...})」のように記述します。「function() {…}」には、ボタンをクリックしたときの処理を記述します。イベント処理でクリックイベントがトリガーになった要素を参照するには「this」を使用します。
次の例では、div、span、anchor(a)要素にクリック時のイベントを登録しています。この場合、div、span、a要素のコンテンツをクリックすると、ここで登録したイベント処理が実行されます。クリック時のイベント処理では、「$(this)」を使用してイベントがトリガーになった要素(div, span, a)を参照して「.text()」で、トリガーになった要素のコンテンツを取得します。そして「$("p").text(…)」で、取り込んだコンテンツをp要素に挿入して表示します。
Download»»
hover events #15
次の例では、div要素にhoverイベントを登録しています。hover()の引数1に指定したoverイベントでは、div要素のclass属性に「hilight」を追加して背景色を「#ffdddd」に切り替えています。引数2に指定したoutイベントでは、div要素のclass属性から「hilight」を除去しています。この場合、div要素の背景色がデフォルトの「白」になりますので背景色が消えた状態になります。
hover()のover/outイベントで、jQueryのfadeIn()、fadeOut()、slideDown()、slideUp()、animate()など(※)を使用するとマウスの動きに合わせてアニメーション化することができます。
Download»»
focus/blur events #16
次の例では、<form>…</form>タグ内に配置されているテキストボックスにfocus()とblur()のイベントを登録しています。そして、テキストボックスがフォーカスを取得したときは、そのテキストボックスをハイライトします。テキストボックスがフォーカスを喪失したときはハイライトを消します。
<form>…</form>内に配置されているすべてのテキストボックスにフォーカス取得時のイベントを登録するには、「$("input:text").focus(function(){…})」のように記述します。同様に、すべてのテキストボックスにフォーカス喪失時のイベントを登録するには、「$("input:text").blur(function(){…}」のように記述します。
Download»»