【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
【翻訳まとめ】jQuery 3.0 alpha リリースノート - Qiita
3.0正式版がリリースされたので、新しい記事を書きました 【翻訳まとめ】jQuery 3.0 アップグレードガイド tl;dr jQuery 3.0 alphaがリリース .hide()と.show()に後方互換性のない変更あり（注意！） jQuery.DeferredがよりPromises/A+に準拠 .width()と.height()が小数値を返せるように 非推奨の.load, .unload, .errorや、ajaxの.success(), .error(), .complete()が廃止 requestAnimationFrameの復活 はじめに 2015/7/13にjQuery 3.0 alphaがリリースされました。 http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versio
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
jQueryは有害なのか | POSTD
ずっと「～は有害なのか」という記事を書いてみたかったんです ^(1) 。 まず本題に入る前に、1つ言わせてください。 jQueryはWeb業界の発展に大いに役立った と私は考えています。jQueryがあることで、開発者はこれまで想像もできなかったことをできるようになりましたし、そういった機能をブラウザの製作者がネイティブに実装するきっかけにもなりました（もしjQueryが開発されていなければ、今でもdocument.querySelectorAllは存在していなかったでしょう）。jQueryは、今ある便利なツールを使うことができなかったり、IE8やそれ以下の過去の遺産をサポートしなければならない際に今でも必要になってきます。 しかし、そのようなケースはもはや稀なものとなりました。Web開発者の大半は、マーケットシェアの縮小した古いブラウザをサポートする必要はありません。更に、忘れてはならな
mayonakahimitsukosakuin.com
This domain may be for sale!
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
jQuery.Deferredをちゃんと理解する - とある角度から
ちゃんと理解するために、ちゃんと説明してみた。 jQuery.Deferredは、タスクを管理する仕組み jQuery.Deferredでできることは、以下のような事です。 お仕事の約束をする お仕事が終わったら結果を受け取る 受け取った結果を元に次の作業をする これって、タスク管理ですね。 自分としてはこの書き方が一番理解しやすい気がします。 実は、jQuery.ajax()も内部でDeferredオブジェクトを使っています。 でも、古いjQueryをサポートするために、Deferredオブジェクトを使わない書き方も出来ちゃいます。 Deferredオブジェクトを使わない場合と、使う場合で書いてみます。 Deferredオブジェクトを使わない 従来の、コールバックに次の処理を書いてく感じです。 読み込むURLが増えれば増えるだけ死にたくなります。 Deferredオブジェクトを使う jQ
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
AngularJS 製アプリで jQuery を使いたい | DevelopersIO
本記事で使用している AngularJS のバージョン 1.2.16 angular.element 先日紹介した ng Global APIs の中に angular.element というメソッドが用意されています。 このメソッドは、デフォルトでは "jQuery lite" または "jqLite" と呼ばれる AngularJS が提供する jQuery のサブセット ( 軽量版 jQuery ) オブジェクトを返しますが、ドキュメントを読む限り制限が多く、困ることが少なくありません。 どのくらい制限されているかというと、、、 https://docs.angularjs.org/api/ng/function/angular.element より addClass() after() append() attr() bind() - Does not support namesp
jQuery の.on()をもういっぺん理解してみる - あまり新しくないもの
jQueryのイベントハンドリングには、現在 .on(),.off()のみが推奨されて利用されています。 その基本的な使い方はこんなかんじでした。 $(element).on(event, function() { console.log('event fired!'); }); この場合、対象となる$(element)において指定したeventが発火した時に、コールバック関数が呼び出されます。非常に直感的ですね。 ところで、これは以前の.bind()と全く同じです。 .bind()の場合は、指定したずばりその要素に対してのみ、イベントハンドリングを行います。よって、.bind()が呼び出されたその時点で存在しない要素に対しては、たとえセレクタが一致していたとしてもハンドリングが行われません。 このことを利用すれば、イベントハンドリングをしたいまさにその要素にのみ、たとえその後同じセレクタ
ソーシャルボタンのカスタマイズしたいならSharrreが良い
某氏に教えてもらったんだけど、ソーシャルボタンをカスタマイズしてオリジナルのボタンにしたい場合、SharrreというjQueryプラグインを使うのが良い。 Sharrre - A plugin for sharing buttons 設置簡単コード分かりやすいカスタマイズしやすい挙動安定してるいろんなSNSに対応してるという感じで大変やりやすい。 使い方設置<script src="/js/jquery.sharrre.min.js"></script> こんな感じで設置。 HTML書く<ul class="share-items"> <li class="item facebook" data-url="http://example.com/" data-title="Share"></li> <li class="item twitter" data-url="http://examp
HTMLページ生成時のonclickより前に実行する関数を差し込む - Qiita
Webアプリを作る際にサーバサイドでアプリケーションフレームワークなどを使っている場合、 生成されたHTMLのonclick属性にすでに関数がセットされている場合があります。（wicketとかwicketとか…） jQueryを使って、設定されているクリックイベントよりも前に 任意の関数を差し込みます。 prependEvent = function(target, newEvent) { var clickHandler; clickHandler = target[0].onclick; // イベントを退避 target[0].onclick = null; // クリックイベントをリセット target.click(newEvent); // 差し込み target.click(clickHandler); // その後にオリジナルをしまう };
jQuery#onを便利に使う - Qiita
$(selector).on('click', function(event) { }); くらいしか使ってこなかったのだけど、調べてみたらもっと便利に使える事を知ったのでメモ。多分on()だけじゃなくone()も同じかな。 イベントにネームスペースを付けられる $(selector).on('click.add-button', function(event) { }); $(selector).on('click.remove-button', function(event) { }); // click.remove-buttonだけ削除される $(selector).off('click.remove-button');
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
jQueryのfind()を利用した高速化
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DevDocs
Rome
Flatis