fc2ブログ
WEBマスター目指して日々勉強!!
page top
[jquery/js] ie6でもpng表示させるためのjqueryプラグイン
CATEGORY/javascript
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


スポンサーサイト



page top
[jquery/js] よく使う関数をメモ
CATEGORY/jQuery
とりあえずよく使う項目を
まとめてみた。

とはいえ見にくくてすいません。。。


■ページを読み込んだら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");
page top
[jquery/js] jqueryを高速化
CATEGORY/jQuery
下記のサイトを元に自分なりの言葉でまとめて
理解をしていく。
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( ... );



ここまでかな、、
よく使いそうなのは、
残りはもう少し慣れてきたら
触れてみようかな。。
© WEB-WORKMAN. all rights reserved.
Page top
FC2 BLOG