前端基础 - JQuery事件切换(原来还有这种写法)
2023-09-11 14:15:41 时间
JQuery事件切换
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
/**第一种写法*/
/*$("#divId").mouseover(function() {
$(this).html("鼠标进入");
}).mouseout(function() {
$(this).html("鼠标离开");
})*/
/**第二种写法*/
$("#divId").hover(function() {
$(this).html("鼠标进入");
}, function() {
$(this).html("鼠标离开");
})
var i = 0;
$("#bId").click(function() {
i++;
if(i % 2 == 0) {
alert("222");
} else {
alert("111");
}
})
/*$("#bId").toggle(function() { //浏览器有可能会不兼容
alert("111");
}, function() {
alert("222")
})*/
})
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body>
</html>
相关文章
- CSS,Jquery精美进度条和滑动条(滑块)插件
- jQuery显示隐藏密码插件jquery.toggle-password演示
- 基于zepto或jquery的手机端弹出框成功,失败,加载特效
- [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
- jQuery入门(3)事件与事件对象
- jQuery如何给body绑定事件?
- 解密jQuery事件核心 - 模拟事件(四)
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
- jQuery获取当前按钮的id
- jQuery事件委托
- jQuery如何追加内容?匿名函数
- 第一百六十九节,jQuery,基础事件
- jQuery 事件的命名空间的含义
- jquery iframe[转]
- jquery选中
- jquery移除button的inline onclick事件
- 在SAP UI5应用里使用jQuery.ajax读取数据并显示在页面上
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- jquery模糊查询--搜索demo效果示例(整理)
- jQuery UI 实例 - 切换 Class(Toggle Class)
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
- jQuery中的事件
- python web py入门(61)- jQuery - 使用keyup()和keydown()函数
- python web py入门(44)- jQuery 事件 - 函数表达式
- jQuery 元素选择器