input type="file" のボタンをオリジナルのボタンにする。 - Qiita
概要 Bootstrapを使うとボタン類は綺麗に装飾されますが、ファイル選択のボタンってCSSでは装飾出来ません。 そこでjqueryを使えば擬似的に好きな画像やbutton要素をファイル選択ボタン代わりに使うことが出来るようになります。 なお、jqueryを使用しているのでjqueryは読み込んでいる前提です。 ソース <input type="file" id="file" style="display:none;" onchange="$('#fake_input_file').val($(this).val())"> <input type="button" value="ファイル選択" onClick="$('#file').click();"> <input id="fake_input_file" readonly type="text" value="" onClick="
【Javascript・jQuery】オブジェクトや画像の幅・高さを取得する方法 – atomicbox
オブジェクトや画像の高さ・幅を取得したい機会はけっこう多いのですが、この「サイズ」の概念は思った以上に複雑で結構悩まされます。 取得した値が思った値じゃない！ってこと結構ありますよね。今回はそこらへんについてまとめておこうと思います。 jQuery・サイズ（幅・高さ）取得メソッドの種類 なんかうまく値がとれないぞという場合はこのあたりをもう一度整理してみる必要があります。 まずはjQuery取得できるサイズの種類を見てみましょう。 メソッド 方向 padding border margin $('#targetObj').height();
jQuery 1.9.1：checkboxのcheck/uncheckはpropで – DYO.JP ver.2
これまでjQueryを用いたcheckboxのcheck/uncheckは下記のようにしていました。 checkbox.attr(‘checked’, ‘checked’) checkbox.removeAttr(‘checked’) しかし、どういうわけかコレが効かなくなる場合がありました。 同様にハマッているひとがいまして、こちらの記事で無事に解決させていただきました。 http://stackoverflow.com/questions/14769408/jquery-checkbox-check-uncheck checkbox.prop(‘checked’, true) checkbox.prop(‘checked’, false) 確かにこちらの方がしっくり来ます。ちなみにcheckboxがcheckであるかどうかは checkbox.attr(‘checked’) == ‘
jQueryでcheckboxがcheckされてるかの値をとる - Webtech Walker
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
JavaScript(jQuery)でカスタマイズしたモーダルウィンドウを表示するライブラリ「leanModal」 - 強火で進め
「leanModal」はカスタマイズしたモーダルウィンドウ(ダイアログ？)を簡単に使えるライブラリです。IE 6は未サポートみたいです。 配布場所 leanModal - a JQuery modal plugin that works with your CSS http://leanmodal.finelysliced.com.au/ 使い方 jQueryが必要なライブラリです。jQueryを先に読み込む様にしましょう。 使用例はこちら。「テスト」ボタンを押すとモーダルウィンドウが表示されます。「閉じる」のリンクかウィンドウ外をクリックすると閉じられます。 HTMLのコードは以下。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head> <meta h
JavaScript Garden
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
jQueryプラグインのテストを複数のjQueryのバージョンで実行する - Webtech Walker
Travis CIは language: node_js node_js: - 0.10 - 0.8 - 0.6 とか書けば複数のバージョンでテスト実行してくれてマジすごいんだけど、同じことをjQueryのバージョンでもやってみた。 主にjQueryのプラグインを書いてる場合などに便利だと思う。1.9で非互換な変更があったんでバージョン違うとプラグイン動かないとかけっこうあるからね。 まずmocha-phantomjsを使ってmochaで書いたテストをphantomjsで動くようにする。 jQueryのバージョンはmocha-phantomjsに環境変数で渡したいんだけど、mocha-phantomjsは環境変数をブラウザに渡せるようになってなかったので、パッチ書いたのでひとまずそっちを使う。（Pull Requestは送っといたので取り込まれたらそっち使いましょう） （追記：取り込まれた
jQuery の配列系のメソッドをメモしとこ
jQuery は機能が豊富なので、しばらく使わないと忘れてしまう。 ここでは、jQuery と配列の関係に絞って目的別に逆引きできるようにしておく。 配列から jQuery オブジェクトを作成 $ 関数に渡せばOK $([1,2,3]) NodeList のような配列っぽいものを渡しても解釈してくれる。 $(document.getElementsByTagName("div")) // $("div") と同じ ※内部的には setArray メソッドが呼ばれてるが、外から使うことは稀。 jQuery オブジェクトを配列のように扱う 要素数を取得する length プロパティを使えばOK。 $("div").length // document.getElementsByTagName("div").length と同じ jQuery のメソッドを使って操作する限りは、適切に lengt
マウスオーバーした画像にフェードイン効果（半透明）をつけるjquery - WEBデザインを学ぶ｜こゆきんのWEBの細道
ポートフォリオで使用した、画像をマウスオーバーすると、半透明にフェードインして行くjqueryを備忘録用に記録。 このリンク部分で使用しました。 http://webdesign7.main.jp/portfolio/ CSSで半透明効果を出す方法 しかし、徐々に透明になるふわっとした感じは出ない様です。 a:hover img{ opacity:0.6; filter: alpha(opacity=60); } jqueryで、マウスオーバーしたら透明度を変える方法 1：最初にheaderに，jQuery本体を読み込む <script type="text/javascript" src="js/jquery.js"></script> 2：Queryの処理を記述する $(document).ready( function(){ $("#gallery img").hover(funct
Javascript で複数のコールバックをまとめて受け取る - Qiita
以下のように「複数のコールバック呼び出しが完了した時点で処理をすすめる」パターンを簡素に書くことができます。 各コールバックに渡された引数もまとめて最後の then 関数に渡され、しかもその順番は cb.here を呼び出した順番と対応することが保証されます。（コールバックが呼び出された順ではありません） これで複数リソースの読み込みも怖くない！ var cb = new Callback(); request(..., cb.here()); request(..., cb.here()); request(..., cb.here()); cb.then = function(result1, result2, result3) { } var Callback = (function () { /** * 複数のコールバックをまとめて一つのコールバックにします。 * @constru
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
)
オブジェクトをJSON文字列に変換 (jQuery) - シャル・システムサービス公開Wiki
とすればよいが、逆にJavaScriptのオブジェクトをJSON文字列に変換するのは標準では大変。 そこで、 jQuery.extend({ stringify : function stringify(obj) { var t = typeof (obj); if (t != "object" || obj === null) { // simple data type if (t == "string") obj = '"' + obj + '"'; return String(obj); } else { // recurse array or object var n, v, json = [], arr = (obj && obj.constructor == Array); for (n in obj) { v = obj[n]; t = typeof(v); if (obj.
jQuery で radio ボタンの取得、設定 - xykの日記
HTML: <input id="male" type="radio" name="sex" value="0"><label>男性</label> <input id="female" type="radio" name="sex" value="1"><label>女性</label> ■ チェックされたradioボタンのvalue値の取得する jQuery の独自cssセレクタ(:checked)を使って取れる // 男性にチェックが入っている場合 var result1 = $('input[name="sex"]:checked').val(); // 0 // or var result2 = $('input[name="sex"]').filter(':checked').val(); // 0 ■ radioボタンにチェックが入っているか、いないか真偽値を取得する //
jQuery入門講座 診断系コンテンツ-選択肢の作成(2)
索引 └ サンプル目次 1章：短編集 ├ スイッチの作成 ├ キャプションの表示 ├ スムーススクロール(1) ├ スムーススクロール(2) ├ タブメニュー(1) ├ タブメニュー(2) ├ タブメニュー(3) ├ タブメニュー(4) ├ カテゴリ切替(1) ├ カテゴリ切替(2) └ カテゴリ切替(3) 2章：診断系コンテンツ ├ 選択肢の作成(1) ├ 選択肢の作成(2) ├ 選択肢の作成(3) ├ 質問の切替(1) ├ 質問の切替(2) ├ 点数計算 ├ 結果の表示 ├ 外部テキストの読込 └ もう一度ボタン 3章：製品抽出系コンテンツ ├ 構成の確認 ├ 回答の確認 ├ 点数表の作成 ├ 得点の集計(1) ├ 得点の集計(2) ├ 結果画面の作成(1) └ 結果画面の作成(2) 番外：Simulation Game ├ 地形データの読込 ├ ユニットの移動 ├ 敵ユニットの扱い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cleoh twitter
https://cdbk.tokyo/post/jquery-toggle
GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
JSON Parsing and Stringifying in jQuery (as a plugin) : Furry Brains
hp-kyoto