もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
HTML5 の placeholder 属性を jQuery でクロスブラウザに
2011-09-23更新: 一部を修正して Gist に置きました。 フォームの入力フィールドにあらかじめテキストを表示させておく「プレースホルダ」。ブラウザの検索バーなんかに見られるような、フィールドが空のときは薄く文字が表示されていて、フォーカスすると消えるあれです。このプレースホルダの機能、HTML5 では input 要素や textarea 要素の placeholder 属性で簡単に実現できます。 <label>お名前 <input type="text" name="fn" placeholder="山田 太郎"></label> しかしながら、この placeholder 属性をサポートしているのは今のところ Safari と Chrome のみ。そのほかのブラウザでは無視されてしまいます。そこで、この placeholder 属性をクロスブラウザで扱えるようにする jQu
jQuery：jQueryでsubmit（サブミット）する方法 | raining
jQueryを使用し、フォームの値をsubmitする方法をメモします。 送信したいデータを変形や追加、バリデーションのチェックなど jQueryやjavascriptを使用するとデータを送信する前に処理することが可能です。 色々な用途で使用できます。 いつも忘れてしまうので、jQueryでformをsubmitする方法と javascriptでformをsubmitする方法をメモします。 ■ jQueryでsubmitする方法 【jQuery】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#form1').submit(funct
jQueryの必要としない機能を削除して軽量化できるオンラインサービス -jQueryConfig
jQueryを使用する時、毎回全部の機能を使用していますか？ 必要としない機能を削除して、あなたが使用する機能だけのjQueryを作ることができるオンラインサービスを紹介します。 jQueryConfig jQueryConfig -GitHub jQueryのバージョンは、2.1.4, 1.11.3, 1.8.3 の3つに対応（2015年11月現在）しており、チェックボックスを操作するだけで簡単に自分が必要としない機能を削除して、軽量化されたjQueryをダウンロードできます。 jQuery 2.1.4 フル版 上のバーはjQueryの各機能とファイルサイズで、下のチェックボックスで必要としない機能のチェックをはずします。 最適化の助言 各モジュールには、下記の機能が含まれています。 Eventモジュール .on()と.off()メソッド、すべてのイベント機能、.click()や.mou
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
20160930 フロントエンド高速化 業務編 (社内勉強会)
スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。 プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です
jQuery プラグインの書き方メモ - tacamy--blog
勉強のために超簡単な jQuery プラグインを書いてみたら、凄腕 JSer の方々に色々とご指導ご鞭撻いただいたので、忘れないようにメモる。 オレオレ jQuery プラグインテンプレート (function($) { $.fn.pluginName = function(options) { /** * Option */ options = $.extend({ opt1: 'val', opt2: 'val' }, options); /** * Core */ return this.each(function() { // Process }); /** * Method */ function _methodName() { }; }; }(jQuery)); /** * Execute */ $(function() { $(".foo").pluginName(); })
画像のロード完了イベントを取得してみる
JavaScriptネイティブな実装 Image() クラスに、イベントハンドラ onload() が用意されているので、これを利用する。 <script type="text/javascript"> function cont_loadImage( imageSrc ){ var img = new Image(); img.onload = function(){ alert( 'Image is NOW loaded!'+"\n" +'Original width: '+this.width+'px'+"\n" +'Original height: '+this.height+'px'+"\n" ); var targetBox = document.getElementById('cont_image'); targetBox.innerHTML = ''; targetBox.
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
jQuery 便利なonを使おう（on click) - Qiita
対象者 click()とon('click', function())の違いが分からない人。 click()しか使ったことのない人。 何も考えずにon('click', function())を使っている人。 onの有用性 クリックイベントを書くとき
イメージが読み込み完了した時点のイベントを取得 - Qiita
bindを使う。 ここでは、ページ内のすべての画像が読み込まれてから処理を行うよう、全体からimg要素の個数を取得後、ループで各img要素のloadをbindし、完了した個数カウントと全体の個数カウントがイコールになったときに、処理が実行するようにしている。 サンプルコード <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>read image</title> </head> <body> <img src="http://f.st-hatena.com/images/fotolife/B/Borom/20140927/20140927211300.jpg" class="image-ready"> <img src="http://f.st-hatena.com/images/fotolife/
jQueryのbindとonの違い - Qiita
$( "body" ).on( "click", function() { alert( "Goodbye!" ); }); 本来のJavaScriptイベントハンドラは、onclick、onblurのように頭にonをつけます。 しかし、jQueryではonを付けずに使用していますよね。 このonを使うことにより、本来のJavaScriptのようにonclickと指定しているように見えるというのは、個人的には利点だな、と思っています。 もちろん、そんな理由でbindからonに名称が変更されたというわけではありません。bindの問題点を改善して改善してできた機能を統合してできたのが、onです。オールマイティな優れものです。 とはいえ、機能が増えたことで、「引数が増えたー」「ややこしいー」と思うかもしれませんが、考え方によっては、そうでもありません。特にlive、delegateを知らない、使
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
jQueryでクリック(click)での、連打を防止して アニメーションが終わるまでクリックボタン無効にする | 9ineBB
HOMEWEB制作系コード・プラグインjQueryでクリック(click)での、連打を防止して アニメーションが終わるまでクリックボタン無効にする jQueryでスライドやらギャラリーを自作していると 画面の移り変わり、画像の入れ替え等にアニメーションを使うことが多いです アニメーションが動いている間に ボタンをクリックされてしまうと、連続して実行されたり 中断されたりで、意図しない動きを起こすことがあります 見栄え的にもブサイクです そこで、アニメーションが終わるまでそのボタンを無効にして アニメーションが終わったら再び、ボタンとして機能するように clickが出来るようにします jQueryで連打を防止する var click_flg = true; $(".next").on('click',function(){ if(click_flg){ //ボタンを一旦無効に click_f
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
大流行した画像のブラー加工をJSでささっと実装出来る「Vague.js」が面白い。
ブラー加工とは画像をぼやけさせる加工の事を言うのですが、この加工した画像を使いランディングページを作るアプリが多くあります。ぼやけさせる事により明確にユーザーに見て欲しい文字に焦点を当てられます。 さて、そんなブラー加工ですがPhotoshop等の画像編集ソフトを使わなくてもJS上で加工して表示出来るプラグインがありますので、今回はその「Vague.js」を紹介したいと思います。 Vague.js Vague.js このページ自体にブラーがかかっていますので、そこから実装方法も見れます。 Vague.jsの使い方 Vague.jsのgitHubに行ってファイルをダウンロードして来ましたら次は実装ですね。 こんな感じのソースコードで動きます。 実装ソースコード <!DOCTYPE html> <head> <title>Vague.jsの最小実装コード</title> </head> <bo
[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore
デモページ：Dynamic content コンテンツはさりげないアニメーションで追加・削除されます。 Salvattoreの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/salvattore.js"></script> Step 2: HTML HTMLは単にパネルを並列に配置するだけで、ラッパーに「data-columns」を加えます。 <div id="timeline" data-columns> <div>Item #1</div> <div>Item #2</div> <div>Item #3</div> <div>Item #4</div> <div>Item #5</div> </div> Step 3: CSS コラム数はスタイルシートで設定します。 レスポンシブ対応にするには、Media Querie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【誤りあり】jQueryで追加した要素を操作するにはon()メソッドで - Qiita
