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.Deferred() | jQuery API Documentation
Description: A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. version added: 1.5jQuery.Deferred( [beforeStart ] ) The jQuery.Deferred() factory creates a new deferred object. The jQuery.Deferred method can be passed
jQuery
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
jQuery Documents Main Page - jQuery
jQuery API jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center. If you're updating to a newer version of jQuery, be sure to rea
AJAXを同期(Sync)で通信する - lighthouse.log
概要 Ajaxは、皆さんも知っている通り、基本的に非同期で通信します。 ※ そもそもAjaxとはAsynchronous Javascript And XMLの略です。 なので、データ通信や処理をしている間に、同時に他の動作や処理をすることができるため、 不要なローディングを少なくし、より自由にページを構成することができます。 でも場合によっては、Ajaxを同期で通信しなければならない場合もあるので、 今回は、「AJAXの同期通信」について説明します！ 非同期 まずは非同期通信のサンプルです。 $.ajax({ type: 'POST', url: 'test.php', data: "name=lee", success: function(data) { if(data != null) { // Do somothing. } } }); doAnything(); ※ここでdoAn
【jQuery】イベント発火方法 - Qiita
$('button').click(function(){ alert('hello'); })
アップロードするファイルの名前、サイズ、コンテンツタイプを取得する
Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery$("#foo").on('click', function () { $("#bar").empty(); var fp = $("#hoge"); var lg = fp[0] .files.length; var items = fp[0].files; var fragment = ""; if (lg > 0) { for (var i = 0; i < lg; i++) { var fileName = items[i].name; // ファイル名を取得 var fileSize = items[i].size; // ファイルサイズを取得 var fileType = items[i].type;
爆速でわかる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から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
jQuery リファレンス：deferred.resolve
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQuery 3.3登場、約1年ぶりのアップデート。新機能も追加
JavaScriptライブラリとして知られるjQueryが約1年ぶりにアップデートされ、「jQuery 3.3」が1月19日付けでリリースされました。 1つ前のバージョンであるjQuery 3.2のリリースが2017年3月16日で約10カ月前、さらにその前のバージョンであるjQuery 3.1のリリースがそこから8カ月前に遡る2016年7月7日ですので、jQueryはゆっくりながらも着実にアップデートされてきたといえるでしょう。 配列に対してまとめてクラスの追加や削除が可能に 新機能として.addClass()、.removeClass()、.toggleClass()の3つのメソッドが、列挙されたデータに対して利用可能になりました。以下がその例です。 jQuery(elem).addClass([ 'dave', 'michał', 'oleg', 'richard', 'jason',
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等 | Stronghold Archive
どうもこんばんは。今回のTipは【jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等】です。兄弟関係は出現頻度が高いのでメモしておきますね。他にも色々実装する方法がありますが以下の方法が一番シンプルかと思います。 まずは自分以外の兄弟要素を操作する方法です。兄弟関係の中から一つクリックで実行としています。自分以外を対象とする場合【siblings()】を使用します。 HTML（共通） <ul id="ex"> <li>list</li> …. <li>list</li> <li>list</li> </ul> JS $(‘#ex’).children().click(function(){ $(this).siblings().css({‘background’:’#007374′}); $(this).css({‘background’:’none’
text() - jQuery 日本語リファレンス
<div>click <span>hrer</span> to show the result of text().</div> <div>The result is a string that contains the combined text contents of <strong>all</strong> matched elements. </div> <p>Hrer is a paragraph.</p> <div>This method works on both <strong>HTML</strong> and <b>XML</b> documents.<div>Even if it is XHTML as well</div></div> $(document.body).click(function(){ alert($("div").text()); });
【メモ】jQueryで複数組のテキスト置換をしたい : SiGT Web Studio
お気軽にお問い合わせください Webのことでお困りの時は何でもお気軽にご相談ください。 お見積りは無料です。 concierge@sigt.jp 090-3264-1009
jQuery入門道場 - 【jQueryとは？】
1章 jQueryとは？ DOM要素の生成 $ 又はjQueryの基本的な使い方で見たDOM要素の生成機能を見ていきます。とは言え、便宜上この場所に載せていますが、まだ説明していないjQueryのメソッドが出てきますので、一通り読み終えてから、再度このページに戻って来た方が分かりやすいでしょう。 DOM要素の生成 「jQueryの基本」で、DOM要素の生成の説明で、次のようなサンプルを見ました。 jQuery(function ($) { $("<li>三郎</li>").appendTo("#family");}); 「HTMLのタグの文字列」は、セレクターと間違われないようタグから開始します。そうすることで、DOM要素を生成することができます。そして、その生成されたDOM要素を選択しているjQueryオブジェクトが返されます。 しかし、実際の所、生成されるだけでどこかに自動で挿入される
jQueryを使用してtableへ行の追加削除を行う
HTMLをjavascriptから動的に操作する場合、jQueryを使用すると便利です。 本記事では、HTMLの中でも特にtableタグに対して、行の追加･削除を行うためのサンプルを説明します。 単純な追加･削除に加えて、アニメーション処理をつけた場合のサンプルも有ります。 また、本記事の最後に、各処理の動作を確認できるボタンを用意しています。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script> getRowData = function() { var sysDate = new Date(); return '<tr><td>メッセージです</td><td>' + sysDate + '</td><
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.inArray() | jQuery API Documentation
06.GRASSHOPPER
focusの当たっている要素を取得する方法 - 日々精進
