选择器,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>
posted @ 2015-06-15 15:26  白天\不懂/夜的黑  阅读(169)  评论(0编辑  收藏  举报