上海优化公司有哪些,青岛seo推广公司,响应式网站注意事项,如何做网站网站jQuery中的事件
jQuery事件是对JavaScript事件的封装#xff0c;常用事件分类如下#xff1a;
基础事件#xff1a;window事件 鼠标事件 键盘事件 表单事件
复合事件(多个事件的组合)#xff1a;鼠标光标悬停 鼠标连续点击
1、鼠标事件
鼠标事件是当用户在文档上移…jQuery中的事件
jQuery事件是对JavaScript事件的封装常用事件分类如下
基础事件window事件 鼠标事件 键盘事件 表单事件
复合事件(多个事件的组合)鼠标光标悬停 鼠标连续点击
1、鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件常用鼠标事件有
方法描述执行时机click( )触发或将函数绑定到指定元素的click事件单击鼠标时mouseover( )触发或将函数绑定到指定元素的mouse over事件鼠标移过时mouseout( )触发或将函数绑定到指定元素的mouse out事件鼠标移出时
以mouseover()为例实现鼠标移过时特效
//当鼠标移过元素时 为事件添加响应方法
$(#nav li).mouseover(function() { //当鼠标移过#nav li元素时
$(this). addClass(heightlight); //为鼠标所在li元素添加样式
});
$(#nav li).mouseout(function() { //当鼠标移出#nav li元素时
$(this).removeClass(); //移除鼠标所在li元素的全部样式
});
//this指鼠标所在事件的当前元素对象
2、键盘事件
用户每次按下或者释放键盘上的键时都会产生事件常用键盘事件有
方法描述执行时机keydown( )触发或将函数绑定到指定元素的keydown事件按下键盘时keyup( )触发或将函数绑定到指定元素的keyup事件释放按键时keypress( )触发或将函数绑定到指定元素的keypress事件产生可打印的字符时
3、表单事件
当元素获得焦点时会触发focus事件失去焦点时会触发blur事件详见下表
方法描述执行时机focus( )触发或将函数绑定到指定元素的focus事件获得焦点blur( )触发或将函数绑定到指定元素的blur事件失去焦点
示例
p
label用户名/label
input namemember typetext /
/p
p
label密码/label
input namepassword typetext /
/p获得焦点设置样式失去焦点去除样式
$(document).ready(function () {
$([namemember]).focus(function(){
$(this).addClass(input_focus);
});
$([namemember]).blur(function(){
$(this).removeClass(input_focus);
});
});二、绑定事件bind()
除了使用事件名绑定事件外还可以使用bind()方法
1、绑定单个事件
语法bind(事件名,函数)
click 事件类型 事件类型要用引号引起来
”function()“ 处理函数
2、同时绑定多个事件方法
bind({事件名:函数,事件名:函数,.....})
$(input[nameevent_1]).bind({
mouseover: function () {//为mouseover绑定方法
$(ul).css(display, none);
},
mouseout: function () {//为mouseout绑定方法
$(ul).css(display, block);
}
});三、移除事件unbind()
参数含义描述[type]事件类型主要包括blur、focus、click、mouseout等基础事件此外还可以是 自定义事件[fn]处理函数用来绑定的处理函数
注意当unbind()不带参数时表示移除所绑定的全部事件
function testUnbind(){//定义一个函数移除单个事件
$(input[nameuserName]).unbind(mouseover);
}四、复合事件
1、鼠标光标悬停事件hover()
鼠标光标悬停事件hover()方法相当于mouseover与mouseout事件的组合
$(document).ready(function() {
$(#myaccound).hover(function(){//移入触发
$(#menu_1).css(display,block);
},
function(){//光标移出时触发
$(#menu_1).css(display,none);
}
);
});2、鼠标连续click事件
toggle()
A、用于绑定两个或多个事件处理器函数以响应被选元素的轮流的 click 事件。
B、如果元素是可见的切换为隐藏的如果元素是隐藏的切换为可见的。 toggle()方法用于模拟鼠标连续click事件在1.9以后的版本中移除了
$(document).ready(function () {
$(div[classtestToggle]).toggle(
function () {
$(this).css(background-color, red);//第一次单击
},
function () {
$(this).css(background-color, green); //第二次
},
function () {
$(this).css(background-color, blue); //第三次
}
);
});感谢大家的阅读如有不对的地方可以私信我感谢大家
