各要素のblurイベントに関数をbindします。 blurイベントは通常、要素がマウスなどのポインティング・デバイスやタブキーなどでフォーカスを失ったタイミングで発生します。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。
form要素やオブジェクトの値をシリアライズします。 この関数は.serialize()のコアにあたるものですが、単体で個別に使っても有用な場面があるでしょう。
jGlycyを使えば、スクリプトを記述する必要は一切ありません。 <div jg="cycle"> <img src="/jglycy/img/muuu_01.gif" width="200" height="200" /> <img src="/jglycy/img/muuu_02.gif" width="200" height="200" /> <img src="/jglycy/img/muuu_03.gif" width="200" height="200" /> </div> これだけ。 「コードを1行も書かずに、リッチなページを」 が、jGlycyの目指すところです。 バリエーションも自在。
第一引数に渡した値が配列中にあれば、そのインデックスを返します。 例え該当する値が複数あっても、最初に見つかった時点でその値を戻します。 値が配列中に見つからない場合は、-1を返します。 サンプル サンプル1 var arr = [ 4, "Pete", 8, "Pete", "John" ]; $("span:eq(0)").text(jQuery.inArray("John", arr)); $("span:eq(1)").text(jQuery.inArray(4, arr)); $("span:eq(2)").text(jQuery.inArray("Pete", arr)); $("span:eq(3)").text(jQuery.inArray("David", arr));
jQuery 1.3より。 開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。 フィルタにマッチすれば、開始要素そのものが返る場合もあります。 ルートドキュメントまで辿ってもマッチする要素が無い場合、戻り値はnoneになります。 closestは、特にイベント操作で便利です。
$関数のみならず、jQueryオブジェクトも含めて完全にグローバルの名前空間から除去する。運用は慎重に行うこと。 これは、上記のnoConflict()を更に極端にして$関数だけでなくjQueryオブジェクトも、先に定義された動作に戻してしまうものである。 これを使わなければいけないケースは極めて稀だと考えられるが、例えば複数のバージョンのjQueryを混在して使わなければならないような場合だとか。あるいは、jQueryオブジェクトへの拡張がConflictしてしまった場合などに必要かもしれない。
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。(下記サンプル参照) そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。 これはおそらく、最も重要なイベントになります。殆ど全てのJavaScriptはDOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。 ready関数にコールバック関数を渡してやります。コールバック関数の引数に$エイリアスが来るので、これを用いることでグローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。 この関数を使う場合、bodyのonloadイベントには何も書かないようにしてください。readyイベントが実行されなくなってしまいます。 $(document).readyを用いてもかまいません。複
要素集合から引数にインデックスを指定し、ひとつだけの要素を選択する。 インデックスは0から全要素数-1までの連番。
Index of Semooh jQuery Sample Site 画像 1.画像を切り替える(フェード) 2.画像を切り替える(フェード2) 3.画像を切り替える(サイズ、フェード) 4.画像を切り替える(スライド) 5.画像を切り替える(奥行き) 6.画像を切り替える(サイコロ) 7.画像を切り替える(シャッター) 8.画像を切り替える(カルーセル) 9.画像を切り替える(色々) 10.画像の一部分を拡大する 11.縮小した全景で画像を見る 12.画像をパノラマ風に表示する 13.画像を反射する 14.LightBoxを表示する 15.画像にマスク処理を施す 16.マウスオーバーで画像を拡大表示する 17.透過PNGをIE6でも表示させる スタイル 1.マーキーを滑らかに実装する 2.クリックできる範囲を広げる 3.要素の高さを最大のものに揃える 4.グラデーションを作成する 5.文
各要素に引数で指定したコンテンツを追加する。 これは、全ての要素に対して appendChild を行うことに近く、操作後はDOMに要素が追加された状態になる。
<p> Hello, <span>Person</span> <a href="javascript:;">and person</a> </p> <button>Call empty() on above paragraph</button> $("button").click(function () { $("p").empty(); });
最初の要素の外部横幅(border、paddingを含む)を取得します。 オプションにmarginを指定してやることで、横幅にmerginを含めることもできます。 この関数は、要素の表示/非表示状態にかかわらず機能します。 div { width: 200px; border: 3px solid black; padding: 2px; margin: 5px; } $('div:first').text('outerWidth: '+$('div').outerWidth()); $('div:last').text('outerWidth with margin: '+$('div').outerWidth({margin: true}));
HTTP通信でページを読み込みます。 この関数はjQueryにおけるAJAX通信の基本部分で、実際には$.getや$.postといった関数を使った方が、容易に実装できます。 但し、これらの抽象化された関数は実装の容易さと引き換えに、エラー時のコールバックなどの複雑な機能を失っています。そのような処理を実装したい場合は、やはり基幹であるこの関数を用いる必要があります。 $.ajax関数は、戻り値として XMLHttpRequestオブジェクトを返します。殆どの場合、このオブジェクトを直接操作することは無いと思われますが、例えば投げてしまったリクエストを中断する場合など、必要であれば利用して下さい。 この関数は引数をひとつだけとりますが、実際にはハッシュで、キーと値の組み合わせにより多くのオプションを受け取ります。 以下にその一覧を載せますので、参考にして下さい。 async / boolea
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
日本でも人気の高いprototype.jsのようなライブラリを、既に用いてサイト構築をしている人も多いかと思います。 しかし、新たにjQueryも試してみたい。あるいはjQueryで作られたライブラリを導入してみたい...というような場合、最も問題になるのは「$」関数の扱いです。 prototype.jsにおいて、$は"document.getElementById"に代わるもので、非常によく使われます。 一方でjQueryでは核であるjQueryオブジェクトのことで、これを使わずにjQueryのコードを書くことは、ほぼ無いでしょう。 これらを共存させるには、jQueryの"noConflict"を使います。 全ての箇所で$をprototype.jsの動作をさせる場合 次のように記述します。 <script src="prototype.js"></script> <script src
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く