选择器，DOM操作，事件

选择器，DOM操作，事件
javascript事件：
onclick,ondlbclick
onmousedown,onmouseup
onmouseover,onmouseout
onkeydown,onkeyup
onblur,onfocus
onchange

Jquery事件，与JavaScript 事件相似，只是把on去掉。
click(function(){});
focus(function(){});

1.click,dblclick事件：
案例：换背景(用缩略图换背景，单击轮转换背景)
特别：

toggle(function(){},function(){}....function(){});

$(document).ready(function () {

$(this).toggle(function () {

$(document).find("body").css("background-image", "url(images/bg1.jpg)");

}, function () {
$(document).find("body").css("background-image", "url(images/bg2.jpg)");
}, function () {
$(document).find("body").css("background-image", "url(images/bg3.jpg)");
});
});

2.mousedown,mouseup事件：
案例：图片被单击后产生一种被按下去又抬起来的效果。

$(document).ready(function () {
$(".tt").mousedown(function () {
$(this).css("margin", "11px 11px 11px 11px").css("height","78px").css("width","78px").css("border", "1px solid black");
}).mouseup(function () {
$(this).css("margin", "10px 10px 10px 10px").css("height", "80px").css("width", "80px").css("border", "1px solid gray");
});
});

3.mouseover,mouseout事件：
hover(function(){},function(){})

案例：奇偶行背景不色的光棒效果。
法一：最原始的方法：直接操作样式表的background-color样式

<script language="javascript">
$(document).ready(function () {

$("#GridView1 tr:gt(0):odd").css("background-color", "pink");

var bg = "white";
$("#GridView1 tr:gt(0)").mouseover(function () {
bg = $(this).css("background-color");
$(this).css("background-color","yellow");
}).mouseout(function () {
$(this).css("background-color", bg);
});
});
</script>

法二：通过增与删样式表选择器来实现。toggleClass

<script language="javascript">
$(document).ready(function () {
$("#GridView1 tr:gt(0):odd").addClass("odd");

$("#GridView1 tr:gt(0)").mouseover(function () {
$(this).toggleClass("mover");
}).mouseout(function () {
$(this).toggleClass("mover");
});
});
</script>

4.focus,blur事件
案例：文本框中（必填）效果。

<script language="javascript">
$(document).ready(function () {
$("#TextBox1").focus(function () {
$(this).css("color", "black");
if ($(this).val() == "(必填)") {
$(this).val("");
}

}).blur(function () {
if ($(this).val().length == 0) {
$(this).css("color","#aaaaaa").val("(必填)");
}
});
});
</script>