jQueryの基礎から便利なプラグインの紹介まで情報をまとめています。
jQuery JQueryでforeach的な動きをする
JQueryで色々書いていると、結構書くことああるのでメモ。
$("セレクタを書く").each(function(index, element){
//ここにループ内容を書く
});
大体こんな感じでループして取れます。...
jQuery jQueryで要素の表示/非表示を判定する
いつも忘れてしまうのでメモ。
色々方法はあるのですが、いつも以下で判定しています。
if ($('#hogehoge').is(':visible')) {
// 表示のとき
} else {
// 非表示のと...
jQuery Jquery3系でスムーズスクロール
unrecognized expressionというエラー
セレクタの仕様が変わったみたいで、巷に出回っているスムーズスクロールのコードだと以下のセレクタ部分でエラーが出ます。
$('a').click(function() {
...
jQuery 【対処方法あり】iPhoneとかのsafariではoptionタグをJQueryのshow/hideできない。
iPhoneやらiPadやらのsafariで、条件によってoptionタグの表示・非表示が効かない件を対応しました。
■chromeやandroidでは動くのにiPhoneだけ動かない
どうも仕様でsafariとIEでoptionタグを...
jQuery JQueryで左右の空白を削除する「trim」を利用するといろいろ便利
■データの左右の空白が邪魔な時がある。
フォームの内容や、要素の値を取得したときに左右にスペースを入れてしまっていることがあります。タグ内にスペースが入っていても見た目的に変わりないので、JQueryで値を取得したときに不都合が発生するこ...
CakePHP2 CakePHP + AjaxでのPOSTで受け取った情報が空になる原因
Ajaxでフォームから情報を取得して、CakePHPで作成したAPIのエントリポイントにPOSTをした時、どうしてもCakePHP側の$this->request->dataが空になるときの対応です。
以下の様なAjaxの...
jQuery 【簡単便利】tableタグのヘッダ部分をスクロール後上部に固定する【jQuery.floatThead】プラグイン
テーブルタグを使ってデータを表示したとき、スクロールしてヘッダ部分が画面外に行ってしまって何が表示されているのかわかりにくい、ということが結構発生します。スクロールしてヘッダ部分が一番上まで行ったら固定表示という要件は今でも結構あると思いま...
jQuery JQueryでclassを追加・変更する方法
JQueryを利用して、タグのclassを変更する方法です。JQueryを使ってclassを変更することで、文字の色や背景の色を動的に変更することができます。
追加方法
以下のように記述すると、targetクラスが指定してあるタグにne...
jQuery jQueryでセレクトボックスを操作する方法を5つ紹介
ウェブシステムを実装しているとフォームの入力内容によって、セレクトボックスを変更することも多いと思います。ここでは、jQueryでセレクトボックスを操作する方法を紹介します。選択中の値の取得、選択中のラベルの取得、値による選択、項目の追加、...
jQuery jQueryで【ページの先頭に戻るボタン】を配置するサンプル
よくウェブサイトなどの一番下の部分に【先頭へ戻る】と言ったボタンやリンクが有ると思います。この先頭に戻るサンプルスクリプトを書きました。実際にこのコピペチェックツールで利用しています。ある程度スクロールすると【先頭へ戻る】ボタンが右下に表示...
jQuery jQueryで選択中のラジオボタンの値を取得する
jQueryを使って選択中のラジオボタンの値を取得する方法です。今回は【値を取得】ボタンを押すと選択中のラジオボタンの値を取得することができます。以下の様なフォームがあるとします。
<input type="radio" name=...
jQuery jQueryでHTMLが全て読み込まれてから実行されるreadyイベントの基礎
jQueryは基本的に読み込み完了したHTMLしか操作することができません。HTMLが読み込まれる前に、jQueryのスクリプトを実行してもエラーになってしまいます。ここでは、jQueryのスクリプトが安定して動くようにするために、read...
jQuery jQueryで一括でチェックボックスにチェックを付ける、外す。
リストの横にあるチェックボックスに【一括でチェックを入れる】という用途のボタンを配置することが多いと思います。そのサンプル実装です。以下の様なHTMLを用意します。
<label for="test1">
<i...
jQuery 超便利な時間も一緒に選択できるjQueryカレンダー【DateTimePicker】
サイトを作成している時、カレンダーから日付を選択して、更に時間も選択させたい時があると思います。カレンダーから選択するだけならjQueryUIのDatePickerプラグインがあるのですが、時間を選択させることはできません。
ちょっと...
jQuery 【コピペ対応版】jQueryでテキストエリアの文字数をカウントする方法
textarea内の文字数をリアルタイムにカウントするサンプルです。blurおよびkeyupイベントを拾って、文字数をカウントします。そのためテキストフォームにコピペをした時にも文字数をカウントしてくれます。2バイト文字も1文字とカウントし...
jQuery jQueryでトースト通知をするプラグイン。ユーザビリティ向上。
右上や左下からにょっきり通知エリアでてきて通知をしてくれる実装を簡単にできるプラグインを紹介します。ajaxと組わせることで、画面をリロードさせることなく通知をすることができます。
ユーザが画面遷移しなくても情報の通知ができる...
jQuery jQueryとTwitter BootstrapをCDNから読み込みする方法
私がいつも使っているのは以下です。CDNを利用すると、いちいちファイルをサーバ上に配置しなくても済みます。下記の読み込み設定をheadタグの中に書き込むとCDNからファイルを取得してきてくれます。
■jQueryのCDN読み込み設定
j...
jQuery 超便利な郵便番号から住所へ変換してくれるjQueryプラグイン
フォーム入力のシステムを作っていると、郵便番号と住所を入れる場面が多々あると思います。郵便番号入れているのに、住所を入れるの面倒くさいです。
郵便番号からある程度住所を補完してくれると非常にユーザビリティが向上します。そんな機能を簡単...
jQuery jQueryで指定した文字列でドロップダウンの項目を動的に絞り込むサンプルを書いた
■長いドロップダウンリストのユーザビリティ向上のために
たくさんデータが存在するドロップダウンリストは下に長くなってしまい、選択するのが大変になってしまいます。ユーザビリティも低下してしまいがちです。そんな悩みを解決するために、テキストリ...
jQuery jQueryを使って画面上の文字列の幅を取得するサンプル
■画面上で文字列の幅を調べる
jQueryを利用して対象の文字列が画面上で何ピクセルあるのか、というのを取得するサンプルです。画面上での文字の幅を取得することで、折り返しが発生しないようにフォントサイズに自動調整したり、ということが可能に...