もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js - A Truly Lightweight
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も
jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も iOSやAndroidなどクロスデバイス対応のモバイルアプリケーション開発のためのJavaScriptライブラリ「jQuery Mobile」の最新版「jQuery Mobile 1.4」が公開されています。 CSS内のSVGでアイコンを描画 今回のバージョンの大きな特徴は、これまで画像ファイルを基に描画されてきたアイコンがすべてSVGに置き換えられたことで拡大縮小に対して柔軟になり、Retinaなど高精細な画面でもなめらかな表示を実現したことです。 例えば、jQuery Mobile 1.4でアイコン表示を備えたボタンをChromeのデバッガで見てみると、イメージファイルを示す部分にはSVGのコードがそのまま記述されていることが分かります。 これまであったPNG形
Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. Operate The JSON collection can be sorted, searched/filtered, and paginated/sliced. Write
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
[JS]jQueryのプラグイン33+1選 -2012年10・11月
equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
creatorish.com