WEBマスター目指して日々勉強!!
jqueryのプラグインをつかって
IE6でもpngを扱えるようにしてくれる。 下記サイトで紹介していますので リンクしておきますか。 http://www.ezgate-mt.sakura.ne.jp/jquery/55.html http://ma-creators.com/2008/05/13.html http://www.nk0206.com/life/2008/03/jquery-plugins-ie-png-fixie6pn.html スポンサーサイト
|
とりあえずよく使う項目を
まとめてみた。 とはいえ見にくくてすいません。。。 ■ページを読み込んだらJavaScriptを実行させる。 -------------------------------------------- $(document).ready(function(){ alert("完了"); }); それか $(function(){ alert("完了"); }); ■属性を取得 -------------------------------------------- <p> Once there was a <em title="huge, gigantic">large</em> dinosaur... </p> <script type="text/javascript"> <!-- var title = $("em").attr("title"); alert(title); //--> </script> ■hrefを書き換える -------------------------------------------- $(a).attr(href,"パス") ■HTML取得 -------------------------------------------- $("#hoge").html() ■HTML書き換え -------------------------------------------- $("div").html("<span class='red'>Hello <b>Again</b></span>"); ■HTML挿入 -------------------------------------------- <p>I would like to say: </p> $("p").append("<b>Hello</b>"); ■クリック -------------------------------------------- $("#hoge").click( function (){} ); ■CSS追加 -------------------------------------------- p { margin: 8px; font-size:16px; } .selected { color:red; } .highlight { background:yellow; } <p>Hello</p> <p>and</p> <p>Goodbye</p> $("p:last").addClass("selected"); ■CSS削除 -------------------------------------------- p { margin: 4px; font-size:16px; font-weight:bolder; } .blue { color:blue; } .under { text-decoration:underline; } .highlight { background:yellow; } <p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p> $("p:even").removeClass("blue"); |
下記のサイトを元に自分なりの言葉でまとめて
理解をしていく。 http://d.hatena.ne.jp/nitoyon/20081211/jquery_fast_css まず高速化に必要な項目は下記 1. 何度も同じセレクタを実行しない 2. クラスだけを指定するのは禁止 3. #id を積極的に使う 4. 途中までの結果を再利用する 5. 子供セレクタ(>)を使うと速くなることがある 詳細は上記サイトを参考にしてと。。 構文を忘れるのでメモ。 何度も同じセレクタを実行しない --------------------------------------- ■変数型 var hoge = $("div.foo"); hoge.addClass("bar"); hoge.css("background", "#ffffff"); hoge.click(function(){alert('hoge');}); ■メソッドチェーン型 $("div.foo") .addClass("bar") .css("background", "#ffffff") .click(function(){alert('foo');}); ↑こうやって参照すればいいわけだな、 クラスだけを指定するのは禁止 --------------------------------------- jQuery ではクラス名での探索は非効率的なので タグとくっつけて検索すればよいのか。 $("div.foo").css("display", "none"); 出来るだけIDで --------------------------------------- jQuery ではクラス名での探索は非効率的という理由で 極力IDで。 $(function(){ $("#main").css("color", "red"); // ← ココ }); 途中までの結果を再利用する --------------------------------------- これは意外とわすれそうですね var entries = $("#main div.entry").css( ... ); $("div.body", entries).css( ... ); ここまでかな、、 よく使いそうなのは、 残りはもう少し慣れてきたら 触れてみようかな。。 |
| ホーム |