読者です 読者をやめる 読者になる 読者になる

purazumakoiの[はてなブログ]

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

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のコン…

thisの子要素の取得方法

via jQueryでthisの子要素を取得するやり方いろいろ | Base Views 1. $('hoge',this) 2. $(this).children('hoge') 3. $(this).find('hoge') 今まで3番の方法でやってたけど、1番の方法みたいな方が直感的かな。 でもそれを言ったら1番のでもhogeとthisの順…

jQueryで新規にメソッドを追加する方法

via 魔法の鎖のつなぎ方(2) - [JavaScript]All About $.fn.sample = function() { // 処理 };

ユーザスクリプトでjQueryを使用する

firefoxで、Greasemonkeyでユーザスクリプトを実行するときjQueryを使いたかったのでそのメモ via Google イメージ検索画像をレイヤー上に表示 (Greasemonkey) : Serendip - Webデザイン・プログラミング 引用 (function() { // load jquery library var GM_…

選択されているラジオボタンにより表示領域を変更

デモ 選択されているラジオボタンにより表示領域を変更 js部分 <script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> //

タブメニューやスライドショーをに使えるjQueryプラグイン

ボタンを押したら画像がフェードイン、アウトするスライドショーを作りたいと思って JQuery Cycle Plugin のfadeを使っていたのだが、これだと枠をCSSで背景として、メイン画像をCMSで登録するということがなかなか難しかった そこで jQueryを使ったタブメニ…

Ajaxの非同期通信

jQueryでAjax非同期通信をします。 例えばFAQのPVカウントとか aタグをクリックしたらアコーディオンで開閉するコンテンツなどにオープン時のみ PVカウントを+1する時とかに利用 <script type="text/javascript" src="../../js/jquery-1.2.6.min.js"></script> <script type="text/javascript"> var flg = new Array() ; function fPV(id) { //排他的論理和でオープン時を…

ラジオボタンをクリックした時に対応したブロックを表示非表示

メニューは4つ、URLと外部URLは同じ欄を使う $menuAry = array( 0 => '基本', 1 => 'PDFリンク', 2 => 'URL', 3 => '外部URL', ); <script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function() { class_name = new Array("t…

jQueryで選択されたラジオボタンの値を取得

via suz-lab - blog: jQueryで選択されたラジオボタンの値を取得 ということで 下記のようなセレクタを用いることで可能となります。$("input[@type='radio']:checked").val()

n番目の子要素を取得する

via :nth-child(index/even/odd/equation) - jQuery 1.3.2 日本語リファレンス // 0番目の子要素を取得 :eq(0) sample $("ul li:eq(2)").css("background-color", "yellow");

$を使わずに他のライブラリと共存する

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery_auto_j.js"></script> <script language="javascript" type="text/javascript"> //

jQuery入門1

なんか今jQueryが熱いらしいということで、ちらっと見てみたら ウノウラボとかで紹介してて、なんか簡単そうだなと思ったので時間作って凄く簡単なの作ってみたんです。 といっても、1から書くとかはなかなか難しいもので、よって4GALAXYのメモにお世話にな…