【jquery】jqueryを使って画像クリックでフェード切り替え（fadeOut,fadeIn）

前回の記事で、ただ単に画像を切り替えるサンプルを作りましたが、あまりに味気なかったので、フェードで切り替えるサンプルを作ってみます。 ほとんど前回の記事と一緒で、画像を切り替える部分だけが違うだけです。 htmlのサンプル 画像を表示したい場所に、img...

【JavaScript】JavaScriptを使って前ゼロ埋めする方法（ゼロパディング）

JavaScriptで数字の桁数を揃えるために、前ゼロ埋め（ゼロパディング）する方法を紹介します。 JavaScriptサンプル 例えば、数字を2桁に揃える場合 var value1 = 1; var zero_value1 = ("0" + ...

【jquery】jqueryを使って画像クリックで画像切り替え

表示されている画像をクリックすると、違う画像に切り替わるようなサンプルを作ってみたいと思います。 ただ単に画像を切り替えるだけなので、味気ないですが・・・・。 htmlのサンプル 画像を表示したい場所に、imgタグを置いているだけです。。 jqueryの...

【javascript】文字列の最後の文字を取り出す（sliceメソッド）

sliceメソッドを使えば簡単に取り出せますね。 string.slice(-1) 上記で最後の文字が取れだせます。 slice メソッド 文字列の一部分を返します。 string.slice(start, [end]) start 文字列（str...

【jquery】jqueryでチェックボックスの状態を取得する

jqueryを使って、チェックボックスの状態を取得して、チェックされている場合に何かしらの処理を行う場合があると思います。 ということで、とても簡単なサンプルですが、チェックボックスがチェックされている場合にアラートを出すサンプルをご紹介します。 HTMLのサンプル ...

【jquery】jqueryの関数（function）の書き方（readyイベント）

jqueryの関数（function）を書くときに、ちょっと迷うところもあったので、忘れないようにまとめてみました。 jqueryの関数（function）の書き方 ①jQueryと書いた場合 jQuery(function ($) { alert("j...

【jquery】jqueryのshow()を使って、表示・非表示を切り替える（show）

divタグを表示・非表示にする方法はいくつかあると思いますが、 ここでは、showメソッドやhideメソッドを利用して「display:none」を切り替えたいと思います。 デモ ボタン1 ボタン2 ボタン3 1 2 3 試しに、上のボタン...

【jquery】jqueryのループ（each）でbreakやcontinueのような事がしたい

ループの中で途中でループから抜けたいときや、 以降の処理をスキップさせループ処理に戻りたい場合などに「break」や「continue」を使いますが、 jqueryのループ（each）などで「break」や「continue」を使うとエラーになります。 そんなときは・...

【jquery】jqueryを使ってラジオボタンのデフォルト設定を行う

ラジオボタンなどをシステムで動的に出力する事が多々あると思います。 ココでは、ラジオボタンを動的に出力した際、デフォルト選択状態をjqueryで設定する方法をご紹介します。 ちなみにサンプルは、ラジオボタンの選択値を配列で受け取るために、 同じ名前で配列化しています。...

【jquery】jqueryを使ってテーブルに新規行を追加する

一覧形式の入力画面などの場合、 表示されている表に対して、1行追加してデータを入力するような機能があると思います。 色んなやり方があると思いますが、今回はダミー行をコピーして追加する方法を紹介したいと思います。 サンプルソース 行追加 No タイプ...

【jquery】jqueryを使って発生したイベントをキャンセルしてみる

ボタンをクリックすると、クリックイベントが発生するのは当たり前ですよね・・ リンクをクリックすると、リンクに設定されているページに遷移しますよね。 ここでは、リンクをクリックしても設定されているページに遷移しない方法を試してみます。 どんなときに使うか・・・ 例え...

【jquery】jqueryを使って画面の全ての要素をdisabled設定する

会員登録画面や、編集画面などで規約に同意するチェックボックスをチェックしないと入力項目に入力できない そんな画面の場合に、要素（入力項目）に対してdisabledを設定する方法があると思いますが、 要素が多いと面倒なので、jqueryを使って出来る限り簡素化しようと思いま...

【jquery】ファイル選択ダイアログでファイル名を取得する（HTML5 FileAPI）

jqueryを使って、ファイル選択ダイアログにて選択されたファイルのファイル名を取得してみます。 アップロードするファイル名が決まっていたり、サイズに制限があったりする場合、 クライアント側でチェック出来れば便利かなと思い調べてみました。 ちなみにこの方法はHTML5...

【jquery】jqueryでチェックボックスの値をカンマ区切りで取得する

選択されているチェックボックスの値をカンマ区切りで取得したくて、簡単な方法がないか調べてみました。 行数も少なく比較的簡単に出来たのでメモしときます。 HTMLのソース 得意な言語は？ Java PHP Perl Ruby 選択した言語は？ チェックボッ...

【jquery】jqueryを使ってラジオボタンやチェックボックスのdisabled設定

ボタンを押すことで、ラジオボタンやチェックボックスのdisabledを設定してみます。 よく使うのですが、よく使う割りに忘れてしまうのでおぼえがきです。 HTMLのサンプル ラジオボタン ： jquery java php チェックボックス： jquery ...

【jquery】テーブルを検索して合致するセルをハイライト

テーブルのセルの文字列を検索して、合致したセルの背景色を変えるサンプルです。 ブラウザの検索とほぼ同じ機能なので、あまり使わないかもしれませんが。。 jqueryの勉強も兼ねているので・・・ということでサンプルです。 サンプルは、 テキストボックスに検索したい文字を...

【jquery】jqueryを使ってテーブルの縦列を結合する

テーブルの縦列で同じデータがあった場合、結合(rowspan)するサンプルです。 同じデータは順番に並んでいる必要があり、このサンプルは一番左の縦列のみ結合します。 今回は縦バージョンですが、横バージョンもいずれ。。。 HTMLのサンプル 関東 東京 ...

【jquery】jqueryを使ってページ内遷移させる（animate）

jqueryのanimateを使ってページ内遷移をさせてみようと思います。 aタグ（＜a href="#page1"＞）を使ったサンプルはよくみるのですが、 ここではaタグを使わずに試してみます。 サンプルページはこちら HTMLのサンプル ...

【jquery】セレクタで前方一致と後方一致

jqueryを使ってとあるエレメントにセレクタを使ってアクセスする際に、 前方一致と後方一致をよく使うので、おぼえがき。 上記のような2種類のテキストボックスがあった場合、 下記のようなコードで前方一致と後方一致が出来ます。 $(document).on(&quo...

【jquery】複数のチェックボックスを同期する

複数のチェックボックスが画面上にあり、 ひとつをチェックすると他のチェックボックスもONにしたいときとか。 HTML ①チェックボックス ②チェックボックス JavaScript //チェックボックスの同期 $(document).on("cha...