前端之jQuery基础篇02-事件

  

什么是事件:

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

常见的DOM事件:

鼠标事件:click()

当鼠标单击发生click事件 :

  

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").click();
});
});
</script>
</head>
<body> <button>触发 p 元素上的 click 事件</button>
<p onclick="alert('Click 事件被触发')">这是一个段落。</p> </body>
</html>

触发被选元素的 click 事件

鼠标事件dblclick()

当双击元素时,触发 dblclick 事件。

dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。

提示:dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素,则会产生问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双击</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
alert("这个段落被双击。");
});
});
</script>
</head>
<body> <p>双击这个段落。</p> </body>
</html>

鼠标事件-双击

鼠标事件mouseenter

当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件,或添加当发生 mouseenter 事件时运行的函数。

注意:与 mouseover 事件不同,mouseenter 事件只有在鼠标指针进入被选元素时被触发,mouseover 事件在鼠标指针进入任意子元素时也会被触发。参见页面底部演示实例。

提示:该事件通常与 mouseleave 事件一起使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray");
});
});
</script>
</head>
<body> <p>鼠标移动到该段落。</p> </body>
</html>

鼠标指针穿过(进入)被选元素

键盘事件-keydown

与 keydown 事件相关的事件顺序:

  1. keydown - 键按下的过程
  2. keypress - 键被按下
  3. keyup - 键被松开

当键盘键被按下时发生 keydown 事件。

keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

提示:请使用 event.which 属性来返回哪个键盘键被按下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘按下事件</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","yellow");
});
$("input").keyup(function(){
$("input").css("background-color","pink");
});
});
</script>
</head>
<body> 输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p> </body>
</html>

键盘按下事件

表单事件submit

定义和用法

当提交表单时,会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>submit事件</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("提交");
});
});
</script>
</head>
<body> <form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form> </body>
</html>

submit事件

上一篇:linux如何查看进程OOM killer


下一篇:BZOJ 4291: [PA2015]Kieszonkowe 水题