JQueryをVanilla JSに緩やかに置き換える - Qiita
元々JQueryを多用していた物をVanilla JS（普通のJavascript)に徐々に書き換えていくポイントメモ的な物と関連記事を集めてきたもの。 書き換えの前提 時間がある時に、ちょっとずつ変えていく。一気に変更しない。 普通のJavascriptであれば５年以上は持ちそう。XMLHttpRequestなんて２０年前からある。 JQueryを無理に無くそうとはしない。JQueryじゃなくても良いところを書き換えていく。(ただしJQuery1.xは脆弱性があるので3.xにする） 中途半端に変えるとわかりにくくなる場合もある。時間と人に余裕があるなら最初から作り直すことも考える。 そのままでIE11でも動くようにする。Babelの使用までは考えない。 なるべく自力で書き換える場合の例なので、実際はある程度共通化したり、ライブラリ等を活用した方が良いかもしれない。 ブラウザによって未対応
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
jQueryのdata-*属性キャッシュ仕様と対策
Updated 2014.02.16 / Published 2014.02.16 jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。 取得だけなら問題は起こらない <div id="user1" data-id="1" data-user="Jack" data-date-of-birth="2000-10-01">Jack</div> これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。 //data()の場合 jQuery("#user1").data("id"); // => 1 (数字扱い) jQuery("#user1").d
スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？ | Memorandum Book - written by Ravenala
長いページをスクロールしているとサイドメニューなどが見えなくなるときがありますよね。その場合、他のページに移動するにはヘッダーもしくはフッダー、サイドメニューの見える位置までスクロールしないといけません。結構、嫌になるときがありますよね。。。それを解消するには、ページのどの位置にいてもメニューが見えていればいいのです。簡単ですね。そう、お気づきのとおり「 position: fixed 」です。ただ、メニューの位置を初期位置のまま固定する仕様だとデザインの幅が狭くなりますので、指定した範囲を超えたら固定にするとかにしたほうがいいですね。 スクロールについてこなくなる（位置固定になる）要素を「div.menu」とすると。 html <div id="main"> <div id="column-left"> <div class="menu"> <ul> //省略 </ul> </div>
めちゃくちゃ便利なJavaScript オリジナル関数10選 | tagamidaiki.com
この記事はonextrapixelに掲載された 10 Useful and Time Saving JavaScript Snippets の内容を日本語訳したものです。 JavaScriptはすごい勢いで進化しています。ただ常に全てのサイトに対して最新のJavaScriptを適用していくのはとても骨が折れる作業です。jQueryはとても人気のあるすぐれたライブラリであるが、いくつかのスクリプトは純粋なJavaScriptで書かれています。 この記事では、共通の問題を解決し、あなたの時間を節約することが出来る便利な10のスクリプトを紹介します。これらのスニペットはほとんどがコピー＆ペーストによって使用することが出来ますし、あなたのスクリプトに自由に埋め込んで使うことが出来ます。ぜひ使ってみてください。 役立つ10のJavaScriptスニペット 1, セットされた要素の最大の横幅と高さを取
そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
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
jQueryのソースコードを読むための参考サイト２０選 · DQNEO日記
古いバージョンも参考になる 最新バージョンはコードが1万行くらいあってなかなか大変です。 読み疲れたら、古いバージョンを見て気分転換しましょう。 古いバージョンは実装がシンプルなので、全体像を把握するにはよいかもしれません。 バージョン1.0 (わずか1800行。ver1.7の５分の１です) http://code.jquery.com/jquery-1.0.js バージョン1.1 (2100行) http://code.jquery.com/jquery-1.1.js バージョン1.2 (2900行) http://code.jquery.com/jquery-1.2.js バージョン1.3 (4200行) http://code.jquery.com/jquery-1.3.js バージョン1.4 (6000行。セレクタエンジンがSizzleになりました。) http://code.jq
js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて リファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。 現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
[jQuery] 異なるバージョンのjQueryを共存させる | un-T factory! Interactive blog
un-T factory!のインタラクティブチームのブログです。こんにちわ、榎戸です。 先日とある案件でフロントエンドの実装をおこなっていたときの話です。 ひと通り実装を終え明日はクライアント確認という段階で ステージングサーバにデータをアップしたところ動きません… 弊社テストサーバでは問題なく動いていたものが なぜかステージングサーバだと動かないのです。 時は刻一刻と過ぎていき 空が白み始めたころ原因がわかりました。 jQueryの競合がエラーの原因だったのです。 実装を担当したページでは ほかにも様々なモジュールが読み込まれていたのですが、 モジュールごとに違うバージョンのjQueryを読み込んでいて それが私の書いたスクリプトと衝突していたのです。 調べてみるとこの「jQuery競合問題」には さまざまな解決法がありました。 自分自身の反省をこめて 今
jQuery最高の教科書｜株式会社シフトブレイン 著
「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。 また、jQuery初心者のデザイナーの視点を加えることで、 プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。 通常、サンプルコードは全て出来上がった状態で配布されますが、 本書ではあえて途中までのみを記載しています。 コードに余白を残すことで、サンプルをただなぞるだけではなく、 読み手の工夫次第で様々な表現を生み出すことができるようにしています。 最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。 単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。 シフトブレインの取締役、テクニカルディレ
JavaScriptテンプレートエンジンJsRender 基本のキ
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」:phpspot開発日誌
jVectorMap シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」。 シンプルデザインながら拡大してもクオリティが保たれていて高速レスポンスの地図が実装できます。国ごとのカラーリング等も可能なので、アクセス解析とかそういった部分で使えるのかも。 地図クリックで各種コールバック関数が使えるため、フォーム内で国の選択といった入力補助プラグインとしても機能しそうです。 今後の国際化の流れにおいて便利に活用できる局面があるかもしれません。 マウスオーバーで変色。インタラクティブに動作。クリックしたコールバック設定もOK 国ごとのカラーリングを示した例です。 アメリカだけを対象に描画も可能 ヨーロッパだけもOK 拡大しても新たにデータを読み込むわけでもなく高速なレスポンスが期待できます。 作った方お疲れ様でした＆すごい！ 関連エントリ ドラッグできる地図
jQuery 2.0 Grunt ビルド | DevelopersIO
jQuery 2.0 をビルドしてみよう jQuery 2.0 を自前でビルドしてみます。自前でビルドすることでモジュールを省くことができます。 ビルド ビルドするためにはgruntコマンドを使います。インストールしていない場合は、gruntをインストールしておきます。 gruntについては、nodebrew, npm, grunt 環境構築手順でインストールしてください。 また、grunt -version コマンドでgrunt-cliが入っていない場合は、grunt-cliをインストールしておきます。 $ grunt -version grunt-cli v0.1.7 grunt v0.4.1 ソース取得 githubからjqueryのソースを取得します git clone git://github.com/jquery/jquery.git 依存ファイル取得 npm install
jQuery 1.11 と 2.1 のベータ版1の変更箇所のメモ | 私的なjQuery他
先月 jQuery 1.11 と 2.1 のベータ版１が発表 されましたのでメモしておきます。ベータ版です。 API 自体は前のバージョンと変更されていません。 AMD 対応強化、バグ修正と性能改善がなされているそうです。 利用者にとってはあまり変更されてないように見えますが、 内部的にはかなり変わっています。 AMD(Asynchronous Module Definition)は JavaScript のモジュールの仕様です。 これに対応すると AMD ローダの RequireJS や最近の Dojo などで、モジュールの非同期読み込みを 依存性を考慮して行うことができます。 jQuery 全体としては 1.7 で AMD に対応していましたが、 それをモジュール単位にまで広げたそうです。 CDN から jQuery を読み込んでいる、おそらくは大半であろう 利用者にとってはあまり関係
jQuery2.0がリリースされました | 1000ch.net
jQuery 2.0 Released IE6~8のサポートを切って、再設計されたjQuery2.0がリリースされました。 開発には10ヶ月程かかったそうです。変更点とか、まとめてみます。 ファイルサイズ Uncompressedで1.9と比較してみると… jQuery1.9のデフォルトパッケージ→9597行 jQuery2.0のデフォルトパッケージ→8755行 ファイルサイズはあまり軽量化されていない。 IE対応を削ったところでそこまで軽くならないっていうね。 12%程軽量化されていると共に、パフォーマンスが良くなったそうです。 対応ブラウザ Webkit(もとい、Blink)とGeckoは良いとして、IEは9から動く様子です。 あとはこのあたり。引用します。 Google Chrome add-ons Mozilla XUL apps and Firefox extens
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
ｊQueryのvar jQueryの仕組みについて
次のように書き換えてみましょう。 // function jQuery (selector, context) { return new init(selector, context, rootjQuery); } jQuery.prototype = jQuery.fn; // function init (selector, context, rootjQuery) { /* ...... this.length = 0; ...... */ } init.prototype = jQuery.fn; jQuery.fn.init = init; 本質的にはこういうことです（私が書くなら、こんな感じにすると思います）。したがって、new jQuery と new init は、どちらも jQuery.fn をプロトタイプとする新規オブジェクトを生成します。 --- さて、No.1 には
JQueryのソースコードを読んでJavaScriptを勉強！ - ゆとRubyist日記
最近JavaScriptをさわる機会が多く、もうちょっと勉強しないといけないなと思っています。なので、jQuery(1.7.1)のソースコードを読んでみました。 読んで思ったところをまとめてみたいと思います。勉強したことのまとめです。 jQueryの全体像 (function( window, undefined ){ // Use the correct document accordingly with window argument (sandbox) var document = window.document, navigator = window.navigator, location = window.location; var jQuery = (function() { // (省略) // jQuery の本体のfunctionを作ってreturnする })(); //
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
こんにちは、鴨田です。 今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。 春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。 とはいえ、最近は視差効果で奥行きを表現するというよりも、 単純にスクロールに連動してアニメーションさせることも含めて、 パララックスサイトと呼んでいるが多いのではとも思います。 何かと話題のスマホアプリ「comm」の紹介ページもそうですね。 そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。 今回ご紹介するのは、「ScrollTween.js」というプラグインです。 シーエーモバイル社のコーポレートサイトを作成するために開発され、 せっかくだからということで、公開されているようです。 経緯に関しては、下記スライドをご覧下さい。 パララックスでレスポンシブでJ query mobil
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#9244 (.select() does not select input content on iPhone Safari) - jQuery - Bug Tracker