purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

jQuery

jQueryで要素を追加する

before, after, prepend, append がある 要素の先頭に子要素を追加 prependを使う $("p").prepend("<b>Hello</b>"); 要素の末尾に子要素を追加 appendを使う $("p").append("<b>Hello</b>"); before, afterは書く気力がないので↓参照ってことで via jQueryで要素を挿入でき…

jquery.cookie.jsでCookie情報が消えない

それはもしかしたらパスが異なっていて、同じ名前のCookieがパス毎に複数できているからかもしれない パスを指定しよう ※有効期限も設定しないと、期限切れで、値が有効にならない場合がある。 $.cookie("pc-mode", "pc", { expires: 7, path: "/" }); ちな…

jQueryで右クリックの禁止

jQueryでユーザアクションの禁止 $('body').on('contextmenu', false) .on('selectstart', false) .on('mousedown', false); こんな感じでやる

jQueryで拡張関数 $.extend と $.fn.extend の違い

参照 $.extend、$.fn.extend メソッドを使用して jQuery オブジェクトの機能を拡張する jQuery.extendとjQuery.fn.extendの違い - こんにちはこんにちはmonmonです! $.extend 静的メソッド → 単なる関数のイメージ $.extend メソッドには、「メソッド名: 匿…

jQuery.event.add と $(function(){}); の違い

参照 jQuery - $(function(){}); の落とし穴 - 旧・私と私の猫の他は誰でも隠し事を持っている jQueryで画像が読み込まれたら処理をする | Site-Study.com $(function(){}); 基本は $(function(){ }); って書いてページがロードしたら実行ってのをやるけど、…

jQueryでチェックボックスのチェック状態を調べる

参照 jQueryでチェックボックスのチェック状態を調べる方法 - 大人になったら肺呼吸 その1 checked属性の値で判断 if($("#check1:checked").val()) { alert("チェックされています。"); } その2 propメソッドを使う(1.6からサポート) if($("#check1").pr…

jQueryのlive、onの記述例

参照 jQuery の .live() の代わりは .on() - HAM MEDIA MEMO 政治的な絡みなどで PCサイトはjQuery1.4.4 SPサイトはjQuery1.10.1 だが、そこで同じjsを参照するといったことがあった そこで、jsロード後に生成された要素に対してイベントをつけたいというこ…

jQueryでjsonを取得する

参照 JavaScript - jQuery で JSON ファイルを読み込む - Qiita ↑の例がわかりやすくてthanksです。 cast.json { "1187113": { "id": "100001", "name": "ナターシャ", "service": "やります" }, "1187127": { "id": "100002", "name": "ジェニファー", "ser…

JavaScript(jquery)で認証サイトを作る

jqueryでCookieを使って簡易認証サイトを作れるようにしました。 Colorboxをカスタマイズして作りました。 jquery簡易認証colorbox http://purazumakoi.info/sample/js/auth_colorbox/ ちょっと画像のリンクとか切れてるのもありますが、一応動くので一旦コ…

selectでidやclass指定で値をセットしたい。

基本的なやり方は ('select#target').val('1'); といった形でvalで指定するがそれだと、↓みたいな時に上手く設定できない。 ※同じvalがselectの中に内容に設計できない場合を想定 <select id="" name="tree"> <optgroup label="商品カテゴリ1"> <option id="js01" value="02">hoge1</option> </optgroup> <optgroup label="商品カテゴリ2"> <option id="js02" value="02">hoge2</option> </optgroup> <…</select>

イベントを初期で一回実行 trigger

初期実行するイベントvia ふじこのプログラミング奮闘記 $('.hoge').click(function() { alert("aaa"); } $('.hoge').trigger('click'); これでクリック時のイベントをload時に強制的に一回呼び出すことになる bindで複数イベントを指定しててもいける $(".h…

今スクロールされるかを取得するイベント

最近、jqueryでtriggerっていうのがあるってしって、超便利らしいって事をしった。 例えば、selectのchangeイベントを実装するときとか、スマートに書ける そして↓にあったこのソース Custom events - Code examples - CarouFredSel //find out whether the …

ajaxでutf-8じゃないと文字化けする対策

jqueryでajaxの処理をするときに よく、shift_jsのhtmlにajaxで外部ファイルを読み込むと、UTF-8じゃないと文字化けすることがある。これの対策として $.ajax({ beforeSend: function(xhr){ xhr.overrideMimeType("text/html;charset=Shift_JIS"); }, type: …

ラジオボタン操作

radioボタンの編集! チェックを外す $("input:[name=hogehoge]").attr("checked",false); チェックを入れる $("input:[name=hogehoge]").val(['0']); チェックされているもののvalを取る var value = $('input[name="hogehoge"]:checked').val();

ページ内にその要素が存在するかを確認する場合

sizeプロパティを使う。 .hogeクラスがある場合のみ処理を行う場合 if($(".hoge").size() > 0){ alert("hogehoge"); } 単にこう書くだけでも良い if($(".hoge").size()){ alert("hogehoge"); } lengthプロパティと機能は同じ 参照 jQueryによる要素の存在チ…

jQuery Form Pluginでエラーが帰ってくる場合

クロームだと Uncaught SyntaxError: Unexpected token <" とか返ってくる。 ちなみにjqueryは jquery-1.7.2.min.js ソースは $("form").ajaxForm({ dataType: 'json', success: function(data,stat) { alert("完了しました。"); }, error: function(xhr, st…

Ajax でGoogle Analyticsにカウントさせる。

demo Ajax でGoogle Analyticsにカウントさせる サンプルメモ jsサンプル // GA 定義 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxxx-x']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.t…

jqueryで名前にカッコがついたオブジェクトを取得

phpのライブラリとかで吐き出すと そいつの仕様でカッコで書いてある時があります。 そんな時に $("input[name='chk_hoge[1]']").val() via jQuery IDに括弧がついたオブジェクトを取るには | Kinopyo Blog

現在の要素から指定したセレクター書式の親要素が見つかるまで探す

parent, parents, parentsUntilとか色々あるけどいずれでも 指定した直近の親要素1つを返すことは出来ない。 それはclosestメソッドで行なう。 closest([expr]) - jQuery 日本語リファレンス html <div class="section"> <h1 class="h1">h1です</h1> <div> <div class="start">スタート</div> </div> </div> js $(function(){ var section = $(".s…

noopとは

jQuery1.4から追加されたnoop $.noopとかjQuery.noopって書かれてるそれだけど 要は function() {} と同義 via Ikemasa Blog - jQuery.noopの使い方

IEチェック

今は非推奨になってるけど、やっぱり便利だしメモ //IE6以下か? if(jQuery.browser.msie && parseInt(jQuery.browser.version) <= 6){ } ネイティブに書くなら via http://winofsql.jp/VA003334/infoboard.php?id=070828100942&mid=sjscript&pid=3 <SCRIPT type="text/javascript"> var use…

jqueryで複数の要素に同じ処理を当てる。

jquery 複数条件 全く同じ処理を複数の要素に当てる際に使う まったく初歩的な文法レベルのものだけど、しらなかったのでメモ $("#id1, #id2, #id3").each(function() { } こんな感じでダブルクォーテーション(シングルでも多分可)の中 cssみたいにカンマ…

ロールオーバーで画像をフェードイン、フェードアウトして元の画像に戻る

var opacity = '0.7'; $('img.fadeImg').each(function() { var img = $(this); img.wrap('<span class="inlineBlock"></span>'); img.hover( function() { img.stop(true, true).fadeTo(50, opacity).fadeTo(500, 1.0); }, function() { img.fadeTo(100, 1.0); } ); }); .wrap()でimg要素をin…

オブジェクトのthisに行きたいけどjquery使うとその要素のthisになってしまう。

イマイチ理解出来てないので完全に自分メモ jquery.jcarousel.jsを使ってスライドショーのautoplayをしているが aタグをクリックしたら止めたい 162〜184行目あたり var self = this; ・ ・ ・ this.funcNext = function() { self.next(); }; this.funcPrev …

画像をクロスフェードで切り替えるライブラリ

このライブラリは非常に素晴らしいです。 via [jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社 しかし、僕のファイル命名規則とかと、ちょっとスタ…

ウィンドウ、リサイズ時のイベント処理の記述方法

調べてたら丁度よいソースを見つけました。感謝。 via jQuery「ウィンドウ、リサイズ時のイベント処理の記述方法」 function doSomething() { リサイズ時、実行する命令 }; var resizeTimer = null; $(window).bind('resize', function() { if (resizeTimer)…

クロスブラウザでiframeの高さを内容コンテンツの高さに合わせる

コンテンツ内の他のページをiframeで読み込んで表示したときスクロールを無しにしたい。 ヘッダとかフッダとか消して、コンテンツ部分だけをiframeに挿入する為。 ただ高さを取得することは割と簡単だったが、 ブラウザの戻るボタンで戻った時もコンテンツの…

faqとかのslideToggleを使ったアコーディオン

これだと文字が書いていない一行がリンクの範囲になる <script type="text/javascript"> // <![CDATA[ $(function(){ $('dl.faq > dd').hide(); $('dl.faq > dt').css('cursor', 'pointer').click(function() { $(this).next().slideToggle('normal'); }); }); // ]]> </script> これならspanをクリッ…

ウィンドウ、リサイズ時のイベント処理の記述方法

調べてたら丁度よいソースを見つけました。感謝。 via jQuery「ウィンドウ、リサイズ時のイベント処理の記述方法」 function doSomething() { リサイズ時、実行する命令 }; var resizeTimer = null; $(window).bind('resize', function() { if (resizeTimer)…

fadein するとIE7で文字がにじむ

via jQuery fadeIn|VISTA IE7で文字がジャギる。 » artvecta blog ちなみにwindows XP、 7でも確認された現象 引用 $(“#targetDOM”).fadeIn(1000,function(){ this.style.removeAttribute(“filter”); }); こんな感じにすれば回避できるけどMac safariのコン…