锋利的JQuery-Jquery中的事件和动画
有时候觉得这些内容都好简单，真想看看就算了。
事件绑定
bing(type [,data],fn)
第一个参数：事件类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,
mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,
mouseleave,change,select,submit,keydow,keypress,keyup和error
第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数用来绑定处理函数
通过一个实例：
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>实现随鼠标移动而显示的效果：
(function(){
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
})
})合成事件
1.hover()
语法为hover(enter,leave),上面的例子则可以写成：
$(function(){
$(#panel h5.head).hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div,content").hiden();
})
})2.toggle()
语法为toggle(fn1,fn2,fn3..):
$(function(){
$(#panel h5.head).toggle(function(){
$(this).addClass("highlight");
$(this).next("div.content").show();
},function(){
$(this).removeClass("highlight");
$(this).next("div,content").hiden();
})
})冒泡事件
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
<body>
<div >
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div ></div>
</body><script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
<body>
<div >
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div ></div>
</body><script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
//或者return false;
}
})
})
</script>
<body>
<form action="test.html">
用户名：<input type="text" />
<br/>
<input type="submit" value="提交" />
</form>
<div ></div>
</body>事件对象属性
<script>
$(function(){
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
})
</script>
<body>
<a href='http://google.com'>click me .</a>
</body>
"click"event.preventDefault()方法
event.stopPropagation()方法
<script>
$(function(){
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);//获取触发事件的<a>元素的href属性值
return false;//阻止链接跳转
});
})
</script>event.relatedTarget()：mouseover和mouseout所发生的元素可以通过event.relatedTarget()
- 上一篇 »JQuery笔记
- 下一篇 »JQuery学习笔记，4JQuery中的事件和动画