初窥JQuery(二)事件机制(1)
JQuery的事件处理机制包括:页面加载、事件绑定、事件委派、事件切换四种机制。我们先从
当然我个人还是习惯于用第一种,增强可读性,需要
<styletype="text/css">
#Menu
{
background-color:Red;
width:150px;
height:30px;
text-align:center;
border:solid1pxblack;
}
#Menu_child
{
width:150px;
border:solid1pxblack;
display:none;
}
#Menu_childdiv
{
background-color:#f3f3f3;
width:150px;
height:30px;
text-align:center;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
$(document).ready(function(){
$("#Menu").hover(
function(){
$("#Menu_child").fadeIn();
},
function(){
$("#Menu_child").fadeOut();
});
});
</script>
</head>
<body>
<divid="Menu">JQuery事件处理</div>
<divid="Menu_child">
<div>页面加载</div>
<div>事件绑定</div>
<div>事件委派</div>
<div>事件切换</div>
</div>
</body>
toggle(fn,fn)实例:
HTML代码
<inputtype="button"value="toggle()方法"id="toggle"/>
JQuery代码
$("#toggle").toggle(
function(){
alert("第一次点击");
},
function(){
alert("第二次点击");
},
function(){
alert("第三次点击");
},
function(){
alert("第四次点击");
});
HTML代码:
<ul>
<li>页面加载</li>
<li>事件绑定</li>
<li>事件委派</li>
<li>事件切换</li>
</ul>
JQuery代码:
$("li").live("click",function(){
varindex=$("li").index(this);//获取li的索引
vartext=$("li").eq(index).text();//根据单击项索引获得文本值
alert("索引:"+index+",文本值:"+text);
});
die([type],[fn]):die()使用起来相当简单,一种删除所有live()事件,一种指定删除,两个参数是可选的。
$("#die").click(function(){
$("li").die();//删除所有live()事件
$("li").die("click");//删除指定为click的live()事件
$("li").die("click",function(){alert("删除live()事件成功")});//删除指定为click的live()事件并执行函数
});
仅供参考,欢迎感兴趣的朋友参与讨论。下篇文章再说事件绑定,写一起太长了。未完待续........
相关文章
- jQuery笔记(5) 做一个to do list!
- jQuery实现让博客桃花飘落
- jQuery Timers 定时插件使用详解编程语言
- jQuery contextmenu事件详解
- 用javascript实现jquery的document.ready功能的实现代码
- Jsonp跨域的原理以及Jquery的解决方案
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
- jquery学习之一对象访问
- jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果
- 基于JQuery的多标签实现代码
- jquery移除button的inlineonclick事件(已测试及兼容浏览器)
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jquery阻止冒泡事件使用模拟事件
- JQuery触发事件例如click
- jQuery过滤方法filter()选择具有特殊属性的元素
- 浅谈jQuery事件源码定位问题
- jquery实现动态画圆
- jquery用data方法获取某个元素上的事件