选择器,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>