jQuery事件：01_ready
onload事件与ready()的区别
1.onload是js中的事件，当页面dom模型完成和需要下载的外部文件和图片下载完成后，才会执行 2.ready()是jquery的方法，当页面dom模型完成后就能执行 ready()先于onload事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
window.onload = function () {
$("button").click(function () {
alert(2222);
})
}
</script>
</head>
<body>
<button>按钮</button>
<script type="text/javascript">
//定义a()和b()二个方法
function a(){
alert("JS方式");
}
function b(){
alert("JQUERY方式");
}
/*使用JS方式加载a()方法*/
window.onload = function () {
a();
}
/*使用jQuery方式加载b()方法*/
$(document).ready(function() {
b();
});
/*使用jQuery最简方式加载b()方法*/
$(function() {
b();
})
//onload事件与ready()的区别
// 1.onload是js中的事件，当页面dom模型完成和需要下载的外部文件和图片下载完成后，才会执行
// 2.ready()是jquery的方法，当页面dom模型完成后就能执行
// ready()先于onload事件
</script>
</body>
</html>
jQuery事件：02_change
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script type="text/javascript">
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change(function() {
console.log($("#city option:selected").val() + ":" + $("#city option:selected").html())
});
</script>
</body>
</html>jQuery事件：03_focus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" value="加载页面时获取光标并选中所有文字" size="50"/>
<script type="text/javascript">
//加载页面时获取光标并选中所有文字
$(function () {
//1.获取光标
$("input").focus();
//2.选中所有文字
$("input").select();
})
</script>
</body>
</html>jQuery事件：04_keyup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<script type="text/javascript">
//当按键弹起时，显示所按键的unicode码
$(document).keyup(function() {
console.log(event.keyCode)
});
</script>
</body>
</html>jQuery事件：05_mousemove
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
X=<input type="text" id="xID"/>
<br/>
Y=<input type="text" id="yID"/>
<script type="text/javascript">
//显示鼠标移动时的X和Y座标
$(document).mousemove(function () {
$("#xID").val(event.clientX)
$("#yID").val(event.clientY)
})
</script>
</body>
</html>jQuery事件：06_mouseover_mouseout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>focus.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<table border="2" align="center" width="80%" id="tableID">
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>周六</td>
<td>男</td>
<td>28</td>
</tr>
</table>
<hr/>
<img height="120px" src="../images/222.png" style="position:absolute;left:30%;border-style:dashed;border-color:white"/>
<img height="120px" src="../images/222.png" style="position:absolute;left:60%;border-style:dashed;border-color:white"/>
<script type="text/javascript">
//鼠标移到某行上，某行背景变色
$("tr").mouseover(function () {
$(this).css("background-color","pink")
})
//鼠标移出某行，某行还原
$("tr").mouseout(function () {
$(this).css("background-color","white")
})
//鼠标移到某图片上，为图片加边框
$("img").mouseover(function () {
$(this).css("border","5px solid black")
})
//鼠标移出图片，图片还原
$("img").mouseout(function () {
$(this).css("border","0")
})
</script>
</body>
</html>
jQuery事件：07_submit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<form action="06_mouseover_mouseout.html" method="post">
用户名：<input type="text"/>
<input type="submit" value="表单提交"/>
</form>
<script type="text/javascript">
//浏览器加载web页面时触发将光标定位于文本框中
$(function () {
//1.获取光标
$(":text").focus();
})
</script>
<script type="text/javascript">
//当表单提交前检测
$("form").submit(function () {
if ($(":text").val() == "") {
return false;
}else{
return true;
}
})
</script>
</body>
</html>
