JQuery事件是什么?
JQuery事件是指,页面对不同访问者的响应。事件处理程序指的是当HTML中发生某些事件时所调用的方法
例:在元素上移动鼠标
选取单选按钮
点击元素
鼠标事件包括:click()方法、dblclick()方法、mouseenter()方法、mouseleave()方法、hover()方法、
一、click()方法
当点击元素时,发生click事件
Click()方法触发click事件。或规定当发生click事件时运行的函数
实例:
$(document).ready(function(){
$("p").click(function(){
alert("点我干啥");
});
});
触发被选元素的click事件:
语法:$(selector).click()
实例:
<script>
// 触发被选元素的click事件:
$(document).ready(function(){
$("button").click(function(){
$("p").click();
});
});
</script>
</head>
<body>
<button>触发p元素上的click事件</button>
<p onclick="alert('点我干哈?')">点我</p>
</body>
添加函数到click事件
语法:$(selector).click(function)
二、dblclick()方法
用法:当双击元素时,触发dblclick事件
dblclick() 方法触发dblclick事件,或规定当发生dblclick事件时运行的函数
dblclick事件也会产生click事件。如果这两个事件都被应用于同一个元素,会产生问题。
触发被选中的dblclick事件:
语法:$(selector).dblclick()
$(document).ready(function(){
$("p").dblclick(function(){
alert("疼死啦");
});
});
添加函数到dblclick事件:
语法:$(selector).dblclick(function)
$(document).ready(function(){
$("p").dblclick(function(){
$(this).fadeOut();
});
});
三、mouseenter()方法
用法:当鼠标指针穿过(进入)被选元素时,会发生mouseenter事件
Mouseenter()方法触发mouseenter事件。或添加当发生mouseenter事件时运行的函数。
注意:与mouseenter事件不同,mouseenter事件只有在鼠标指针进入被选元素时被触发。
mouseenter事件在鼠标指针进入任意元素时也会被触发。该事件通常与mouseleave事件一起使用。
触发被选元素的mouseenter事件:
语法:$(selector).mouseenter()
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray");
});
$("#btn1").click(function(){
$("p").mouseenter();
});
$("#btn2").click(function(){
$("p").mouseleave();
});
});
<body>
<p>这是一个段落</p>
<button id="btn1">触发mouseenter事件</button>
<button id="btn2">触发mouseleave事件</button>
</body>
mouseover和mouseenter的区别
Mouseover事件在鼠标移动到选取的元素及其子元素上时触发
Mouseenter事件只在鼠标移动到选取的元素上时触发
添加函数到mouseenter事件
语法: $(selector).mouseenter(function)
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background","lightgray");
});
});
四、mouseleave事件
当鼠标指针离开被选元素时,会发生mouseleave事件
Mouseleave()方法触发mouseleave事件,或添加当发生mouseleave事件时运行的函数。
注意:与mouseout事件不同,mouseleave事件只有在鼠标指针离开被选元素时被触发,
mouseout事件在鼠标指针离开任意子元素时也会被触发。
通常与mouseenter事件一起使用。
触发被选元素的mouseleave事件
语法:$(selector).mouseleave()
五、hover()方法
hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数,方法触发mouseenter和mouseleave事件。
注:如果只指定一个函数,则mouseenter和mouseleave都执行它。
语法:
$(selector).hover(inFunction,outFunction)
调用:$(selector).hover(handlerIn,handlerOut)
和以下方式等同:$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
如果只规定了一个函数,则他将会在mouseenter和mouseleave事件上运行。
$(selector).hover(handlerInOut)等于$(selector).on(“mouseenter mouseleave”,handlerInOut);
inFunction,必需,规定mouseenter事件发生时运行的函数
outFunction 可选,规定mouseleave事件发生时运行的函数
实例:
$(document).ready(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
});