.prop('checked', true/false) でチェックボックスをトグルしても change イベントが発火しないjQuery
レスポンシブサイトでクリッカブルマップを使用すると必ず遭遇する問題、それは画像のサイズが変更になることでクリッカブルなエリアがずれてしまうという不具合。 クリッカブルマップのエリアはピクセルで指定するので、%などで指定し、画面サイズによって画像のサイズが変わってしまうと都合が悪いのですね。 で、ググると良く出てくるのが、jQueryのプラグイン「jquery.rwdImageMaps.js」を使うと簡単に解決できますよ、というもの。 説明を読むと、プラグインを読み込んで適用させれば良いだけっぽくて、なるほどコレなら簡単だ、と思うわけですよ。 しかし、僕はコレを入れたことで解決どころか問題が悪化してしまいました。(笑) 元々位置が合っていた、初期設定のサイズですら、クリッカブルな位置がずれてしまうという。。。 ■原因 この「jquery.rwdImageMaps.js」は、htmlのimgタ
api.jquery.com !"#$%&'()*+,./:;<=>?@[\]^`{|}~ こちらの31文字です。(30文字のように見えますが、先頭に半角スペースがはいってます) これらの文字は \\ と バックスラッシュ × 2 でエスケープできます。 例えば、 <p id="[hey]">HEY!</p> といった感じのイカしたIDを持った要素をセレクトしたい場合は、 $("#[hey]"); ではなく、 $("#\\[hey\\]"); という感じになります。(エスケープしないとエラーになります) なので、エスケープ用の関数をつくっておくと非常に便利です。 JavaScript function escapeSelectorString(val){ return val.replace(/[ !"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, "\\$&")
Webアプリの管理画面からちょこっとした情報を抜き出したいけどCSVエクスポート機能がなかったりするときにサクッとスクレイピングする良い方法としてGoogleChrome標準機能のDeveloperツールを使う方法を思いついた。 スクレイピングの準備 1.情報を抜き取りたいページにアクセスし、[F12]を押下して開発ツールを起動する。 2.Consoleタブに移動する。 3.Jqueryがロードされているかどうかを調べるために、「\$」Enterと入力してみる。 以下のように表示された場合はJqueryがロードされていないので次の手順でロードする。 // jqeury not load function $(selector, [startNode]) { [Command Line API] }
You are here: Home / サンプル / チェックボックスのチェックで、背景などに色を付ける(click編) こちらをお読みになる前に、まず【change編】をご確認下さい。動くサンプルはこちら。ここでは、clickイベントで同様の事を実現する方法を見てみます。まず述べておきますと、jQuery Ver.1.4.2以上を使う場合、又は、IE8以下をサポートしない場合は、change編を使った方が分かり易いです。jQuery Ver.1.4.2未満でIE8以下をサポートする場合、changeだと期待する動作をしてくれませんので、その時は、click編をお使い下さい。また、勉強がてら、click編は役に立ちます。ということで、以下コードです。 jQuery(function ($) { var chkbox = $("input[type=checkbox]"); // 対象のチ
各要素の指定されたイベントにひもづけられた、コールバック関数のみを実行します。 trigger関数との違いは、ブラウザのデフォルトの動作を行わない点だけです。 まず、テキストボックスがfocusを受け取った際に”Focused!”と表示するようにイベントハンドラを登録します。 次に2種類のボタンを用意しますが、片方はtrigger関数を呼び出すのでクリックと同時にテキストボックスにフォーカスが移ります。 一方、triggerHandlerを呼び出すボタンは、コールバック関数が呼び出されるので”Focused!”と表示はされますが、実際にはブラウザの動作は行われずフォーカスは設定されません。 <button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br/><b
そもそも、id にドット(ピリオド)って使えんのって話だけど、w3.org 確認したら 使える。 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). で、jQuery だとこんな感じで参照できた。 でもいちいちエスケープしたり記法変えたりするの面倒だから、[A-Za-z0-9\-\_] くらいに縛っておくのがいいと思った。
↓ jQueryの「text()」はセレクタで指定した要素に書かれているテキストを取得・変更できる命令です。 See the Pen jQuery selector i switch by nodelay (@nodelay) on CodePen. 上記サンプルでは、TEST1/TEST2と書かれたliタグを(どちらでも)クリックすると動作します。 その際に「TEST1: 」というテキストは上書きされますが、「TEST2: 」と書かれたテキストは上書きされずに後ろに追記されます。 違いは $('.test1').text('clicked'); $('.test2 i').text('clicked'); セレクタのところにclass名ではない「i」というスイッチがあるかないかです。 セレクタのところに「i」を書くと、text()が上書きモードにならずに、追記モードになります。
jQueryのajaxメソッドを使って配列をサーバに送信するのに嵌ったのでメモ サーバサイドは、ASP.NET MVCです。 まずサーバサイドのコード [HttpPost] public ActionResult Post(string[] values) { return View(); } 引数で文字列の配列を取ります。 予定では、モデルバインダーで自動的にvaluesに値が入るはずです。 で、問題のJavaScriptのコード $(function () { $.ajax({ url: "Home/Post", type: "POST", datatype: "json", data: { values: ["a", "b"] }, }); }); これを実行すると valuesはnullです。 バインドが出来ていませんね Resuestの中身を見てみると なんかパラメータ名に変なの
▂▅▇█▓▒░('ω')░▒▓█▇▅▂うわあああああああ 原因 jQuery API Documentation を見ると、 It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below). と書いてあり
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。(※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります) 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
Chromeなどのモダンブラウザであれば、デベロッパーツールがあってJavaScriptのデバッグなどもそこで容易にできる。例えば、なんかのボタンにJavaScriptでクリックイベントを設定している場合、なにが設定されているかの確認もサクッとできる。 デベロッパーツールで、イベントの中身を確認 <div id="click1">click1</div> <script> var click1 = document.getElementById('click1'); click1.addEventListener('click', function() { console.log('click1'); }); </script> Command + Option + i のショートカットで起動 調べたい要素を選択し、右側のパネル「Event Listeners」を選択する 右端のフィルタっ
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示(thickbox.jsを使用) スムーススクロール タブ機能 CSS3の擬似クラスをクラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く