jQuery事件
事件，事件函数（事件方法）
js:onXxx
onclick();
写在<script>内，ready()外；
jquery:没有on
click();
ready()内；
$(document).ready(function(){
$("选择器").事件类型(function(){
...
});
});
windows事件：ready;
鼠标事件：
- click:单击事件
- mouseover():鼠标悬浮
- mouseout():鼠标离开
- 事件介绍
键盘事件
1. keydown:按键 从上往下的过程
2. keypress():按键被按压到 最底部
3. keyup():松开按键
1.前端的一些事件、方法，会在某些情况下失效。 2.兼容性问题
例:通过event.keyCode指定具体的按键
$("body").keydown(function(event){
if(event.keyCode == 13){
alert("回车。。。...");
}
});
表单事件
focus():获取焦点
blur():失去焦点
颜色值：可以使用 英语单词或者 #6位十六进制
a.#000000:黑色 #ffffff:白色
b.如果6位是两两相同的，则可以写出3位,#aabbcc 可以写成#abc
绑定事件与移除事件
$("选择器").click( function(){...});
绑定事件
$("选择器").bind("事件名",[数据],函数)；
$("选择器").bind("click",function(){...});
$("选择器").bind("focus",function(){ ... });
批量绑定
$("选择器").bind({"事件名":函数,"事件名":函数 ,...,"事件名":函数})
移除事件：
$("选择器").unbind("事件名");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background: lightgray;
height: 50px;
200px;
}
</style>
</head>
<body onload="init()" >
<input type="text" id="username"/><br />
name:<input type="text" id="name"/>
<input type="button" value="绑定" onclick="Bind()" />
<input type="button" value="解绑" onclick="unBind()" />
<div onmouseover="over()" onmouseout="out()">
some text..
</div>
<p id="mytitle" >woshi</p>
<h1>H1...</h1>
<script type="text/javascript" src="jquery-3.4.1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").click(function(){
alert("单击事件");
});
$("div").bind("click",function(){
alert("bind形式单击事件");
});
/*$("div").mouseover(function(){
alert("鼠标悬浮");
}).mouseout(function(){
alert("鼠标离开");
});*/
$("body").keydown(function(event){
if(event.keyCode == 13){//通过keyCode来指定摸一个按键。event.keyCode event参数
alert("按压..");
}
})/*.keypress(function(){
alert("压到底了");
}).keyup(function(){
alert("松开");
})*/;
$("#username").focus(function(){
//当前元素就是文本框$("#username"),即 id="uid"的文本框
//当前元素可以用this表示
$(this).css("background-color","red");
});
$("#username").blur(function(){
$(this).css("background-color","white");
});
});//ready结尾
$(function(){
var $title = $("#mytitle");
alert($title.html());
});
function init(){
var title = document.getElementById("mytitle");
alert(title.innerHTML+"kkk");
}
/*function over(){
alert("悬浮");
}
function out(){
alert("离开");
}*/
function Bind(){
$("#name").bind("click",function(){
alert("click..");
});
}
function unBind(){
$("#name").unbind()("click");
}
</script>
</body>
</html>