Redirecting… Click here if you are not redirected.
Redirecting… Click here if you are not redirected.
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
過去10年近くにわたってWeb開発でJavaScriptを使用する際の重要な基盤に成長したjQueryだが、モダンブラウザーはかつてjQueryが補ってきた機能の多くを備えている。それでもjQueryを学ぶ必要はあるのだろうか(Dice Newsの記事、 本家/.)。 jQueryで実現可能なことはjQueryを使用しなくても実現できる。jQueryを使用することでシンプルな記述が可能となるものの、JavaScriptのネイティブ機能を直接呼び出す方が高速に処理を実行可能だ。jQueryでは、古いWebブラウザーだけが必要としていたコードを削り、モダンブラウザーのみをターゲットにしたバージョンの開発も進められている。その結果、モダンjQueryライブラリーは以前のバージョンよりも大幅にコードサイズが減少しているが、jQueryを捨てることが正当化されるようにも感じられるという。 多くの人が
Strengths perfect for hidden page content uber light at just over 1kb (minified) flexible width & height image free multiple instances on one page great for login, sign up & alert panels, etc. How To Use Step 1: together with JQuery, include jquery.leanModal.min.js in your page, thusly: <script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script> Step 2: rather than call another
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
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
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
たぶん jQuery を使い始めたばかりの人はあまり使わないであろう .end() メソッドですが、これ、かなり便利なんですよね。 僕も最初はあまり使っていませんでしたが、最近は積極的に使っています。ソースも短くかけるうえに、パフォーマンス的にも良いので是非使っていきたいメソッドです。 今回は、簡単な例で .end() を紹介してみます。 今、次のようなソースがあるとします。アコーディオンさせる場所などで良く見そうなソースです。 <dl id="hoge"> <dt>.end()を使う</dt> <dd> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li> </ul> </dd> </dl> このような html に対して、次のような操作を行いたいとします。 dt 内のテキ
最近blogpartsでもjQueryを使うようになったので、blogpartsでjQueryを使うときのコードをまとめてみました。 (function () { //script tagのsrcの先頭部分を記述(自分のscript tagを取得するのに使用) var domain = 'http://example.com/bp/'; //asから呼び出されるときの名前を指定(外部からはこの名前のみ見える) var name_space = 'blogparts_name_spase'; //各ライブラリをfunction scopeへ展開 var lib = loadLib(), $ = lib.$, jQuery = lib.jQuery, swfobject = lib.swfobject; //読み込まれた時点での最後のscript tagを取得 var $script = $(
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
jQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。 jQuery.extend の呼び出しパターンは次の4通り。 $.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) だいぶシンプルにな
sitepoint から「本当にjQueryが必要ですか?」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
まず結論から、配列と連想配列は分けるべきということがわかりました。悔しくて冗長に書きましたが、それだけですorz jQueryには、$.each という配列を走査するforeach的な関数があります。他の言語でもあるように配列と連想配列を考えなくてもいいと思いこんで、以下のようにしていました。 var array = []; // ここで配列を代入 array["hoge"] = "fuga"; $.each( array, function(i){ alert(i); } // -> 何も表示されません array["hoge"]を走査してくれることを期待していたのですが、反応なし。jQueryのソースを見てみると、jQueryは、lengthプロパティの有無で配列と連想配列を区別していることがわかります。 // $.eachのソース部分から引用 if ( object.length =
$(document).ready(fn) - bindReady() - $.ready() $(document).ready(fn) が bindReady() を、そしてそこから $.ready() が呼び出される三層構造で、これらのメソッドが機能します。 それぞれの役割は、順に以下のようになります。 $(document).ready(fn)……(1/2) DOM読み込み完了通知イベントの登録( bindReady()メソッドの実行 ) $(document).ready(fn)……(2/2) DOM 読み込み完了時の fn の実行と DOM 読み込み完了時に実行させる関数の登録、 bindReady()……(2) DOM 読み込み完了のチェックと完了時の jQuery.ready()呼び出し jQuery.ready()……(3) DOM 読み込み完了を記録するプロパティの設定
jQuery の強力なセレクタでも、唯一、選択できない要素があります。 それが <!-- コメント --> こんな感じのコメント要素です。 取得方法とサンプルコード コメント要素は jQuery オブジェクトとしては取得できませんが、 DOMオブジェクトとしては存在していますので、 jQuery の get(0) を使って、以下のように参照して取得することができます。 html: <div id="commentParent"><!-- コメント --></div> JavaScript: var c = $('#commentParent').get(0).firstChild.nodeValue; これで div の子要素であるコメント要素の nodeValue を取得でき、 c は「\nコメント\n」という文字列になります。(\n は改行を意味します) 注意点 注意しなければならない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く