Post by @0-9
jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj
Deferred/Promisesと非同期処理 - 素人がプログラミングを勉強していたブログ
概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装したQというライブラリを使うが、jQuery.Deferredなどもほぼ同じである。 まず、Deferred/Promisesは、関数のreturn、try/catchの非同期版である。 www.example.comの内容を取得し、正しく取得できたら中身を表示し、取得できなければエラーを表示する、というプログラムは 同期的なコードでは、 function get() { var req = new XMLHttpRequest(); req.open('GET',
jQuery Core 1.9 Upgrade Guide
jQuery Core 1.9 Upgrade Guide Overview jQuery Migrate Plugin Changes of Note in jQuery 1.9 .toggle( function, function, ... ) removed jQuery.browser() removed .live() removed .die() removed jQuery.sub() removed .add() .addBack( selector ) replaces .andSelf() .after(), .before(), and .replaceWith() with disconnected nodes .appendTo, .insertBefore, .insertAfter, and .replaceAll Ajax events should be
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 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入門講座 使い方-デリゲートとon
索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
jQuery リファレンス
jQueryはAjaxライブラリの1つです。jQueryはコンパクトなサイズでありながら非常に高機能なライブラリです。2013年時点では、非常に多くのサイトで使用されています。また、スマートフォン用に作成されたjQuery Mobileもあり、これもjQueryをベースにしています。 version 2.0.0β2 リファレンス version 1.9.1 リファレンス version 1.9.0 リファレンス version 1.9RC1 リファレンス version 1.8.3 リファレンス version 1.8.2 リファレンス version 1.8.1 リファレンス version 1.8 リファレンス version 1.8RC1 リファレンス version 1.8β2 リファレンス version 1.8β1 リファレンス version 1.7.2 リファレンス ver
jQueryの.bind(), .live(), .delegate()の違い
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
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
CoffeeScriptでjQuery使うときのメモ
CoffeeScriptでjQuery使うときのメモ CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 投稿日2012年11月19日 更新日2012年12月24日 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p')
jQuery.ajax()の非同期通信で実行順序を保証する方法
jQuery.ajax()の非同期通信で実行順序を保証する方法を紹介します。 具体的には、jQuery.ajax()による非同期通信を連続して実行する場合やjQuery.ajax()メソッドによる非同期通信と他の処理を続けて実行する場合、お互いの実行順序を保証する方法です。 本エントリーではjQuery1.8を使って解説します。その関係で、done()メソッドを使っています。done()がサポートされていないバージョンであればsuccess()に読み替えてください。 １．jQuery.ajax()の仕様 「仕様」という表現は適切でないかもしれませんが、例えばjQuery.ajax()による非同期通信を連続実行した場合、実行結果の順序は不定です。 簡単なサンプルとして、for文の中でjQuery.ajax()を実行するコードを用意しました。 <meta charset="utf-8" />
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
2012-08-13のJS: jQuery 1.8、Prototype.js 1.7.1、JavaScriptの過去/現在/ES.next
JSer.info #83 - jQuery 1.8がリリースされました。 また、 Prototype.js 1.7.1がリリースされています。(tag的には6月5日に切られてた) dom.jsが書き直されていて、今後についても少し書かれています。 Perfection kills » What’s wrong with extending the DOM も一緒に読むと良い気がします。 オライリーから無料の小さな電子書籍が出ています。 どちらも面白い内容なので見ておいて損は無い気がします。 The Past, Present, and Future of JavaScript - O’Reilly Media The Problem with Native JavaScript APIs - O’Reilly Media The Past, Present, and Future of
micro-location.js がいかす - tokuhirom's blog
https://github.com/cho45/micro-location.js URL のクエリをいいかんじに書きかえる処理を JS でするためにいいかんじのライブラリをさがしていたのだが、URI.js はなんか大仰なかんじなので micro-location.js をつかってみた。 jQuery#extend と組みあわせることで、目的の処理は達成された模様。 l = Location.parse("http://example.com/?foo=bar&baz=boz"); # → Location l = l.params($.extend(l.params(), {lat: 4, foo: "hoge"})) # → Location l.href # → "http://example.com/?foo=hoge&baz=boz&lat=4"
おしゃれjQuery、Good Parts、Bad Parts - 素人がプログラミングを勉強していたブログ
jQueryは互換性を保ちつつも洗練されたAPIを取り入れているので、新しく書くときは新しいAPIを使った方が良い。 liveとかセレクタの:hoverとかはBad Partsだ。 jQuery.fn.on / jQuery.fn.off live/delegate/bind/click等は滅びた。全てonを使おう。 また、data引数を使う場合は必ずdataをオブジェクトかnullにする。dataが文字列の場合、関数の場合にセレクタ等と区別がつかないからだ。 $("body").on("click", function (event) { alert("Clicked!"); }, false); また、querySelector/querySelectorAllの登場によって、:hover等のjQuery固有のセレクタは滅びた。validなCSSセレクタと、jQueryのメソッドをch
jQuery++
Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c
「jQueryは大きすぎる」との声に対応、jQueryをモジュラー化、小型化するプロジェクト「jquip」 | OSDN Magazine
jQueryをより小さく、軽量に、モジュラー化することを目指し、「jquip」というプロジェクトが立ち上がった。コア部分である「xjquip.js」ファイルのサイズはミニファイ・圧縮後で4.28KBと小さく、これはjQueryの13％というコンパクトさだという。サイズは小さいもののjQueryの持つ機能の90％を実装、さらにプラグインを追加することでそれ以外の機能も利用できる。 jquipは「jQuery in parts」の略で、「必要なものだけを取り入れる」というコンセプトを持つ。米国在住の開発者、Demis Bellot氏とJey Balachandran氏が始めたプロジェクトとなる。肥大化するjQueryに対し、コードベースの再構成やよりいっそうのモジュラー化のためのフィードバックを送ることを目的にしているとのこと。ライセンスはMIT License。 jquipは$()セレクタや
$.dataはHTML5 datasetのラッパーではない
$.dataはHTML5のdatasetラッパーでない HTML5では要素に任意の属性を追加出来るdata-*属性がサポートされました。仕様では <div data-foo="bar">...</div> data-fooの値はdiv.dataset.fooでアクセスすることが出来ます。ただしdatasetは現在一部ブラウザでしかサポートされていない。。そこでjQueryに存在する$.dataメソッドを使いましょう、という流れなのですが、$.dataをラッパーとして見た場合結構罠がありおすすめ出来ません。中途半端に対応してしまったために誤解されがちですが、$.dataはdatasetのラッパーではありません。 属性値がJSONとして解釈出来る場合、パースして返す <div id="test1" data-json="{"foo":"bar"}">...</div> $('#foo').da
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
