jQuery快速高效制作网页交互特效

2020-05-18 09:00:18易采站长站整理

jQuery中的事件

1,基础事件

基础事件又包括 

a:window事件

在javaScript中的window事件又  window onload = fn(); 和onclick  在jQuery中常用的事件有文档就绪事件,对应的方法ready()

$(document).ready(fn(){}); 

b:鼠标事件

常用的鼠标事件有:

      click(fn);         单机鼠标时发生,fn表示绑定的函数

      keydown(fn);  鼠标指针移过时,fn表示绑定函数

      blur(fn)          鼠标指针移出时,失去焦点时,所执行的函数

      比如  最常见的光棒事件


$(function () {
//获取所有的li元素
$("li").mouseover(function () {
$(this).css("background", "pink");
});
//注册事件
$("li").mouseout(function () {
$(this).css("background", "");
});
});
<ul>
<li>一个示例</li>
<li>二个示例</li>
<li>三个示例</li>
</ul>

 c:键盘事件

键盘事件指当键盘聚焦到Web浏览器时,用户每次按下或者释放按键时所产生的事件常用的键盘有keydown(),keyup(),keypress()


//键盘事件
$("input").keyup(function(event) {
var s =event.keyCode;
alert(s);
//打印键盘的keycode值
}); <h2>键盘事件</h2><br> --<br> <body>
<input /><span id="first">注意用词</span> <br> --

d:表单事件

表单事件是所有事件中最稳定,且支持最稳定的事件之一,除了用户选取单选框,复选框等产生的click事件外,当元素获得焦点时触发focus事件,失去焦点时触发blur事件


//表单事件
$("input").focus(function () {
$("#first").addClass("a");
})
$("input").blur(function () {
$("#first").removeClass("a");
});
});
---
<h2>键盘事件</h2>
<input /><span id="first">注意用词</span>

e:绑定事件

绑定事件是指为匹配到的元素同事绑定一个或者多个事件,使用bind()方法

语法:bind(type,[data],,fn)

对应的unbind() 解除事件

例如:为一个无序列表绑定光棒效果


$("li").bind({
"mousemove": function () {
$(this).css("background", "blue");
}, //鼠标移过 获得焦点
"mouseout": function () {