DOMおれおれAdvent Calendar 2015 – 24日目 最終日です。 jQueryでやってる事をjQueryなしでやるとしたらどうするのってやつです。 $(selector) → document.querySelectorAll(selector) querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。（DOMおれおれAdvent Calendar 2015 – 02日目） これが一番基本ですね。 // jQuery var $el = $('.foo'); console.log($el.length); console.log($el[0]); // DOM var els = document.querySelectorAll('.foo'); console.log(els.length); console.log(els[0])

フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。

なんかはよく使うはず。 だが、ちょっとした関数の使い分けでデバッグ一つもしやすくなる。 なのでほんの少し紹介。 ※以下は全てGoogle Chromeでの実行結果です console.error 赤い！よくあるエラーメッセージ エラーとみなす箇所に是非

<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture***」というイベントが「二本指以上」の操作（ピンチイン、ピンチアウト、回転等）を行っている時

JavaScriptのreplaceの第2引数には関数(function)を使用することが出来ます。 その簡単な使い方と簡単な説明です。 ※ずっと前にも一度書いたことがあったのですが、読み返したときに意味不明状態になるような内容だったので、情報を整理して改めて書いています。 以前のエントリ:JavaScriptのreplaceの関数オブジェクトを渡せることを知った 一般的なreplaceの使い方 一般的なreplaceの使い方は、 第1引数 : 置換え前の文字列(正規表現も可) 第2引数 : 置換え後の文字列(正規表現のグループは、$1,$2,…で指定) になります。 一般的なreplaceのサンプルコード var str = 'hoji1hoji2hoji3'; var str2 = str.replace(/(ho)ji([0-9])/g, '$1ge$2'); alert(str2)