jQueryで複数のテキストボックスの値をまとめて取得するコードを紹介します。概要クラスなどの複数要素を選択するセレクターで要素を選択し、val()メソッドを呼び出した場合、最初に選択された要素のvalueの値のみ取得できます。複数要素を選
Webプログラミング/JavaScriptコーディングではjQueryがメジャーになってきています。この記事ではjQueryでできることを紹介します。セレクタによる複数要素の選択JavaScript単体では複数要素の選択は面倒ですが、jQu
jQueryでテキストボックスの値を取得するコードを紹介します。概要テキストボックスの値を取得するには、セレクタでテキストボックスを選択し、val()メソッドを呼び出します。コード以下のコードを記述します。<!DOCTYPE html
jQueryにてイベント内のセレクタで自身の要素を選択するコードを紹介します。概要jQueryのイベント内で自身の要素をセレクタで選択する場合は$(this)またはjQuery(this)と記述します。コード以下のコードを記述します。<
jQueryで折りたたみ可能なパネルを作成します。概要こちらの記事ではJavaScriptを用いて折り畳み可能なパネルのコードを紹介しました。また、こちらの記事ではCSSを用いて折り畳み可能なパネルを紹介しました。この記事ではjQueryを
jQyeryでアニメーションを実装するコードを紹介します。概要アニメーションをする場合は、セレクタで選択したオブジェクトに対し show hide fadeIn fadeOut slideDown slideUpなどのメソッドを実行します。
jQueryのMOuseMoveイベントを利用します。補足jQueryを利用しない実装方法はこちらの記事を参照してください。書式(セレクタ).mousemove(イベント実行関数)または(セレクタ).mousemove(function((
jQuery のイベントを利用するコードを紹介します。イベントを利用するとセレクタで選択したオブジェクトにクリックなどのイベント動作を割り当てることができます。Click イベントクリックイベントに関してはこちらの記事を参照してください。D
jQuery のセレクタを用いて要素内のドキュメントやテキストを変更するコードを紹介します。コード下記のコードを記述します。<!DOCTYPE html><html xmlns="http://www.w3.org/199
jQuery のセレクタ一覧を紹介します。はじめに : "$" についてjQuery は $ と記述できます。jQuery( "*" )と$( "*" )は同じ処理になります。基本すべての要素を選択する (All Selector)jQue
jQuery のセレクタを用いて要素のスタイルを変更するコードと実行結果を紹介します。補足jQueryを利用せずに同様の実装をする場合は、querySelector, querySelectorAllメソッドを利用します。詳細はこちらの記事
jQuery でページの表示時にjavascriptを実行するコードと実行結果を紹介します。補足jQueryを利用しない実装方法はこちらの記事を参照してください。コードjQueryReadyDemo<!DOCTYPE html>
JavaScriptからASP.NETのロジック処理を呼び出したい場合があります。こちらの記事ではScriptManagerを用いてJavaScriptからASP.NETを呼び出す方法を紹介しましたが、ページをASP.NETではなく、HTM
JavaScriptでJSONファイルを読み込み、値を取得するコードを紹介します。概要JavaScriptでJSONを扱う場合にはJSONオブジェクトを利用します。JSON形式のファイルを読み込んでオブジェクト形式でアクセスする場合はJSO
JavaScriptでHTTPを利用し、インターネット(Web)のファイルを取得するコードを紹介します。概要JavaScriptでHTTPを利用しファイルを取得する場合にはXMLHttpRequestオブジェクトを利用します。XMLHttp
XmlHttpRequestでアクセスできるファイルは通常は元ファイルのあるドメインと同一ドメインにあるファイルのみです。ここではXmlHttpRequestで他のドメインにあるファイルへアクセスするための方法を紹介します。動作環境ブラウザ
JSON, JSONPのMIME Typeを紹介します。JSONMIME Typeapplication/jsonRFChttp://www.ietf.org/rfc/rfc4627.txtJSONPMIME Typeapplication
XMLHttpRequestで複数のファイルにアクセスしたが、レスポンスが1度しかない場合の対処法です。問題の発生するコード下記のコードで問題が発生します。function admain() { for (var i = 0; i <
JSONをWebから取得した際に、JSONの戻り値がブラウザでキャッシュされ意図しない動作をする場合があります。この記事では、取得した JSON がキャッシュされないようにする方法を紹介します。対策キャッシュを防ぐ方法として、以下の対策があ
JavaScriptを利用して、スクロールアニメーション(スムーズスクロール)するページ内リンクを作成します。メモ新しいブラウザでは、CSSのscroll-behaviorプロパティの設定で実現できます。詳細はこちらの記事を参照してください
リンクをクリックした際にリンク先にスクロールアニメーション(スムーズスクロール)するページ内リンクを作成します。補足jQueryを利用しない実装方法はこちらの記事を参照してください。事前準備jQueryを入手します。http://jquer
複数のパネルの折りたたみ動作がトグルで動作するパネルのコードと実行結果を紹介します。実装方針パネル部分をクリックすると、コンテンツの枠を表示する動作を実装します。表示の切り替えは、サブクラスを追加する方式を利用し、サブクラスが指定されていな
折りたたみの動作がアニメーションする折りたたみ可能パネルを作成します。コード以下のコードを記述します。CssExpandPanel.html<!DOCTYPE html><html xmlns="http://www.w3
クリックをトリガーにしたアニメーションのJavaScript,CSSのコードを紹介します。概要CSSでアニメーションするには、CSSの定義で "transition" プロパティを指定します。"transition" プロパティを指定すると
JavaScriptでユーザーエージェントを取得するコードと実行結果を紹介します。概要JavaScriptでユーザーエージェントを取得する場合は"navigator.userAgent"を用います。記述例navigator.userAgen
JavaScriptでページのリロードをするコードを紹介します。概要JavaScriptでページのリロードをするには、Windowオブジェクトのwindow.location.reload()メソッドを用います。プログラム例コード下記のHT
質問: JSでアクセス日時を表示したいJavaScriptでアクセス日時をページに表示したいんだ。どうコードを書けばよいんだっけ？概要JavaScriptで現在の時刻を取得、表示する場合は、new Date()にてDateオブジェクトを作
JavaScriptを利用して要素のCSSスタイルを動的に変更するコードを紹介します。補足:CSSのクラスを書き換える場合CSSのクラスを動的に変更することでも、スタイルを変更できます。JavaScriptで要素のCSSクラスを書き換えるコ
JavaScriptで編集状態のテキストボックスの背景色やボーダーを変更するコードを紹介します。概要編集状態になった(フォーカスのある)テキストボックスの背景色や枠の色を変更したい場合があります。この記事ではJavaScriptでフォーカス
AタグにonClickイベントなどを実装した場合、リンクをクリックした際にページが遷移しないようにししたい場合があります。この記事では、Aタグのクリック時にページ切り替えをしない動作にするコードを紹介します。記述方法: javaScript
JavaScriptでページの背景色や前景色を変更するコードを紹介します。記述方法javaScriptでページの背景色を変更する場合は"document"クラスの"bgColor"プロパティにカラーを設定します。ページの前景色を変更する場合
質問: JavaScriptロジック内でURLのパラメーターを取得したいクライアントサイドのJavaScript内でURLのパラメータを取得したいです。URLパラメータを取得するJavaScriptコードを教えてください。はじめにJava
HTML,CSS, JavaScriptでの色指定の方法です。カラー指定表記カラーは以下の表記方法で指定できます。 表記方式 値の範囲 記述例 説明 #RGB 0～F #44F R,G,B の16進数の表記値でカラーを表現します
JavaScriptの配列の宣言と作成のコードを紹介します。書式宣言 / 初期化JavaScriptの配列を宣言、初期化するには、"new Array"を用います。配列変数名 = new Array(配列数);配列作成時に値を代入する書式も
JavaScriptの配列の長さを取得する方法を紹介します。書式JavaScriptの配列の長さは、"length"プロパティを参照すると取得できます。(配列変数名).length補足"length"の先頭文字"l"は小文字です。プログラム
テキストボックスに文字が入力されている場合だけ、テキストボックスの中に消去ボタンを設置するコードを紹介します。概要こちらの記事でテキストボックスの中にクリアボタンを設置するコードを紹介しましたが、紹介したコードでは、消去ボタンが常に表示され
