jQuery中事件与动画的总结分享
1.加载DOM
1.1.window事件
window.onload=function(){}.... 时机：其他资源都加载完毕后，再执行
$(function(){}) ……：只是等待标签完毕，即可执行
区别：前者在HTML页面中只能解析最后一个,二后者是N个
window.onload() = function () {
}
$(function () {
$("li").bind("click", function () {
$(this).css("background","red");
});
});
$(function () {
$("div").bind("click", function () {
$(this).css("background", "red");
});
});
第一部分--事件
2.鼠标事件
2.1 常用鼠标事件的方法
click() :单击事件、触发或将函数绑定到指定元素的click事件
mouseover(): 触发或将函数绑定到指定元素的mouseover事件
mouseout() ：触发或将函数绑定到指定元素的mouseout的事件
经典的光棒效果:
$(function () {
$("input").click(function () {
$("li").mouseover(function () {
$(this).css("background", "green");
}).mouseout(function () {
//this.style.background = "";
this.style.cssText = "background:";
});
});
});
3.键盘事件
3.1 常用键盘事件的方法
keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件
keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件
keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件
$(function () {
$("p input").keyup(function () {
$("#events").append("keyup");
}).keydown(function () {
$("#events").append("keydown");
}).keypress(function () {
$("#events").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {
//按enter键
alert("确认要提交么?");
}
});
});
4.表单事件
4.1 常用表单事件的方法
focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件
blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件
$(function () {
//给文本框添加边框样式
$("input").focus(function() {
$(this).addClass("myclass");
}).blur(function() {
$(this).removeClass("myclass");
});
});
5.绑定事件与移除事件
5.1 绑定事件
语法:
bind(type,[data],fn),其中data不是必需的
type:事件类型、主要包括blur、focus、click、mouseout等基础事件，此外也还可以是自定义事件
fn :用来绑定的处理函数
$(function () { //给li绑定click事件、并进行样式修改
$("li").bind("click", function () {
$(this).css("background","red");
});
});
5.2 同时绑定多个事件
$(function () {
$("li").bind({
mouseover: function() {
$(this).css("background", "pink");
}, mouseout: function() {
$(this).css("background", "gray");
}
});
});
5.3 移除事件与同时移除多个事件
unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件
unbind如果要移除多个只需在两两之间添加一个空格即可
$(function () {
$("li").unbind("click"); $("li").unbind("mouseover mouseout");
});
5.4 一些其他的绑定与移除的方法
1.live() unbind()
2.on() jQuery1.7版本之后才有的方法 off()
3.delegate() undelegate()
6. 复合事件
6.1 hover()方法
语法:
hover(enter,leave); 该方法相当于mouseover与mouseout事件的组合
$("li").hover(function() {
$("li").css("background", "gray");
}, function() {
$("li").css("background", "green");
});
6.2 toggle()方法
语法:
toggle(fn1,fn2,……,fnN); 该方法用于模拟鼠标连续click事件,单鼠标单击一次就执行一个fn,从头开始按顺序执行,tolgge()使用的隐藏域属于
display,它在浏览器中是不占用位置的，与它相同的visibility是占用的
$("body").toggle(function () {
$("li").css("background", "gray");
}, function () {
$("li").css("background", "green");
}, function () {
$("li").css("background", "blue");
});
接下来再看看第二部分--动画
1. 控制元素显示与隐藏
语法:
$(select).show([speed],[callback]);
与show()方法相对的是hide()方法，该方法可以控制元素隐藏。
语法:
$(select).hide([speed],[callback]); 除了可以控制元素的隐藏外,还能定义隐藏元素时的效果，如隐藏速度
注意:绝大多数情况下,hide()方法与show()方法总是在一起使用
2. 控制元素透明度
2.1 控制元素淡入
语法:
$(select).fadeIn([speed],[callback]);
与show()方法相对的是fadeOut()方法，该方法可以控制元素淡出。
3. 改变元素高度
3.1 方法 slideUp()和slideDown()
slideDown()会将元素从上向下延伸显示,slideUp()方法正好相反,元素会从下到上缩短直至隐藏。
$(function () {
$("#btnshow").click(function () {
$("img").show(1000);
});
$("#btnhide").click(function () {
$("img").hide(1000);
});
});
$(function () {
$("#btnin").click(function () {
$("img").fadeIn(5000);
});
$("#btnout").click(function () {
$("img").fadeOut(5000);
});
});
$(function () {
$("#btnup").click(function () {
$("img").slideUp(5000);
});
$("#btndown").click(function () {
$("img").slideDown(5000);
});
});
4.animate()方法是用来自定义动画的
当我们需要对动画有更多的控制时,使用animate()方法能够更具有灵活性,因为它可以替换其他所有的方法
$(function () {
$("[type=button]").bind("click", function () {
//两个特效并行执行，不加入队列：
$("div").
animate({ "font-size": "50px" }, 3000)
.animate({ "width": "300px" }, { queue: false, duration: 3000 });
});
});
4.1 animate()方法替换一些其他的方法
//替换show()方法
//$("img").show(1000);
$("img").animate({height:"show",width:"show",opacity:"show"},1000);
//替换fadeIn()方法
$("img").fadeIn(5000);
$("img").animate({opacity:"show"},5000);
//替换slideDown()方法 $("img").slideDown(5000);
$("img").animate({ height: "show" }, 5000);
这些动画就是animate()方法的一种内置了特定样式的简写形式,这些特定的样式值可以为"show"、"hide"、"toggle",也可以自定义数值
$("div").click(function() { $(this).next().toggle(); $(this).next().fadeTo(600,0.2); $(this).next().fadeToggle(); $(this).next().slideToggle(); });
以上这篇jQuery中事件与动画的总结分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
jqeury的validationEngine做ajax校验，当表单中的最后一个字段需要做ajax验证,在字段输入完毕后点击回车提交表单时不起作用，接下来为大家介绍下解决方法感兴趣的各位可以参考下哈2013-03-03
对一个文件域(input type=file)使用了验证后，我们总会希望把文件域中的值给清空了，在IE中，由于安全设置的原因，是不允许更改文件域的值的，接下来为大家介绍一下解决方法2013-04-04
这篇文章主要介绍了jQuery实现简单下拉导航效果,通过简单的元素遍历与样式替换实现下拉导航的功能,非常具有实用价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了JQuery EasyUI 日期控件如何控制日期选择区间,需要的朋友可以参考下2014-05-05
下面小编就为大家带来一篇浅谈jquery点击label触发2次的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
jQuery.ajax 跨域请求webapi设置headers的解决方案
需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息方能实现，本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jQuery图片切换动画效果，处理动画延迟，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数，由于两个页面不在一个域中，会提示没权限。如何解决该问题呢，请看下面示例代码。2015-03-03
这篇文章主要介绍了jquery简单图片切换显示效果实现方法,可以实现简单的图片切换功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery基于Ajax方式提交表单功能,结合实例形式分析了jQuery使用ajax方式提交表单的具体步骤与常见操作技巧,需要的朋友可以参考下2017-02-02
最新评论