Hatena::ブログ(Diary)

あじゃぱー

2007-09-12 jQueryネタ

[]jQuery超初心者にありがちな6つの間違い

代入しようとする

$("#button").click = function(){ alert("Hi!"); }

違うよ。ぜんぜん違うよ。

引数として渡すんだよ。

$("#button").click( function(){
        alert("Hi!");
    }
);

ありもしないプロパティにすがる

$("#div1").top( 100px );
$("#img1").src( "next_pic.jpg" );

違うよ。ぜんぜん違うよ。

cssはwidthとheightしかプロパティにされてない。css("key", "val")を使うべし。srcもプロパティになってない。attr("key", "val")使うべし。

$("#div1").css("top", "100px");
$("#img1").attr("src", "next_pic.jpg");

何度もcssしちゃう

$("#div1").css("position", "absolute").css("top", "100px").css("left", "100px"):

違うよ。ぜんぜん違うよ。

「{}」でまとめて書けるよ。

$("#div1").css({position: "absolute",  top: "100px", left: "100px"});

↓間違いでした。スタイルの指定は、JS&CSSスタイル両方で大丈夫だそうです。

cssで間違った名前使っちゃう

$("div").css("background-color", "blue");

違うよ。ぜんぜん違うよ。

cssとjavascriptは微妙に違うよ。

$("div").css("backgroundColor", "blue");

こことか参考になるよ。


ダブルクォート内でダブルクォート使っちゃう

$("<div class="hoge"><img src="foo.jpg"></div>").appendTo("body");

違うよ。ぜんぜん違うよ。

シングルクォートにしましょう。

$("<div class='hoge'><img src='foo.jpg'></div>").appendTo("body");

end()の存在を忘れる

$("#grow")
	.find("#in").html("<img src='some.jpg'>")
	.parent().find("a").html("<span>wow</span>")
;      //↑parent()で戻ろうとしている

違うよ。ぜんぜん違うよ。

end()のほうがスマートだよ。

$("#grow")
	.find("#in").html("<img src='some.jpg'>").end() //前のオブジェクトに戻る
	.find("a").html("<span>wow</span>")
;

thisの存在を忘れている

$("#button").click(function(){
	alert( $("#button").val() );
});

違うよ。ぜんぜん違うよ。

二度手間になるから、$(this)を使うといいよ。

$("#button").click(function(){
	alert( $(this).val() );
});

もちろん全部自分のことです><


<修正>

最後の例のalert( $("this").val() );→alert( $(this).val() );を修正。

id:kitsさんご指摘ありがとうございます。

<修正2>

cssのプロパティ名はJS&CSSスタイル両方使えるとのこと。

id:shrkwさんありがとうございました。

みのみの 2007/09/28 11:25 はじめまして。<br />javascriptと平行してjQueryを勉強している僕にはとっても参考になる記事でした。<br />

minesoutaminesouta 2007/09/28 23:03 そう言って頂けるとうれしいです///

サルコシサルコシ 2007/10/02 15:45 はじめまして。JQueryの記事参考になりました。これからも、JQueryの記事を書いてもらえると嬉しいです。

minesoutaminesouta 2007/10/03 01:43 コメントどうもです。
時間とネタ不足でこれ以上の記事は…orz
他のjavascripterなブロガーに期待しましょう。

shrkwshrkw 2007/10/15 20:26 .css()のプロパティはCSSスタイルでもJSスタイルでもどっちでもいけますよ。http://docs.jquery.com/CSS/css#name

minesoutaminesouta 2007/10/15 23:24 ご指摘ありがとうございます。
即行で修正します。

くくむくくむ 2008/11/21 05:50 はじめまして。
試してみましたが.css()は1つのスタイルを指定するときはCSSスタイルでもJSスタイルでもいけるようですが、
複数のスタイルを一括して設定するときはJSスタイルで書かないといけないようです
○.css('backgroundColor','blue')
○.css('background-color','blue')
○.css({backgroundColor:'blue'})
×.css({background-color:'blue'})
混同しないように常にJSスタイルで書いた方が無難ですね^^;

minesoutaminesouta 2008/11/21 23:57 くくむさんコメントありがとうございます。
試してみたところ、CSSスタイルでもクォートをしておくと実行できるようです。
○ .css({"background-color": "#eee", "line-height": "1.3em"});