jQuery学习教程，写更少的代码,做更多的事情
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习教程，写更少的代码,做更多的事情相关的知识，希望对你有一定的参考价值。
1.浏览器事件
1> 浏览器事件分为三个事件:
.error()
.resize()
.scroll()
例1：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
p{
width: 100%;
height: 2000px;
}
div{
width: 100px;
height: 100px;
background-color: aquamarine;
overflow: auto;
}
</style>
<body>
<img src="src1">
<!-- <p>滚动</p> -->
<div id="d1">你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，你好，</div>
<script type="text/javascript">
//error的案例
$(function(){
$("img").error(function(){
alert("出现错误");
});
})
// $(window).scroll(function(){
// alert("滚动我就弹出来，气不气。");
// })
//scroll 的案例
$(function(){
$("#d1").scroll(function(){
alert("滚动我就弹出来，气不气。");
})
})
</script>
</body>
</html>
例2：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
</style>
<body>
<script type="text/javascript">
//resize的案例
$(window).resize(function(){
//改变的是浏览器窗口大小
alert("页面大小改变！");
})
</script>
</body>
</html>
2> ready事件
有三种方式的写法：
$().ready(function(){
})$(document).ready(function(){
})$(function(){
}) //最常用的ready写法。
3> load事件
这里直接放张图片，读懂就行。
4> 文档加载过程
从图中可以看出，第4步结束后，就开始执行ready事件了，所有的都结束了，才能执行load事件。
2.绑定事件处理器
1> 绑定事件bind
语法：
.bind
根据英文意思来记住含义：绑定
例如：下面是一个制作按钮的一个教程：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
p{
width: 100px;
height: 50px;
background-color: skyblue;
border-radius: 5px;
line-height: 50px;
margin: 0 auto;
color: #ffffff;
font-size: 20px;
text-align: center;
}
.pb{
background-color: green;
}
</style>
<body>
<p>按钮</p>
<script type="text/javascript">
//下面通过使用对象来执行事件相应内容。
// $(function(){
// $("p").bind({
// mouseover:function(){
// $(this).addClass("pb");
// },
// mouseout:function(){
// $(this).removeClass("pb");
// }
// })
// })
$("p").bind("mouseover mouseout",function(){
//toggleClass作用就是如果属性p有pb这个类，就删除，反之就添加，刚好相反。
$(this).toggleClass("pb");
//现在bind()绑定直接用on()事件代替了
})
</script>
</body>
</html>
2>绑定事件delegate
语法：
.delegate
根据英文意思来记住含义：委托
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
</style>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<script type="text/javascript">
$("ul").delegate("li","click",function(){
alert($(this).html());
})
//现在delegate()绑定直接用on()事件代替了
</script>
</body>
</html>
3> on事件和off事件
语法：
.on
.off
on启动，off是关闭，这两个是一对。
off只能移除on事件。
off事件如果什么都不添加，就会移除所有事件.
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
p{
width: 100px;
background-color: red;
}
</style>
<body>
<button id="btn">按钮</button>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<p id="pon">牛啊牛啊。</p>
<div>
<p>干得漂亮。</p>
</div>
<script type="text/javascript">
//使用on来实现一个bind绑定
$("#btn").on("click",function(){
alert("click ，点击事件");
})
//使用on来实现一个delegate委托事件
$("ul").on("click","li",function(){
alert($(this).html());
})
//使用on来添加多个事件
$("#pon").on("mouseover mouseout",function(){
alert($(this).html());
})
//使用off来关闭on
var fun=function(){
alert("集合进攻敌方水晶！");
}
$("div").on("click mouseover","p",fun)
$("div").off("mouseover","p",fun);
//如果什么都不添加,则会移除所有事件。
// $("div").off();
</script>
</body>
</html>
4> one事件
语法：
.one
就是只执行一次事件相应的函数代码。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
p{
width: 100px;
background-color: red;
}
</style>
<body>
<p>干得漂亮。</p>
<script type="text/javascript">
$("p").one("click",function(){
alert("我只出现一次。")
})
</script>
</body>
</html>
5> unbind()事件和undelegate()
和bind事件、delegate事件是一对。
主要是来关闭bind和delegate事件。
功能关系就像on事件和off事件一样。
3.事件对象
1> currentTarget对象和target对象
语法：
event.currentTarget
event.target
例如：currentTarget和target对象区别，看例子注释！！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div>
<p>click me</p>
</div>
<script type="text/javascript">
$("div").on("click",function(e){
console.log($(e.currentTarget)); //currentTarget对应div事件的监听者
console.log($(e.target)); //target对应事件的目标元素p
console.log($(this)); //也是div事件
})
</script>
</body>
</html>
看下图的console：可以知道对应执行的什么事件或对象。
2> delegateTarget对象
语法：
event.delegateTarget
它指向的是事件的委托者。看下面例题。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div>
<p>click me</p>
</div>
<script type="text/javascript">
$("div").on("click",function(e){
console.log($(this).html()); //当前div下的html内容
console.log($(e.delegateTarget)); //打印的是当前的委托者，也就是div。
// 也可以向下面一样执行平时的代码。
// ($(e.delegateTarget).css("border","1px solid red"))
})
</script>
</body>
</html>
3> pageX和pageY对象
语法：
event.pageX
event.pageY
鼠标在元素内的X，Y坐标。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
#xy{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
<body>
<div id="xy">
</div>
<script type="text/javascript">
$(function(){
$("#xy").on("mouseover",function(e){
//后台打印出来鼠标xy的坐标
console.log("page x:"+e.pageX+"page y:"+e.pageY);
})
})
</script>
</body>
</html>
4> type对象
语法：
event.type
获取当前的事件类型。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
#xy{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
<body>
<div id="xy">
</div>
<script type="text/javascript">
$(function(){
$("#xy").on("mouseover",function(e){
console.log("page x:"+e.pageX+"page y:"+e.pageY);
//获取当前的事件类型,这里的事件是mouseover。
alert(e.type);
})
})
</script>
</body>
</html>
5> preventDefault对象
语法：
event.preventDefault
它是用来阻止默认事件。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="source/jquery-3.6.0.js"></script>
</head>
<style type="text/css">
</style>
<body>
<a href="www.baidu.com">百度</a>
<script type="text/javascript">
$(function(){
$("a").click(function(e){
e.preventDefault();
alert("已经阻止了");
})
})
</script>
</body>
</html>
8> stopPropagation对象
语法：
event.stopPropagation()
该方法将停止事件的传播，阻止它被分派到其他 Document 节点，类似阻止冒泡。
这里设计了一个复杂的概念，可以根据下面的图片来思考：
停止冒泡型事件的进一步传递（取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件，我们还可以停止支持DOM标准浏览器的捕捉型事件，用topPropagation()方法）。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。
4.表单时间
1> focus事件和blur事件
这两个事件适用于任何元素。
语法：
<font color="red>"focus()
blur()
blur事件是失去焦点所触发的事件。
focus事件是获得焦点所触发的事件，和blur相反。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<form>
<input id="get" type="text" value="field 1">
<input id="loss" type="text" value="field 2">
</form>
<script type="text/javascript">
$(function(){
//focus获得焦点
$("#get").focus(function(){
alert("获得焦点");
})
//blur失去焦点事件
$("#loss").blur(function(){
alert("失去焦点");
})
})
</script>
</body>
</html>
2> change事件
该事件仅适用于文本域（text field）， textarea ， select 元素，input元素。
语法：
change()
改变内容所触发的事件。
例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<form>
<input id="change" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script type="text/javascript">
$(function(){
$("#change").change(function(){
alert("内容改变了");
})
})
</script>
</body>
</html>
3> select事件
该事件仅适用于文本域（text field）， textarea ， select 元素，input元素。和change一样
语法：
select()
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<form>
<input id="select" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script type="text/javascript">
$(function(){
$("#select").select(function(){
alert("内容被选择了");
})
})
</script>
</body>
</html>
4> submit事件
该事件仅适用于form元素。
语法：
submit()
顾名思义就是提交啊。
例如： 一定要注意是否是form表单元素！！！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<form id="submit">
<input type="submit" name="" value="提交按钮">
</form>
<script type="text/javascript">
$(function(){
$("#submit").submit(function(){
alert("你确定要提交吗？");
})
})
</script>
</body>
</html>
以上是关于jQuery学习教程，写更少的代码,做更多的事情的主要内容，如果未能解决你的问题，请参考以下文章