jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
何が変わったか（概要） jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。 なお、jQuery 3.0での特に大きな変更点は、次のとおりです。 バージョンの1本化 Deferred機能が「Promises/A+」仕様に準拠 非推奨のload、unload、errorを削除して、onメソッドに統一 カスタムセレクタの高速化 既存コードからの移行 既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
jQuery UI Sortable は並び順を保存しなければ意味がない | hijiriworld Web
jQuery UI はとても便利なライブラリなので使わない手はありません。 ドラッグアンドドロップで要素の並び替えができる Sortable →サンプル1 使い方 必要なJavaScriptファイル ・jQuery ・jQuery UI 実装 > コーディング <ul class="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> > JavaScript $(function() { $( ".sortable" ).sortable(); }); たったこれだけで、ドラッグアンドドロップによる要素の並び替えができるようになります。 オプションやメソッドを設定することでいろいろできます。 リッチなUIって感じですね！ 「で？」 ていうか、 「並び
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
最終日：リンク先のサムネイルを自動的に表示しよう (1/2)
いま見ているWebページからリンクしている他のページを見るには、ハイパーリンクが設定されている文字や画像、ボタンをクリックして実際にリンク先のページへ移動しなければなりません（当たり前ですね！）。リンク先のページがどんなページなのか、いちいちクリックしなくても分かると便利です。 そこで今日は、リンク文字の上にマウスが重なったら自動的にリンク先のページのサムネイル画像を表示するプラグインを作成してみましょう。ここ最近、ブログなどでも見かけるようになった機能ですが、扱いやすいjQueryのプラグインを作成しておけば、既存のサイトへの組み込みも簡単です。 サムネイルを作成するサービスを利用しよう リンク先のページのサムネイル画像を表示させるには、Webサイトのページ内容を取得してサムネイル画像を生成するサービスを利用するのが便利です。こうしたサービスを提供しているサイトはいくつかあります。 ●H
Webページのナビゲーションを自動生成する軽量なjQueryプラグイン・jQuery Tocible
ページの見出しを取得して、サイドにナビゲーションを生成する、というスクリプトのご紹介。jQueryに依存しています。 いわゆる目次のリンクを生成する、というスクリプトです。ドキュメントページなんかに良さそうです。 動作サンプルです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.tocible.js"></script>コアとプラグインを読み込みます。 $('#foo').tocible({ heading: 'h2', //ナビゲーションに組むエレメント subheading: 'h3', //ナビゲーションに組むエレメント navigation: 'nav', //ナビゲーションを生成する場所 title: ''
jQueryでフォーム入力をチェックする ｜ Tips Note by TAM
正規表現（jquery）を利用した入力チェックを紹介します。 正規表現は、文字が一致しているのか、していないかを判定する機能です。 応用としてフォームで入力された文字が条件と一致、不一致をチェックし、 ユーザーに正しい入力を促す方法です。 if文（条件文）を主に使っていきます。 if文についてはこちらを参考にしてください。 【Javascriptの条件文】 http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/condition.html 今回、紹介する例は、チェックするタイミングを入力後に設定します（フォーカスを外したとき）。 $("input[name='hoge']").blur(function(){ if(条件){ //実行内容 } }); 【入力が空の場合】 $("input[name='hoge']").blur(fun
jQueryでthisの子要素を取得するやり方いろいろ | Base Views
公開 2010年6月6日（日） 更新日 2014年8月18日（月） スポンサーリンク jQueryを使っていて、thisとその子要素を同時に指定したい場合がある。 結構いろんなやり方があるみたいで、取りあえず使いやすそうなので下の3通り。 $("hoge",this) $(this).children("hoge") $(this).find("hoge") 一番上がシンプルでいいかと思うんですが、取得したいthis直下の要素名をthisの手前に書くんですね… 使いどころは多そうですが、例えば下みたいなの。「Click1」をクリックしたらその直下の<div>が隠れるようにしたい場合とか。 <ul> <li>Click1 <div> <h2>Menu1</h2> <p>text1</p> </div> </li> <li>Click2 <div> <li>Menu2</li> <li>tex
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、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から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
jQuery リファレンス：on
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
Javascriptで特定のパラメータを取得するjQueryプラグインjquery.url.js
JavascriptでURL中の特定のパラメータgetしたいことがあったのでメモ。 通常Javascriptないし、jQueryでパラメータを取得しようとすると、 var n=document.location.search.substring(1,window.location.search.length); として、&や?の記号をパースして、連想配列にいれて取得しますが、『このパラメータの値だけよこせやっ！』という時はちょっと面倒。 そんな時に大変お役に立ちましたのが このプラグイン、パラメータ以外にもディレクトリや、ディレクトリの階層など、自URLの様々な情報を返してくれますが、今回は特定のパラメータを取得しました。 $(function(){ var url = $.url('http://www.kaasan.info?name=hoge'); url.param('name')
jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法｜BLACKFLAG
TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に 自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが 任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。 サンプルを別枠で表示する ページの最下部までスクロールをすると 追加で要素を読み込みます。 サンプルでは28個の要素を 5個ずつ追加表示しています。 （最後は3つ表示） 全体構成についてまずはHTMLから。 ◆HTML <div id="loadarea"></div><!--/#loadarea--> HTMLには要素を追加させたい箇所に 任意のID（もしくはクラス）を付けた ブロック要素を配置するだけです。 そしてCSSは以下の様になります。 ◆CSS /* #loadarea --
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 | Stronghold Archive
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 どうもこんばんは。今回のtipsは【jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応】についてです。自動読み込みと書きましたが、クリック等の手動も可能です。結構見かける手法ですのでメモしておきます。 自動読み込み用プラグイン【infinitescroll 】 インフィニティスクロール、このプラグインを使えば簡単に自動読み込みを実現してくれます。設置方法も簡単で非常に優秀なプラグインです。 スクロールで自動読み込み <div id="blogBody"> <div class="post">….</div> <div class="post">….</div> <div class="post">….</div> </d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーで吹き出しを出す jQuery | Ri-mode Rainbow
Loading...
http://www.dprog.info/jquery/chrome_jquery_min_map/