选择器,DOM操作,事件
2015-06-15 15:26
288 查看
选择器,DOM操作,事件
javascript事件:
onclick,ondlbclick
onmousedown,onmouseup
onmouseover,onmouseout
onkeydown,onkeyup
onblur,onfocus
onchange
Jquery事件,与JavaScript 事件相似,只是把on去掉。
click(function(){});
focus(function(){});
1.click,dblclick事件:
案例:换背景(用缩略图换背景,单击轮转换背景)
特别:
2.mousedown,mouseup事件:
案例:图片被单击后产生一种被按下去又抬起来的效果。
3.mouseover,mouseout事件:
hover(function(){},function(){})
案例:奇偶行背景不色的光棒效果。
法一:最原始的方法:直接操作样式表的background-color样式
法二:通过增与删样式表选择器来实现。toggleClass
4.focus,blur事件
案例:文本框中(必填)效果。
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>
相关文章推荐
- 条款20:宁以pass-by-reference-to-const替换pass-by-value
- MySQL和MsSQL实时自动数据同步
- [iOS]判断当前时间是否在指定的时间段内
- 2014年09月07日数学真题
- 我和阿里的五次“相亲”(或者“约会”)
- keil4编程环境技巧2:找不到u32定义?
- Android自定义View—SildeMenu
- 调试core文件的实用命令
- Apache连接PHP后无法启动问题解决思路
- Oracle 查询表结构
- jQuery开发之选择器二
- android 开发环境的搭建
- 后台调用js
- 本体的一些认识
- mybatis--使用in的多个参数查询。
- Leetcode----处理字符串
- Mac中Git的简单实用(3) --- Github远程仓库
- ssanf
- StringBuffer中的flush()方法作用
- maven 向本地私库导入jar