jQuery中事件与动画的总结分享中事件与动画的总结分享
下面小编就为大家带来一篇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("确认要提交么?");