【jQuery】選択した項目によってセレクトボックスの色を変える方法 ｜ KLUTCHE
フォーム内のプルダウンメニューの選択項目を変更する度に、セレクトボックスの背景色を変える方法です。 デモ サンプル IEでは選択中のセレクトボックスは青背景になるので少しわかり辛いかもしれません。 HTML <select class="clorfulSelect"> <option value="">選択してください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> <option value="gray">灰</option> <option value="black">黒</option> </select> select 要素に class「clorfulSelect」を設定します。 Javascript jQuery 依存
Google Charts サンプル
https://www.itdashboard.go.jp/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count グラフ作成手順 環境準備 jQueryとGoogle Chartsを利用するための<script>タグを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> パッケージ読み込みとコールバック グラフ作成に必要なパッケージを
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
jQuery でセレクトボックスを操作！value 値の取得や選択項目の指定、プルダウンテキストの取得方法
jQuery でセレクトボックスを操作！value 値の取得や選択項目の指定、プルダウンテキストの取得方法 select ボックスに対する jQuery の操作をまとめてみました。 JavaScript では value 値が取得・設定に特化することが多いですが、jQuery を使うことで option タグ内のテキスト（プルダウンに表示している文言）も簡単に取得することができます。 以下、サンプルプログラムでは id 属性「select_test」を持つセレクトボックスを用いて解説していきます。 <select id="select_test"> <option value="1">選択肢１</option> <option value="2">選択肢２</option> <option value="3">選択肢３</option> <option value="4">選択肢４</op
jQueryでselect要素のテキストを取得する方法
jQueryでselect要素のテキストを取得する方法を紹介します。 このエントリーでは、 プルダウンで選択したoption要素のテキスト取得 select要素内のすべてのoption要素のテキスト取得 指定したテキストに合致するoption要素を選択状態にする方法 について解説します。 それぞれのサンプルも用意しています。 １．選択したオプションのテキストを取得する 選択したオプションのテキストを取得するには「opstion:selected」とtext()を組み合わせます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> jQuery(function(){ jQuery('#foo').change(function(){ alert(jQ
【jQuery】ラジオボタンの選択されている項目の取得 at softelメモ
問題 jQuery使ってます。 ラジオボタンの選択されている項目の文字の方を取得したいです。 答え ラジオボタンの、選択されている項目をあらわすセレクタは、name属性を使うとこう書ける。 input[name='kome']:checked 値を取得するには、 $("input[name='kome']:checked").val(); 表示しているテキストの方を取得するには、このままでは難しいが、label要素で囲んでしまうとやりやすい。 HTMLをこのようにして、 <label><input type="radio" name="kome" value="1">コシヒカリ</label> <label><input type="radio" name="kome" value="2">ひとめぼれ</label> <label><input type="radio" name="kom
jQuery でラジオボタンの値を取得／変更する方法
radio ボタンに対する jQuery の操作をまとめてみました。 どれも基本的な操作です。しかし意外と忘れてしまうもので、値の設定方法はテキストボックスのケースと記述方法が異なるので注意が必要です。 以下、サンプルプログラムでは name 属性「radio_test」のラジオボタンを用いて紹介していきます。 // radioボタン <label><input type="radio" id="rd0" name="radio_test" value="０番" />ラジオテスト0</label> <label><input type="radio" id="rd1" name="radio_test" value="１番" />ラジオテスト1</label> <label><input type="radio" id="rd2" name="radio_test" value="２番"
jQueryで要素名を取得する - Qiita
<inupt id="hello" type="text" /> <inupt class="hoge" type="text" /> <select class="hoge"> <option>aaa</option> </select> console.log( $("#hello").prop("tagName") ); > "INPUT" console.log( $(".hoge").prop("tagName") ); > "INPUT" //先頭しか取れない console.log( $(".hoge").get(0).tagName ); > "INPUT" console.log( $(".hoge").get(1).tagName ); > "SELECT" /* * 下記は、冗長な書き方になっていると指摘いただきました。 * 詳しくはコメント欄を参照ください */ /
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
JQueryでAjaxを利用する(2) - Qiita
<table> <tr><th>text(...)</th><td>テキストを変更する</td></tr> <tr><th>html(...)</th><td>HTMLを変更する </td></tr> <tr><th>prepend(...)</th><td>要素内の先頭にHTMLを挿入する</td></tr> <tr><th>append(...)</th><td>要素内の最後にHTMLを挿入する</td></tr> <tr><th>before(...)</th><td>要素の前にHTMLを挿入する</td></tr> <tr><th>after(...)</th><td>要素の後にHTMLを挿入する</td></tr> </table> sample4(実行結果) tr要素の中にあるth要素とtd要素のテキストを「は」というテキストで結合し、td要素で包み直しています。 単純にtr要
テーブル情報を二次元配列に格納！jQueryで簡単にセル値を取得する方法！ | 自作PCテクニカルセンター
テーブル情報を二次元配列に格納！jQueryで簡単にセル値を取得する方法！2014年10月27日 [jQuery] ウェブサイト作っていると、tableタグの値を自由に操作したい場面がちょくちょくある。 特にある行の値をすべて取得したいときや、列単位で値を取得するなど、 どういうロジックで値を取得しようか迷うときがある。 id値を指定できるならとても簡単ですが・・・行ならtrタグに各行の識別ができるようなidを割り当ててやればいい。 単純に１行目ならid=”row-1″と指定すれば、jQueryなど使って取得することができる。 列ならtdタグにid=”column-1″みたいな指定をすれば、簡単ですね。 この辺りはfor文など使って、列と行の番号をそれぞれ付与していけばいいのですが、 id値など設定していないtableタグから値を引っ張りたいとき、どうすればいいのだろうか？
Selectors API の querySelector/querySelectorAll を使ってみよう | TM Life
Selectors API の querySelector/querySelectorAll を使ってみよう. querySelector/querySelectorAll とは, CSS セレクタを指定して要素を取得できるメソッドです. 今後, getElementById や getElementsByClassName に代わる重要なメソッドとなるでしょう. とても便利なのになかなか普及しないんだよなぁ～. 知名度も低くいみたいなのでざっくりまとめてみました. About querySelector/querySelectorAll とは CSS セレクタがマッチする要素をチャチャっと取得する便利な API です. 例) document.querySelector("#hoge"); // id が hoge の要素を取得 document.querySelector("secti
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
jQueryのSelectタグ処理関連 - yummy-yummy
jQueryでSelectタグ系でちょい便利なワザのメモです。 html <select name="hoge_n" id="hoge_i"> <option value="">---------</option> <option value="1">hoge1</option> <option value="2">hoge2</option> <option value="3">hoge3</option> <option value="4">hoge4</option> </select> selectで指定のものを選択された状態に // hoge4を選択状態にしたい場合 $(#pref).val(4); option要素を追加する // hogeというIDのSelectにラベル：hoge5、値：5というOptionを追加 $('#hoge_i').append($('<option>
JQueryを利用して簡単に行を追加
以下のHTMLの状態で下記JavaScriptを実行すると行が追加される。 <table id="hoge"> <tbody> <tr> <td>col1-row1</td> <td>col2-row1</td> </tr> </tbody> </table> ▼JavaScript $('#hoge').append('' + '<tr>' + '<td>' + 'col1-row2' + '</td>' + '<td>' + 'col2-row2' + '</td>' + '</tr>' ; ); これってようするに $('#hoge')[0].innterHTML = $('#hoge')[0].innterHTML + '<tr>' + '<td>' + 'col1-row2' + '</td>' + '<td>' + 'col2-row2' + '</td>' + '</tr
jQueryのslideToggleでにょ～んな件 -ProloGraphy
jQueryのslideToggleってすごく便利だと思います。 表示非表示の切替がにょ～んて感じに切り替わる。 1文付け加えるだけで。ステキです。 $("div#hoge").slideToggle(); ただ問題もあるんだなー。これ。 いや、どちらかといえばjQueryよりはブラウザ側の問題。 で今回、tableをslideToggleで制御しようと思ったんだけど、 IEでの挙動が何やら怪しい。 カクカクしたりカクカクしたり、 果てはIE7なんて表示の切り替えってなんですかくらいに動かない。 結局tableをdivで括って解決？ まぁ、解決。。。 わかったことは、どのブラウザでもやっぱりtableに直接slideToggleってやるより divで括った方が動きがキレイだったってこと。 うん。難しいところです。 やりたかったのはタイトルクリックしたら画像も変えてコンテンツの表示も切り換え
Ajaxサンプル：DOM書き換えサンプル [jQuery, prototype.js]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet
Ajax入門|Ajaxの基礎と応用の学習 Ajax入門 Web2.0を代表する技術であるAjax JavaScriptの基本からAjaxの基礎・応用までサンプルを使って紹介 jQueryとprototype.jsを使った場合のDOM書き換えサンプルを紹介します。 Ajaxフレームワークの代表であるjQueryとprototype.jsを使った場合の記述方法の違いが分かるように纏めました。単純なDOMの書き換えプログラムを紹介しますが、同時にloadイベントとclickイベント処理方法も参考にしてください。jQueryでは、明示的にloadという言葉を記述しませんが、HTML読み込み後DOMが構築されるとすぐに実行させたい場合は、「$(function(){//ここに処理を記述;})」の形式でプログラムを書きます。DOM構築のタイミングはブラウザによって異なるのでクロスブラウザ対策が必要です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでDOM要素を削除する：remove(), empty(), unwrap(), detach()
FileSystemObject オブジェクトでファイル名にワイルドカード文字を使用できますか - Hey, Scripting Guy!
