jQueryへの依存を外す方法 - dely engineering blog
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ
【翻訳まとめ】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以上
バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
jQueryプラグインのメソッドパターン
jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「
jquery-pjax + WordPressでスニペット集を作ってみた - SUSH-i LOG
Ajaxを利用しつつ、戻る・進むリンクが効くような作りで、Twitterと同じようにHashchangeイベントを使ったことがあったのですが、HTML5ならpushstateを覚えなくては―と思っていた頃にこの記事を読んでjquery-pjaxの存在を知りました。 また、ちょっとしたコードをメモして置く場所が欲しかったので、WordPressと組み合わせてスニペット集を作ってみました。 こんな感じです » Snippets | SUSH-i LOG まだまだ分類分けが中途半端だったり、導線が不十分だったり、ブラウザの進む・戻るを使った時に少し不具合がありますが、何とか形になったかな？と思っています。 クライアントサイド ソースファイルは、defunkt/jquery-pjax – GitHubからダウンロードできます。 クライアントサイドの記述方法は参考リンク先でもご紹介されていますが、こ
Web Design, Interface Design, User Experience | Simple Focus
What does FlowType.JS do? Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width. Addi
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
javascriptとは？知っておきたい基礎知識 - プログラミング学習の窓口
JavaScriptは、htmlとcssで構成したページの動きを操作出来ます。分かりやすい例としては、ボタンやメニューの動き。こういったものもJavaScriptを活用することで実現が出来ます。 Javascriptは非常に人気の高い言語で、JAVAとにていますが別ものです。 ReactのようなJavascriptを応用した技術も普及が進んでおり、今後当分は主流な言語として活用されるでしょう。 The post javascriptとは？知っておきたい基礎知識 first appeared on プログラミング学習の窓口.
画像のプリローダーを使ってみよう！
2012/04/16 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techWebApppreloader Webアプリっぽいものを作るときは、画像などのリソースを読み込むタイミングが、ページを表示したタイミングと同じではなく、ユーザーがボタンを押したり、何かのイベントが始まったり終わったりなど、 任意のタイミング である場合が多いです。 Flashなどのコンテンツでは、最初にページを開いたタイミングで、0%〜100%までのローディング表示が行われますね。 FlashコンテンツがHTMLベースのコンテンツにどんどん置き換わっている 昨今では、こういったローディングの機能も、HTMLベースのコンテンツに求められてきています。 そうしたときに、画像などのリソースを一旦裏で読み込んでおいて、読み込み終わったものから順に表示したり、あるいはすべて読み込み終わっ
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
爆速でわかる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 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
jQuery版window.onload
ですね。docment.readyです。 この実行は、DOM要素の実行を待ってからという意味になるのですが、必ずしも全てのDOM要素を待たずに実行したいケースもあるかもしれません。たとえば、Javascriptで言う、『window.onload』みたいなあれ。 これだけ、簡単ですね。 jQuery版window.onloadの使用例 あまり出番が無いように思えるjQuery版window.onload。 しかし、Ajaxページ読み込みではかなり有効に使えます。 ページ読み込みの例 id hogeのブロックに、あるURLを読み込む例です。 読み込み完了したら、pにhiddenクラスをあてて、かくしてあげたい、Ajaxページ読み込みの典型的な例です。 悪い例 これでも悪くはないのですが、load実行されて、表示が完了するより速くaddClassが実行されてしまうことがあります。 ちょっと重た
jQueryについての所感
昨今jQueryについての所感とつきあい方を考える はじめはPHPとa-blog cmsがメインだったこのブログも、いつの間にかJavaScript（jQuery）とご飯レシピブログという謎な方向への珍走を遂げています。 そんな中、個人的にjQueryとのつきあい方について色々聞いたり思ったりで、だらだらとアウトプットしてみます。オチはつきませんでした。ﾀﾞﾗｧ...('A`) ってこれ、今年の3月に大半書いていて、なぜか8月も末の今頃に加筆修正かけたので色々アレなところあったらごめんなさい！！！もったいないから公開させてください、、てへぺろ(・ω<) なぜjQueryなのか jQuery周辺のノリ（何でもjQuery・コスト感なくjQuery・jQueryスニペット信仰）などに、正直ネガティブな感情抱くこともありますが、素直な気持ちで見ればjQueryはとても効率的だと思います。Web上
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita
以下のスライドを意訳したものです。Compress周りについては触れていません。「いやいや、最新の書き方だともっと良い書き方があるんだよ！」という方のコメントをお待ちしております！ http://www.slideshare.net/paul.irish/perfcompression クエリをキャッシュする // 悪い例 var id = $("#content").data("id"); var itemId = $("#content").data("item-id"); // 良い例 var content = $("#content") var id = content.data("id"); var itemId = content.data("item-id"); // 悪い例 $.each(reallyLongArray, function(count, item) { v
ratween デモページ
ratween CSS3 Transition jQuery plugin 要素にCSS3トランジションを適用します。 MIT ライセンスです。 current ver 0.2.1 作者はKinkumaDesignです。 >>githubからダウンロードする 準備 jQuery と ratweenをインポートします。始めましょう！ <script src="jquery-1.6.2.min.js"></script> <script src="ratween.js"></script> 基本 CSSプロパティをセットできます。 サンプル１ $('#basic1').ratween({left:'300px'});
OKZoom
OKZoom by OKFocus OKZoom is a JQuery plugin that produces a portable loupe of variable size and shape. All other jQuery 'zoom' plugins we have encountered implement a square magnifying area. Ours is a circle. You want a circle. Usage Bind OKZoom to one or many image elements. The easiest way is to have a large image that is sized down using HTML or CSS: the loupe will show the full-size image on h
javascriptのテストのはなし：QUnit | DevelopersIO
こんにちは。ともだです。 今回からはjavascriptのテストネタでいこうと思います。まずは単体テストツールのQUnitについてです。 QUnitはその名から想像される通りで、xUnit系のフレームワークです。javascript用のxUnitフレームワークだと他にはJsUnitが有名ですね。 QUnitはjQuery用のテスティングフレームワークで、そこから派生してトップレベルのプロジェクトになったものです。jQueryを使ってるプロジェクトなら導入しやすいと思います。 という事で早速使ってみます。 ■まず基本 jQueryのライブラリの他にQUnitのライブラリを読み込みます。 CDNはhttp://code.jquery.com/qunit/git/qunit.jsですが、いちいちリクエストを飛ばすのもなんなのでファイルをローカルに置いておいた方が良いかと思います。 次に、html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
狠狠色噜噜狠狠狠狠97,你懂的在线视频,亚洲AV制服丝袜日韩高清
https://qiita.com/takashibagura/items/0411259b072da26e206b