$(selector).on('click', function(event) { }); くらいしか使ってこなかったのだけど、調べてみたらもっと便利に使える事を知ったのでメモ。多分on()だけじゃなくone()も同じかな。 イベントにネームスペースを付けられる $(selector).on('click.add-button', function(event) { }); $(selector).on('click.remove-button', function(event) { }); // click.remove-buttonだけ削除される $(selector).off('click.remove-button');

jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv

僕はiPhoneとかiPadとかmacみたいな流行りものを使用すると蕁麻疹が全身に出てさらに左腕が疼きだすという特異体質(別名：天邪鬼)のため、これまであまりjQueryは使ったことがなかったです。特異体質によるものもあったのですが、僕みたいなグズがjQueryのような便利なものに手を出したら、面倒なコードを書くにもjQuery頼りになって自分でコードを書く努力を怠る習慣が身についてしまうのでは、という懸念があったためです。最近になってようやく、本当に多少ではありますが独力である程度の処理は書けるし読めるようにもなったので、効率化のためにもjQueryをもっと使っていこうという気になったわけであります。 で、そうなるとやはりjQueryが提供する便利関数では全然足りなくて自分でプラグインを書きたくなるわけです。ちょうどjQueryの公式サイトにjQueryプラグインの作り方指南な記事(ht

jQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。 jQuery.extend の呼び出しパターンは次の４通り。 $.extend([deep,] target, obj1, [obj2, [obj3, ...]])$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj) 全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。 以下では分かりやすくするために deep オプションは省略した一覧を掲載する。 $.extend(target, obj1, [obj2, ...]])$.extend(obj)$.fn.extend(obj)$(...).extend(obj) だいぶシンプルにな

Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件

目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ このブログの内容は弊社が運営する有料サービス、CodeGridにてより詳しい内容をご参照いただけます（宣伝） jQuery deferredの使い方 - deferredの基本 | CodeGrid === jQuery1.5から追加された機能。でも全然使ってないので調べた。 jQuery1.5からはdeferredオブジェクトっていうものが登場。 これは、「イケてるキュー（待ち行列）の仕組み～遅延もあるよ～」みたいなものです・・・ 説明がムズイけれどもなんかそんな感じなのです。今までは function fetch(callback){ doAjaxThings('somefile.js

Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-

Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http