<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test1").click(function(){
$(this).hide();
});
$("#test2").dblclick(function(){
$(this).hide();
});
$("#test3").mouseenter(function(){
alert('您的鼠标移到了 id="test3"的元素');
});
$("#test4").mouseleave(function(){
alert('再见,您的鼠标离开了该段落');
});
$("#test5").mousedown(function(){
alert('鼠标在该段落上按下!');
});
$("#test6").mouseup(function(){
alert('鼠标在段落上松开!');
});
$("#test7").hover(
function(){
$(this).css("background-color", "#cccccc");
//alert("您进入了test7");
},
function(){
$(this).css("background-color", "#ff5500");
//alert("您离开了现在");
});
$("#test8").focus(function(){
$(this).css("background-color","#cccccc");
})
$("#test8").blur(function(){
$(this).css("background-color", "#55aaff");
})
});
</script>
<!--jQuery事件
jQuery是为事件处理而特别设计的
什么是事件
页面对不同访问者的响应叫做事件
事件处理程序指的是当HTML中发生某些事情时所调用的方法
实例:
-元素上移动鼠标
-选取单选按钮
-点击元素
在事件中经常使用术语"触发",例如:当您按下按键时触发keypress事件
常见的DOM事件
鼠标事件:click(),dbclick(),mouseenter(),hover
键盘事件:keypress, keydown,keyup
表单事件:submit,change,focus,resize
文档窗口事件:load,resize,scroll,unload
jQuery事件方法语法
在jQuery中,大多数DOM事件都有一个等效的jQuery方法
页面指定一个点击事件
$("p").click();
下一步是定义了点击后触发事件,您可以通过一个事件函数实现
$("p").click(function(){
//动作触发后执行的代码
});
常见的jQuery方法
$(document).ready()
$(document).ready()方法允许我们在文档加载完后执行函数.
click()
click()方法是当按钮点击事件被触发时会调用一个函数,该函数在用户点击HTML元素时执行
在下面的实例中,当点击事件在某个<p>元素上触发时,隐藏当前的<p>元素
实例:
$("p").click(function(){
$("this").hide();
});
dblclick()当双击元素时,会发生dbclick()事件,或规定当发生dbclick事件时运行的函数
$("p").dbclick()
mouseenter()
当鼠标指针穿过元素,会发生mouseenter事件.
mouseenter()方法触发mouseenter事件,或规定当发生mouseenter事件时运行的函数
mouseleave()
当鼠标指针离开元素时,会发生mouseleave()事件.
mouseleave()方法触发mouseleave()事件,或规定当发生mouseleave()事件时运行的函数
mousedown()
当鼠标指针移到元素上方,并按下鼠标按键时,会发生mousedown事件
mousedown()方法触发mousedown事件,或规定当发生mousedown事件运行时的函数
mouseup()
当在元素上松开鼠标按钮时,会发生mouseup事件
mouseup()方法触发mouseup事件,或规定当发生mouseup事件时运行的函数
hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave);
focus()
当元素获得焦点时,发生fouse事件
当元素通过鼠标点击选中元素或通过tab键定位到元素时,钙元素就会获得焦点.
focus()方法触发focus事件,或规定当发生focus事件时运行的函数
blur()
当元素失去焦点时,发生blur事件.blur()方法触发blur事件,或规定当发生blur事件时运行的函数
-->
</head>
<body>
<p id = "test1">click</p>
<p id = "test2">dbclick</p>
<p id = "test3">mouseenter</p>
<p id = "test4">mouseleave</p>
<p id = "test5">mousedown</p>
<p id = "test6">mouseup</p>
<p id = "test7">hover</p>
focusAndBlur:<input id = "test8" type="text" name="fullName">
<!-- blur:<input id = "test9" type="text" name="fullName"> -->
</body>
</html>
