メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQuery

<table>の<tr>行をコピーして追加

今回はちょっと違うアプローチ 以前も取り上げましたが、その際は 追加するための行の情報を入力するような方式だったり 行情報を入力する場所が別テーブルになっていたりでした。 jquery-workshop.hatenablog.com 今回は選択行をコピー 前回は追加する行の…

jQuery Migrate 1.4.1 リリース

既にjQuery 3.0リリース評価版が出ていますが、このところjQueryブログのポストが頻繁なのと 3.0の記事はボリュームも多く現在咀嚼中です... jQuery Migrate 1.4.1 がリリースされました。 blog.jquery.com (ところで)そもそもjQuery Migrateとは 当ブログで…

jQuery 2.2.4 と 1.12.4 が出ました

blog.jquery.com 概要 AMD sourceに関するissueの修正 ":visible" セレクターのバグを修正 とのことです。 AMD ソースって何だろう…? Changelogを見るとIE 11のフルスクリーンモードでのiframeタグの問題も解決されているようです。 今回も破壊的変更はない…

jQuery 2.2.3 / 1.12.3 も出てます+npmのleft-pad問題に関して

こちらは2016/04/05なので出たばっかりですね。 2.x系のload()のバグ修正です。 blog.jquery.com また先日、世の中のnpmのビルドがほぼコケた left-pad問題を受けて jQueryとしてのコミュニティアナウンスも出ていますね。 blog.jquery.com 自分がどの依存関…

jQuery 2.2.2 / 1.12.2 が出てたけど気づいてなかった

2016/03/17にjQuery 2.2.2 / 1.12.2が出ていました。 blog.jquery.com 今回はレアケースで起こるバグ修正のようです。 isPlainObjectのバグ修正 IE11でprop()を使用したoptionタグへの値セット 安心してください。 対応ブラウザは今回も、 1.x系はIE 6/7/8サ…

テキストボックスを最大文字数まで入力したら次のフィールドへフォーカスする入力補助

固定長テキストボックスとでも言いましょうか。。 郵便番号・クレジットカード・シリアルナンバーのような 複数あるフィールドの各桁数が固定で決まっているテキストボックスが複数並んでいる場合に、 文字列長の最大桁数まで入力したら次のテキストボックス…

jQuery.ajaxでWebスクレイピングを実装してみた

Webスクレイピングとは Web上にある情報を取得して何かしらの形にまとめるスクリプト類です。 PHPなどサーバーサイドで定期実行してDBに格納するなどが よくある使われ方だと思われます。 Webスクレイピングをする上でのマナー アクセス後の処理は$.ajaxで非…

複数行のテキストボックスでいわゆる縦移動をする方法

色々言い方ありますが。 やりたいこと テーブル/リストのような複数行表示の その行の中にあるテキストボックスにおいて 上下キーを押したらカーソル(focus)が上下に移る とでも言ったら正確でしょうか。。 jQueryでの実装 キーイベントが発生した要素のname…

jQuery 2.2.1 と 1.12.1 が出ました

ちょっと日が経ってしまいましたが、2016/2/22 にjQuery 1.12.1 と 2.2.1 がリリースされました。 今回は3.0へ向けてのパッチという位置付けのようです。 内容は、バグ修正と安定性向上で 特にIEでの position() メソッド挙動が改善されています。 1.x系はIE…

jQueryでajax通信を利用するコード

下記のGit引用ソースの通りなのですが、大枠は $.ajax({ type: 'GET', dataType: '【取得するデータ型】', url: '【ajaxで取得するURL】' }).done(function(data) { // 取得成功時の処理. 変数dataに値が入っている. }).fail(function(data) { // 取得失敗時…

$.ajaxでステータスコード200なのにerrorで処理される

掲題の通りの現象なのですが、 $.ajaxでアクセス自体はstatus 200で返っているのに errorが呼び出されることがありました。 例だと dataType:'xml' でアクセスしていることがわかると思います。 レスポンスがjsonの場合は dataType:'json' と書かないと erro…

HTML5の<input type="number" />をjQueryで値取得した場合

HTML5には <input type="number" /> が追加された このような感じで書けるんです。 min,max設定ができたり、上下キーでインクリメント/デクリメントできるのが良いですね。 jQueryで値取得すると typeofで取っても

jQuery 2.2/1.12の新機能を試す(uniqueSort編)

名前変わっただけ 新機能…といってもuniqueSortに関しては unique()のわかりやすさのために追加された同じ動作のメソッド なんですよね。 unique() と uniqueSort() で動きが変わらないことが確認できると思います(笑) 公式では uniqueSort() の使用が推奨さ…

jQuery 2.2/1.12 リリース概要

jQuery 2.2 / 1.12 に加えて、jQuery Migrate 1.3.0 がリリースになっています。 jQuery 2.2 and 1.12 Released | Official jQuery Blog jQuery Migrate 1.3.0 Released | Official jQuery Blog まとめると 何かの機能が使えなくなるということはなく、 次に…

jQuery 2.2/1.12の新機能を試す(Symbol/iterator編)

jQuery 2.2 / 1.12 が2016/1/8にリリースされてました。 その中の新機能の1つであるES6/ES2015のSymbol/iteratorを書いてみました。 for (要素 of 配列) で書けるようになりましたね!

セレクターでカンマ(,)を使う際のちょっとした注意点(優先度)

HTML たとえばこんな感じでテーブルが2つある場合に class="target"内のth,tdに何か処理をしたい なんてことがあると思います。 JS その場合、カンマで区切って記載することになると思いますが ここで $('.target th, td') なんて書いてしまうと、先にカンマ…

Bootstrapのファイル選択をカッコ良くする

Bootstrap、便利なんですが <input type="file" /> だけなぜかイケてないんですよね。 そこで、比較的簡単によりBootstrapっぽくカッコ良くなる実装をしてみました。 HTML JS 方針 本体そのものをstyle="display:none;"で隠す。 その代替として、アイコン付きreadonlyテキストボッ…

テーブルの行を動的に追加する

<table>タグ内の<tr>を画面上動的に追加するjQueryサンプルコードです。 テーブル部の実装は以下の通り。 (追加データを入力する行を敢えて別テーブルに出してみました) jQuery側は以下の通りです。 ポイントは行追加しても削除リンクやリストチェックチェックのイベ</tr></table>…

jQueryでセレクトボックスの親・子・孫を入れ替え制御

意外と色々と実装方法がありそうですが ひとまずこんな感じでいかがでしょうか。 ポイントはoptionを入れ替えるfunctionを共通化している所なんですが 共通化したことによって引数が少し多めになっています。 function placeSelectOptions($this, $child, $g…

jQueryでチェックボックスの一括チェックオン/オフを制御する

よくある"一覧表示リストに並んでいるチェックボックスを一括でon/off制御するコードです"。 一斉チェックとも言いますね。 リストのチェックボックスには class="list-check" をあてて それをコントロールするチェックボックスには class="check-all" をあ…

jQueryのセレクターでのinput/select/radioなどの入力要素の値取得コード例

いきなり第2回目にしてサンプルが長いですが 今回はコピペして単一のhtmlで動くようになっています。 ※ jQueryライブラリのロードはCDNから取得しているのでネット環境は必須です。 気になる方はjQueryのモジュールを落としてきて111行目を書き換えて下さい…

初期表示時に最初の入力要素のフォーカスをあてる

シンプルに書くと $('input, textarea, select').eq(0).focus(); です。 eq(0) で取得した入力要素達のなかから最初のものを取り出して、focus()を呼びます。 ただstyle="display:none;"やdisabledやreadonlyを除きたい場合はちょっと複雑ですが $('input:en…