t205 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { //内容操作 //.html("html") 设置内容 $("#btn1").click(function () { var str = "虾米大王<label>教程</label>"; $("div").html(str); }); }); /* 在jQuery中，内容操作有三种方法 .html() .text() .val() 其中，html（）和text()这两种方法用于操作一般元素， 而val方法用于操作表单元素。 $().html() ，表示获取html内容 $().html("html内容") ，表示设置html内容 html()方法和innerHTML方法的效果是一样的， html()是jQuery实现模式， innerHTML是JavaScript的实现方式 */ </script> </head> <body> <input type="button" id="btn1" value="设置"> <div></div> </body> </html> t206 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> input[type=text]{ width: 400px; } </style> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { //内容操作 //.html()与.text()比较 var strHtml = $("p").html(); var strText = $("p").text(); $("#txt1").val(strHtml); $("#txt2").val(strText); }); /* 在jQuery中，内容操作有三种方法 .html() .text() .val() 其中，html（）和text()这两种方法用于操作一般元素， 而val该方法用于操作表单元素。 $().html() ，表示获取html内容 $().html("html内容") ，表示设置html内容 html()方法和innerHTML方法的效果是一样的， html()是jQuery实现模式， innerHTML是JavaScript的实现方式 */ </script> </head> <body> <p><label style="color: hotpink">虾王学院</label></p> html()是：<input type="text" id="txt1"><br> text()是：<input type="text" id="txt2"> </body> </html> t207 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { //内容操作 //获取表单的值 $("#btn_get").click(function () { var str1 = $("#txt1").val(); alert(str1); }); $("#btn_set").click(function () { var str2 = "给你很好的感觉"; $("#txt2").val(str2); }); }); /* $().val() $().val("值内容"); val该方法不仅可以获得表单元素的值，也可用于设置表单元素的值 */ </script> </head> <body> <input type="text" id="txt1" value="虾米大王"><br> <input type="text" id="txt2"><br> 获取第一个文本框的值：<input type="button" id="btn_get" value="获取"><br> 设置第二个文本框的值：<input type="button" id="btn_set" value="设置"> </body> </html> t208 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="css/index.css"> <script> ///页面事件 //JavaScript的onload事件 window.onload = function () { var btn1 = document.getElementById("btn1"); btn1.onclick = function () { alert("欢迎来到虾大王学院"); } }; /* 在jQuery中，实践由三部分组成。 事件主角，按钮，div元素等 事件类型、鼠标点击、移动等 事件发生了什么 jQuery有六种基本事件， 页面事件 鼠标事件 表单事件 编辑事件 滚动事件 在这里记住一句话，如果不了解事件操作，jQuery等于白学。 对于JavaScript的onload对于事件，只有当页面上的所有事件DOM 所有外部文件(图片)css，外部JavaScript脚本） 加载后才会执行。 */ </script> </head> <body> <input type="button" id="btn1" value="提交"><br> <img src="img/1.png" alt="1.png"> </body> </html> t209 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="text/css" rel="stylesheet" href="css/index.css"> <script src="../js/jquery-3.5.1.js"></script> <script> //页面事件 //jQuery的ready事件 $(document).ready(function () { $("#btn1").click(function () { alert("欢迎来到虾王学院"); }); }); /* 在jQuery中，实践由三部分组成。 事件主角，按钮，div元素等 事件类型、鼠标点击、移动等 事件发生了什么 jQuery有六种基本事件， 页面事件 鼠标事件 表单事件 编辑事件 滚动事件 在这里记住一句话，如果不了解事件操作，jQuery等于白学。 对于jQuery的ready对于事件，只要页面上的所有事件OM元素加载完成
就可以执行，不要再等到外部文件加载完成。
*/
</script>
</head>
<body>
<input type="button" id="btn1" value="提交"><br>
<img src="img/1.png" alt="1.png">
</body>
</html>
t210
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//在jQuery中，对于ready事件，有4中写法：
//写法1：
$(document).ready(function () {
});
//写法2：
jQuery(document).ready(function () {
});
//写法3：
$(function () {
});
//写法4：
jQuery(function () {
});
/*
写法1中，表示将document对象转换为jQuery对象，再调用其
ready方法，参数是一个匿名函数。
写法2中，$是jQuery的别名，所以$() 等价于 jQuery（）。
写法3中，就是实际开发中用到的最多的，简写方式。
写法4中，不常用。
*/
</script>
</head>
<body>
</body>
</html>
t211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//页面事件
//多次调用window onload事件
window.onload = function () {
alert("第1次调用");
};
window.onload = function () {
alert("第2次调用");
};
window.onload = function () {
alert("第3次调用");
};
window.onload = function () {
alert("第4次调用");
};
/*
在JavaScript中，window.onload只能调用一次，
如果多次调用，则只会执行最后一次的。
*/
</script>
</head>
<body>
</body>
</html>
t212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//页面事件
//多次调用$(document).ready()
$(document).ready(function () {
alert("第1次调用");
});
$(document).ready(function () {
alert("第2次调用");
});
$(document).ready(function () {
alert("第3次调用");
});
/*
在jQuery中，ready事件是可以多次执行的。
*/
</script>
</head>
<body>
</body>
</html>
t213
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
display: inline-block;
width: 80px;
height: 24px;
line-height: 24px;
font-family: "微软雅黑";
font-size: 15px;
text-align: center;
border-radius: 3px;
background-color: deepskyblue;
color: white;
cursor: pointer;
}
div:hover{
background-color: dodgerblue;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//鼠标事件
//click事件
$(function () {
$("div").click(function () {
alert("代码调试完毕，请检阅！");
});
});
/*
在jQuery中常用的鼠标事件有，
click，鼠标单击
mouseover，鼠标滑入
mouseout， 鼠标滑出
mousedown，鼠标按下
mouseup，鼠标松开
mousemove，鼠标移动
jQuery事件比JavaScript事件少了“on”前缀，
单击事件，不只是按钮才有，任何元素都可以添加单击事件
*/
</script>
</head>
<body>
<div>调试代码</div>
</body>
</html>
t214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//鼠标事件
//自动触发点击事件 .click()
$(function () {
$("#btn1").click(function () {
alert("虾米大王");
}).click();
});
/*
自动触发点击事件，这个小技巧很有用，比如制作图片轮播
效果时就可以用到。
*/
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//鼠标事件
//移入和移出 mouseover 和 mouseout
$(function () {
$("div").mouseover(function () {
$(this).css("color","blue");
});
$("div").mouseout(function () {
$(this).css("color","black");
});
});
</script>
</head>
<body>
<div>虾米大王</div>
</body>
</html>
t216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//鼠标事件
//链式调用 鼠标移入移出
$("div").mouseover(function () {
$(this).css("background-color","#cccccc");
}).mouseout(function () {
$(this).css("background-color","#ffffff");
});
});
/*
在jQuery中，如果对同一个对象进行多种操作，可以使用链式调用
的语法。链式调用是jQuery中的经典语法，可以节省代码量，提高
代码的可读性。
*/
</script>
</head>
<body>
<div>虾米大王</div>
</body>
</html>
t217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//鼠标事件
//鼠标按下和松开 mousedown 和 mouseup
$("#btn1").mousedown(function () {
$("h1").css("color","blue");
});
$("#btn1").mouseup(function () {
$("h1").css("color","black")
});
});
/*
为了能够观察效果，请按下鼠标键不放，观察，
松开鼠标，观察。
鼠标按下，在鼠标松开之前发生。
*/
</script>
</head>
<body>
<h1>虾米大王</h1>
<hr>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//键盘事件
//keyup 键盘松开
$(function () {
$("#txt").keyup(function () {
var str = $(this).val();
$("#num").text(str.length);
});
});
</script>
</head>
<body>
<input type="text" id="txt">
<div>
字符串长度为：
<span id="num">0</span>
</div>
</body>
</html>
t219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//定义一个变量，保存正则表达式
var myregex = /^[0-9]*$/;
$("#txt").keydown(function () {
var value = $(this).val();
if(myregex.test(value))
{
$("div").text("输入正确");
}
else
{
$("div").text("必须输入数字");
}
});
});
</script>
</head>
<body>
<input type="text" id="txt">
<div style="color: blue"></div>
</body>
</html>
t220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#search{
color: #BBBBBB;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//表单事件
//.focus 和 .blur
var txt = $("#search").val();
//获取焦点
$("#search").focus(function () {
if($(this).val() == txt)
{
$(this).val("");
}
});
//失去焦点
$("#search").blur(function () {
if($(this).val() == "")
{
$(this).val(txt)
}
});
});
/*
在jQuery中，常用的表单事件有3种。
.focus 和 .blur
.select
.change
具有获取焦点和失去焦点的元素只有两种，
一种是表单元素（单选，多选，文本框，下拉列表），
一种是超链接。
实际开发中，焦点事件一般用于单行文本框和多行文本框，其他地方
少见。
*/
</script>
</head>
<body>
<input type="text" id="search" value="度娘一下，你就知道">
<input type="button" value="搜索">
</body>
</html>
t221
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//表单事件
//自动获取焦点
$(function () {
$("#txt1").focus();
});
</script>
</head>
<body>
<input type="text" id="txt1">
</body>
</html>
t222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//表单事件
//.select()
$(function () {
$("#txt1").select(function () {
alert("选中单行文本框");
});
$("#txt2").select(function () {
alert("选中了多行文本框");
});
});
</script>
</head>
<body>
<input type="text" id="txt1" value="当行文本框"><br>
<textarea id="txt2" cols="20" rows="30">多行文本框</textarea>
</body>
</html>
t223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//表单事件
//全选文本
$(function () {
$("#search").click(function () {
$(this).select();
});
});
</script>
</head>
<body>
<input type="text" id="search" value="度娘一下，你就清楚">
</body>
</html>
t224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//表单事件
//.change
$(function () {
$("input[type=radio]").change(function () {
var bool = $(this).prop("checked");
if(bool)
{
$("p").text("你选择的是：" + $(this).val());
}
});
});
/*
在jQuery中，触发change事件的元素有
单选框选择某一项
复选框选择某一项
下拉框选择某一项
*/
</script>
</head>
<body>
<div>
<input type="radio" name="fruit" id="apple" value="苹果">
<label for="apple">苹果</label>
<input type="radio" name="fruit" id="banana" value="香蕉">
<label for="banana">香蕉</label>
<input type="radio" name="fruit" id="watermelon" value="西瓜">
<label for="watermelon">西瓜</label>
</div>
<p></p>
</body>
</html>
t225
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//表单操作
//复选框的全选和反选
$(function () {
$("#selectAll").change(function () {
var bool = $(this).prop("checked");
if(bool)
{
$(".fruit").attr("checked","checked");
}
else
{
$(".fruit").removeAttr("checked");
//$(".fruit").removeProp("checked"); 这种写法无效，不知道为啥
}
});
});
</script>
</head>
<body>
<div>
<p>
<input type="checkbox" id="selectAll">
<label for="selectAll">全选/反选</label>
</p>
<input type="checkbox" id="apple" value="苹果" class="fruit">
<label for="apple">苹果</label>
<input type="checkbox" id="banana" value="香蕉" class="fruit">
<label for="banana">香蕉</label>
<input type="checkbox" id="watermelon" value="西瓜" class="fruit">
<label for="watermelon">西瓜</label>
</div>
</body>
</html>
t226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
select{
width: 200px;
height: 30px;
line-height: 30px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//表单事件
//.change 下拉框
$(function () {
$("select").change(function () {
var link = $(":selected").val();
window.open(link);
});
});
</script>
</head>
<body>
<select>
<option value="http://www.baidu.com">度娘</option>
<option value="http://www.163.com">网易</option>
<option value="http://www.360.cn">360</option>
</select>
</body>
</html>
t227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//编辑事件
//contextmenu 鼠标右键
//body，禁用时你会发现文字上面右键被禁用，但是页面依然有效
$("body").contextmenu(function () {
return false;
});
//需要页面全部禁用时，替换为html
$("html").contextmenu(function () {
return false;
});
});
</script>
</head>
<body>
<div>学好数理化，走遍天下都不怕。</div>
</body>
</html>
t228
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 150px;
height: 100px;
background-color: lightskyblue;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//编辑事件
//点击鼠标右键切换背景颜色
$(function () {
$("div").contextmenu(function () {
$(this).css("background-color","hotpink");
return false
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
t229
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
height: 1800px;
}
#box1,#box2{
display: inline-block;
width: 100px;
height: 100px;
}
#box1{
background-color: red;
}
#box2{
background-color: orange;
position: fixed;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//滚动事件
//固定栏目
//获取box2距离顶部的距离
var top = $("#box2").offset().top;
//根据滚动判断定位
$(window).scroll(function () {
if($(this).scrollTop() > top)
{
//当滚动条距离超过box2的位置时，设定为固定定位
$("#box2").css({
"position":"fixed",
"top":"0"
});
}
else
{
//滚动条的距离小于box2的位置时，设定为相对定位
$("#box2").css({
"position":"relative",
});
}
});
});
</script>
</head>
<body>
<div id="box1"></div><br>
<div id="box2"></div>
</body>
</html>
t230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
height: 1800px;
}
div{
position: fixed;
right: 50px;
bottom: 50px;
display: none;
width: 40px;
height: 40px;
color: white;
background-color: #45b823;
font-family: 微软雅黑;
font-size: 15px;
font-weight: bold;
text-align: center;
cursor:pointer;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//滚动事件
//回顶部特效
$(window).scroll(function () {
if($(this).scrollTop() > 300)
{
$("div").css("display","inline-block");
}
else
{
$("div").css("display","none");
}
});
$("div").click(function () {
$("html,body").scrollTop(0);
});
});
</script>
</head>
<body>
<h3>虾米大王</h3>
<div>回到顶部</div>
</body>
</html>
t231
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//绑定事件
//on
$(function () {
$("#btn1").on("click",function () {
alert("采用on方法绑定事件");
});
});
/*
在jQuery中，on（）方法，有点类似JavaScript的addEventListener（）
*/
/*
解惑
从jQuery1.7开始，对于绑定事件，jQuery官方建议使用on方法来统一
取代以前的bind（），live（）和delegate（）方法；
对于解绑事件，jQuery官方也建议使用off（）来统一取代以前的
unbind（），die（），undelegate（）方法。
因此，大家今后看到bind，live等方法，直接忽略。
*/
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//绑定事件
//动态创建元素
var $btn1 = $('<input type="button" id="btn1" value="按钮">');
$("body").append($btn1);
$("#btn1").on("click",function () {
alert("动态创建的元素on绑定事件");
});
});
/*
解惑
从jQuery1.7开始，对于绑定事件，jQuery官方建议使用on方法来统一
取代以前的bind（），live（）和delegate（）方法；
对于解绑事件，jQuery官方也建议使用off（）来统一取代以前的
unbind（），die（），undelegate（）方法。
因此，大家今后看到bind，live等方法，直接忽略。
*/
</script>
</head>
<body>
</body>
</html>
t233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//解绑事件
//off
$("#btn1").click(function () {
alert("基本事件绑定click");
});
$("#btn_off").click(function () {
$("#btn1").off("click");
alert("已解绑事件");
});
});
/*
jQuery的off方法，有点类似JavaScript的removeEventListener（）。
*/
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮"><br>
<input type="button" id="btn_off" value="解除">
</body>
</html>
t234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//解绑事件
//off,解除使用“绑定事件on”方式的事件
$("#btn1").on("click",function () {
alert("on方法绑定click");
});
$("#btn_off").on("click",function () {
$("#btn1").off("click");
alert("已解绑事件");
});
});
/*
jQuery的off方法，有点类似JavaScript的removeEventListener（）。
疑问：解绑事件有什么用处呢？
实际开发中，如果需要实现拖拽效果，在mouseup事件中就必须要解除
mousemove事件，如果没有解除就会有bug出现。
*/
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮"><br>
<input type="button" id="btn_off" value="解除">
</body>
</html>
t235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//合成事件
//hover()，可以代替鼠标移入mouseenter和移出mouseleave事件
$(function () {
$("div").hover(function () {
$(this).css("color","blue");
},function () {
$(this).css("color","black");
});
});
</script>
</head>
<body>
<div>hover合并事件的使用</div>
</body>
</html>
t236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h3{
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dddddd;
cursor: pointer;
}
div{
display: none;
padding: 10px;
border:1px solid silver;
text-indent: 32px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("h3").hover(function () {
$("div").css("display","block");
},function () {
$("div").css("display","none");
});
});
</script>
</head>
<body>
<h3>虾米大王</h3>
<div>学习编程技术是一种枯燥的体验，也是一种非常考验耐心的事情，我们需要不断的提升自我，优化经验，学习更多的编程技术，
在程序员的世界里，没有最好，只有最适合自己的才是好！</div>
</body>
</html>
t237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//一次事件
//one（）
$("#btn1").one("click",function () {
alert("我只会执行一次。");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//自定义事件
//trigger()触发自定义事件
$(function () {
$("#btn1").on("delay",function () {
setTimeout(function () {
alert("欢迎学习技术");
},1000);
});
//
$("#btn1").click(function () {
$("#btn1").trigger("delay");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//自定义事件
//trigger（）
$(function () {
$("#btn1").on("click",function () {
alert("on绑定事件，trigger触发");
}).trigger("click");
});
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//event对象
//.type
$(function () {
$("#btn1").click(function (event) {
alert(event.type);
});
});
/*
解惑
每次调用一个事件的时候，jQuery都会默认给这个事件函数加上一个
隐藏的参数，就是event对象。在函数中声明的变量名可以是e，也可以
是event，只要是一个变量名，它实际是指代的event对象。
*/
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
t241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//event对象
//.target()，获取触发事件的元素
$(function () {
$("a").click(function (event) {
var result = $(event.target).attr("href");
alert(result);
return false;
});
});
/*
$(event.target).attr("herf") 等价于
$(this).attr("href");
*/
</script>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
t242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
//event对象
//.which()，获取单击了哪个按键
$("a").mousedown(function (event) {
switch (event.which) {
case 1:
alert("你点击了左键");
break;
case 2:
alert("你点击了中键");
break;
case 3:
alert("你点击了右键");
break;
}
});
});
//event.which，返回值，1表示左键，2表示中键，3表示右键
</script>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
t243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//event对象
//.pageX 和 .pageY
$(function () {
$(document).mousemove(function (event) {
var result = "鼠标坐标：(" + event.pageX + "，" + event.pageY + ")";
$("body").text(result);
});
});
/*
在jQuery中，可以使用event对象的pageX和pageY两个属性来分别获取鼠标
相对于页面左上角的坐标。该坐标是以页面作为参考点，不随滚动条的移动而
变化。
*/
</script>
</head>
<body>
</body>
</html>
t244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//event对象
//.keyCode ，获取键盘上的哪个按键被按下
$(function () {
$(document).keydown(function (event) {
if(event.shiftKey || event.ctrlKey || event.altKey)
{
alert("禁止使用");
}
});
});
/*
在jQuery中，使用event.keyCode的返回值判断按下哪个键，
常用的按键与对应的码值
W=87，
S=83，
A=65，
D=68，
方向上=38，
方向下=40，
方向左=37，
方向右=39.
如果需要获取shift，crtl，alt三个键，可以直接使用属性
shiftKey，ctrlKey和altKey。
keyCode属性的返回值都是一个数字，而shiftKey，ctrlKey，
altKey的返回值是布尔型的。
*/
</script>
</head>
<body>
<div>禁止使用shift，ctrl，alt键的效果</div>
</body>
</html>
t245
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,body,div,span {
margin: 0;
padding: 0;
}
div{
background-color: #EEEEEE;
width: 99%;
height: 80px;
border: 1px solid #666666;
padding: 5px;
margin: 0 auto;
}
div span{
font-size: 25px;
font-weight: bold;
padding: 5px;
text-align: center;
line-height: 25px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
$(window).keydown(function (event) {
if(event.keyCode == 38 || event.keyCode == 87)
{
$("span").text("上");
}
else if (event.keyCode == 40 || event.keyCode == 83)
{
$("span").text("下");
}
else if (event.keyCode == 37 || event.keyCode == 65)
{
$("span").text("左");
}
else if (event.keyCode == 39 || event.keyCode == 68)
{
$("span").text("右");
}
else
{
$("span").text("错误");
}
});
});
/*
在jQuery中，使用event.keyCode的返回值判断按下哪个键，
常用的按键与对应的码值
W=87，
S=83，
A=65，
D=68，
方向上=38，
方向下=40，
方向左=37，
方向右=39.
如果需要获取shift，crtl，alt三个键，可以直接使用属性
shiftKey，ctrlKey和altKey。
keyCode属性的返回值都是一个数字，而shiftKey，ctrlKey，
altKey的返回值是布尔型的。
*/
</script>
</head>
<body>
<div>请按方向键或WASD，你控制的方向是：
<span style="color: blue"></span>
</div>
</body>
</html>
t246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,body,div,span {
margin: 0;
padding: 0;
}
div{
background-color: #EEEEEE;
width: 99%;
height: 80px;
border: 1px solid #666666;
padding: 5px;
margin: 0 auto;
}
div span{
font-size: 25px;
font-weight: bold;
padding: 5px;
text-align: center;
line-height: 25px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
$(window).keydown(function (event) {
switch (event.keyCode) {
case 37:
case 65:
$("span").text("左");
break;
case 38:
case 87:
$("span").text("上");
break;
case 39:
case 68:
$("span").text("右");
break;
case 40:
case 83:
$("span").text("下");
break;
default:
$("span").text("错误");
break;
}
});
});
/*
在jQuery中，使用event.keyCode的返回值判断按下哪个键，
常用的按键与对应的码值
W=87，
S=83，
A=65，
D=68，
方向上=38，
方向下=40，
方向左=37，
方向右=39.
如果需要获取shift，crtl，alt三个键，可以直接使用属性
shiftKey，ctrlKey和altKey。
keyCode属性的返回值都是一个数字，而shiftKey，ctrlKey，
altKey的返回值是布尔型的。
另外插一句，我发现方向键的码值是按照顺时针编的，
就是37,38,39,40，左上右下，加深记忆。
*/
</script>
</head>
<body>
<div>请按方向键或WASD，你控制的方向是：
<span style="color: blue"></span>
</div>
</body>
</html>
t247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//this对象
$(function () {
$("div").click(function () {
$(this).css("color","blue");
//$(this) 等价于 $("div")
});
$("p").click(function () {
$(this).css("color","red");
//$(this) 等价于 $("p")
});
});
</script>
</head>
<body>
<div>单击我改变样式，this始终指向触发当前事件的元素</div>
<p>单击我改变样式，this始终指向触发当前事件的元素</p>
</body>
</html>
t248
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//this对象
$(function () {
var strHtml = "";
$("li").each(function (index) {
//var text1 = $("li").text(); 这样写得不到想要的效果
var text1 = $(this).text();
strHtml += text1 + " , ";
});
$("#div1").html(strHtml);
});
/*
把$("li").text()改为$(this).text()效果就正确了。
那么为什么用$("li")就不正确，而必须要使用$(this)呢？
原因在于$("li")获取的是一个集合，而不是某一个元素。
在事件函数中，如果想要使用当前元素，我们应尽量使用
$(this)来代替$(selector)这种写法，避免bug。
*/
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div id="div1"></div>
</body>
</html>
t249
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
习题，
1.在jQuery 1.x版本中，如果想要为元素绑定一个事件，应该使用（）
a.on()
b.delegate()
c.bind()
d.addEventListener()
2.在jQuery中，如果我们想要获取在键盘上按下的是哪个键，可以使用（）
a.event.which
b.event.type
c.event.target
d.event.keyCode
3.下面关于jQuery事件操作的说明中，正确的是（）
a.一般情况下，jQuery中的this指向的是触发当前事件的元素
b.on（）方法只能为元素绑定一个事件，不能绑定多个事件
c.on（）方法不能为动态创建的元素绑定事件
d.自定义事件使用的是one（）方法
答案：
1A 2D 3A
*/
</script>
</head>
<body>
</body>
</html>