脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶） - Qiita
$.ajax({ url: "http://jsrun.it/assets/E/H/Z/t/EHZt3", success: function (data) { $("#results").append(data); }, error: function () { alert("読み込み失敗"); } }); // urlを適当なものに変更すると「読み込み失敗」のアラートが出ます。 jsdo.itで実行する これはInternet Explorer 6(故)が猛威を振るっていた時代の、jQuery1.4くらいの旧い書き方です。「成功したらさらに非同期通信をしたい」「失敗したら別の処理をしたい」等、他の処理が多くなるに連れてコールバック地獄に陥り、バグの温床となります。 もう辞めましょう。。。 イマドキの$.ajax()はこう書く イマドキは、jQueryのDeferredオブジェクトのth
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
jQuery：要素の変数格納と .clone() で複製
cloneした要素を繰り返し使い回すようなコード書こうとして、なぜか .append() しても 1個しかでない。２回以上使い回せない！という状況になり、改めて使い方を確認してみたのでそれをメモしておきます。 要素を変数に入れて .appendTo()まずは基本から。 .clone() せずに 要素を変数にいれて .appendTo()してみます。 利用したHTML <div id="demo#" class="demoBlock"> <p class="btn-alert"><button>alert</button></p> <p class="btn-clone"><button>clone</button></p> <div class="clone-block"></div> </div>
Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する - Qiita
Deferred でない場合 コールバック処理を従来の success, error, complete で指定する方法。 こんな感じでプロジェクト特有の共通処理などを追加していることが多いと思います。 実装 var myAjax = function(arg) { var opt = $.extend({}, $.ajaxSettings, arg); opt.success = (function(func) { return function(data, statusText, jqXHR) { console.log('success時の共通処理 ...'); if (func) { func(data, statusText, jqXHR); } }; })(opt.success); opt.error = (function(func) { return function(j
jQuery Deferredのpipeにおける返り値の扱い
pipeは返す値で繋ぐ処理のパラメーターが変わるのだけど、たまにしか使わないので毎回動作を忘れてソースを見ている。バージョン1.7.2での動き。 deferred.pipe(function(data) { ... return ?; }); 以降の処理で引数が不要なら何も返さなくていい。引数が1つの場合は return foo; のようにそのまま返せばいい。複数の引数を送る場合はDeferredオブジェクトを返さないといけない（引数が1つの場合は同じ処理を裏でやってくれている）。 return $.Deferred().resolve(foo, bar); // コンテキストどうでもいい return $.Deferred().resolveWith(this, [foo, bar]); // どうでもよくない 何もせずにそのまま値を引き継ぐ場合は（引き継ぎたいパラメーターでresolv
ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="
jQueryプラグインをうまいことカプセル化する設計方法-jamadam weblog2
“There are only two hard things in Computer Science: cache invalidation and naming things” だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。 [2011.02.02追記] 2011年はsub()方式がおすすめです。 jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。 /** * jquery.myplug基本形 * * SYNOPSIS * * $('#target').myplug(); * $('#target').myplug({param1 : val1, param2 : val2}); */ ;(function($)
jQuery.extend() メソッドの使い方まとめ ｜ Tips Note by TAM
知っている人には当たり前のことかもしれませんが、使い方をまとめておきます。 jQuery.extend() は、基本的には複数のオブジェクトをマージして返してくれるメソッドです。 (プラグインのソースで、デフォルトの設定値を上書きする時などによく見かけますね） jQuery.extend(target[, object1][, objectN]) こんな感じで使います。 オブジェクト a の内容と b の内容をマージしたいとき、 var a = { id: 1, name: 'TAM' }; var b = { name: 'TAM-new', hobby: 'football' }; $.extend(a, b); console.log(a); // 結果: // { // id: 1, // name: "TAM-new", // hobby: "football" // } $.e
AjaxZip2 | Webサイト制作支援 | ShanaBrian Website
AjaxZip2の使用方法をご紹介しています。 AjaxZip2はフォームで郵便番号から住所を自動入力が可能なJavaScriptライブラリです。 prototypeとjQueryの両方に対応しています。 公式サイト 目次 デモ ダウンロードと設置 JavaScriptの読み込み dataディレクトリのみ共通して使用する場合 HTML設定 ダウンロードと設置 こちらからダウンロードして解凍します。 解凍後、ajaxzip2ディレクトリを任意の場所に設置します。 なお、異なる階層で共通して使用できませんのでご注意ください。 ただし、dataディレクトリ（郵便番号データ）のみ共通で使用可能です。 設定方法はこちらをご覧ください。 JavaScriptの読み込み 以下のタグを<head>内に記述します。 パスは環境により変更してください。 <script type="text/javascrip
jquery.cookieでjsオブジェクトをJSONで保管するメモ - すたら日記
要望 フォームの入力情報をクッキーに保存したい。 1つのクッキーに複数の項目の情報をまとめて保存したい。 解決策jQueryプラグインの"jquery.cookie"を使うことで全て解決しました。 外部: https://github.com/carhartl/jquery-cookie デモ: https://codepen.io/sutara79/pen/GBdKQX 解説自動JSON化のオプションを有効にすれば、JavaScript側では連想配列として、クッキー側ではJSON形式の文字列として扱えるように自動で変換してくれます。 // 自動JSON化を有効に $.cookie.json = true; // 連想配列をJSONで保存 var hash1 = { ... } $.cookie('cookie1', hash1); // JSONを連想配列に復元 var hash2 =
いつの間にか1.10をリリースしてるjQueryについていけてない1.4くらいまでの知識しかない人が見るとちょっとはマシになるページ | natrium51g
いつの間にか1.10をリリースしてるjQueryについていけてない1.4くらいまでの知識しかない人が見るとちょっとはマシになるページ jQueryのリリースペース早くね？デカ目の機能をdeprecatedにし過ぎじゃね？ そんなことを考えていたらタイムリーに「ひさびさにUIをつくらなくちゃいけなくなったんだけどさー、jQueryって1.4の頃と大して変わってないでしょ」とかいうタワケがいまして、まあ実際にやらせて痛い目にあえばいいし、ちょっとミサワ風だったので「そうだね」とか言ってほっとこうと思ったんですが、あとで面倒くさくなりそうだったので教えたことの記録と、また聞かれないための予防線としてメモしておきます。 個人的にインパクト大だと思った変更のみをまとめたので、1.4くらいの知識の人がなんとなく知ったかぶりを出来るくらいになれば大成功です。 細かい点は自分で調べろというための情報源 バ
Knockout.js で jQuery UI ‘sortable’を使う | webシステム開発会社よりフリーランスのSEプログラマースコブト
前回に引き続き、勉強中の Knockout の記事です。 今回は、リッチなUIを手軽に実装できる jQuery UI との組み合わせを検証してみました。 jQuery UI ‘sortable’ とは sortable とは jQuery UI に含まれる機能で、リスト要素などの各アイテムをドラッグ＆ドロップで並び替えできるようにするものです。 sortable の動きについては jQuery UI Demos & Documentation を見ていただければわかると思います。 Knockout と組み合わせる デモはこちらです（別画面で開きます） JSFIDDLE でも公開しました Knockout で jQuery UI などのプラグインをバインドで実行できるようにするため、カスタムバインディングを作成します。 今回は、名前もそのまま「sortable」というカスタムバインディングを
event式autoKana.jsの紹介 - KAYAC engineers' blog
すでに若干乗り遅れてる感じもしますが、読み仮名の自動入力がはやっているようなので乗っかってみます。 サンプル （IE7,FF2,safari3.1で動作確認） お気づきの方もいるかもしれませんが、これまでの記事（１，２，３）はこのライブラリを作る過程で発見したことのまとめです。 で、このライブラリも結局は読み仮名の自動入力なんですが、今までのautoKana.jsと違ってsetInterval（or setTimeout）を使用していません。 ではどのようにして読みを取得しているかというと、IE,safariではkeyup、FFではtextイベントを使用してキー入力を取得し、その時点のひらがなから読みを認識しています。 この方法だとtimerをまわす必要がないのでブラウザの負担も軽く、高速でキーを入力されても取りこぼしもなく、イベント駆動なのでコードが短くなる等の利点があります。 ただ、o
jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。） えらい！ jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iDangero.us
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
jQuery trigger file input
GitHub - hkauchi/furigana.js
Page not found - BigBinary