1. jQuery动画
1.1 基本显示动画
1.1.1 方法
| 方法名称 | 解释 |
|---|---|
| show([speed,[easing],[fn]]) | 显示元素方法 |
| hide([speed,[easing],[fn]]) | 隐藏元素方法 |
| toggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
其中：
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；
easing：用来指定切换效果，默认是"swing"，可用参数"linear"（一般可以不用设置）；
fn：在动画完成时执行的函数，每个元素执行一次
本质：控制元素高度、宽度和透明度来实现
1.1.2 示例代码
按钮已用onclick注册事件
//隐藏事件
function hideFn() {
$("#showDiv").hide(2000);
}
//显示事件
function showFn() {
$("#showDiv").show(2000);
}
//切换事件
function toggleFn() {
$("#showDiv").toggle(2000);
}
1.2 滑动效果
1.2.1 方法
| 方法名称 | 解释 |
|---|---|
| slideDown([speed,[easing],[fn]]) | 向下滑动展现方法 |
| slideUp([speed,[easing],[fn]]) | 向上滑动隐藏方法 |
| slideToggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
其中的参数与显示效果一致。
本质：滑动效果是通过控制元素的高度来实现
1.2.2 示例代码
按钮已用onclick注册事件
//向上滑动隐藏事件
function slideUpFn() {
$("#showDiv").slideUp(2000);
}
//向下滑动显示事件
function slideDownFn() {
$("#showDiv").slideDown(2000);
}
//切换事件
function slideToggleFn() {
$("#showDiv").slideToggle(2000);
}
1.3 淡入淡出效果
1.3.1 方法
| 方法名称 | 解释 |
|---|---|
| fadeIn([speed,[easing],[fn]]) | 淡入显示方法 |
| fadeOut([speed,[easing],[fn]]) | 淡出隐藏方法 |
| fadeToggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
其中的参数与显示效果一致。
本质：通过修改元素的css样式的透明度来实现
1.3.2 示例代码
按钮已用onclick注册事件
//淡出事件
function fadeInFn() {
$("#showDiv").fadeIn(2000);
}
//淡入事件
function fadeOutFn() {
$("#showDiv").fadeOut(2000);
}
//切换事件
function fadeToggleFn() {
$("#showDiv").fadeToggle(2000);
}
2. jQuery遍历
2.1 使用js遍历方法
-
语法
var jquery对象 = $("选择器"); for (var i=0;i<jquery对象.length;i++) { //取出元素的方式：$jq对象名[i] //注意，这种方式取出的元素是js对象，需要转换 }
2.2 jQuery对象方法遍历（推荐）
-
语法
jquery对象.each(function(index,element){ //操作取出的元素对象 //注意，element是js对象，使用时需要转换 });其中：
index：就是元素在集合中的索引
element：就是集合中的每一个元素对象 -
注意：遍历函数function()在每次循环都会运行
2.3 jQuery的全局方法遍历
-
语法
$.each(jquery对象,function(index,element){ //操作取出的元素对象 //注意，element是js对象，使用时需要转换 });其中的参数含义同上。
$：jQuery全局对象
2.4 for of语句遍历
-
JavaScript5的新特性，新版本浏览器才支持，一般旧版本浏览器不支持，故不建议使用。
-
语法
for(var element of jquery对象或js数组或字符串){ //操作变量的代码 }其中：
element： js数组/jQuery对象/字符串的每个元素
2.5 遍历示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample01_遍历jQuery</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/*1.普通方式*/
$(function () {
var lis = $("li");
for (var i=0;i<lis.length;i++) {
//注意：取出来的是js对象，需要转换
alert(i+"+"+$(lis[i]).html());
}
});
/*2.jquery对象遍历*/
$(function () {
$("li").each(function(index,element) {
//注意：element是js对象
alert(index+"+"+$(element).html())
})
});
/*3.jQuery全局方法遍历*/
$(function () {
$.each($("li"),function (index,element) {
//注意：element是js对象
alert(index+"+"+$(element).html())
})
});
/*4.for of语句遍历*/
$(function(){
var lis = $("li");
for(var element of lis) {
alert($(element).text());
}
});
</script>
</head>
<body>
<ul id="stand">
<li>太白金星</li>
<li>世界</li>
<li>隐者之紫</li>
<li>黄金体验</li>
</ul>
</body>
</html>
3. jQuery事件绑定与解绑
3.1 on绑定事件
3.1.1 on绑定单个事件
-
语法
jQuery元素对象.on("事件名称",function(){ //逻辑代码 })其中：事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等
3.1.2 on绑定多个事件（重要）
-
格式：
//jquery对象.on(js对象) jquery对象.on({事件名1:function(){},事件名2:function(){},...});
3.2 off解绑事件
- 使用off只能解除动态js代码注册的事件，不能解除在html标签上直接静态方法注册的事件
3.2.1 off解绑单个事件
-
语法
jQuery元素对象.off("事件名称");
3.2.2 off解绑多个事件
-
语法
jQuery元素对象.off("事件名1 事件名2 ...");
3.2.3 off解绑所有事件
-
语法
jQuery元素对象.off();
on和off示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on注册事件/off解绑事件</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/*
使用on注册事件
*/
//绑定单一事件。
// 需求：点击事件，按钮背景变绿
$(function () {
$("#btn").on("click",function () {
$("#btn").css("background-color","green");
})
});
//绑定多个事件。
//需求：鼠标移入变黄，移出变红
$(function () {
$("#btn").on({
//鼠标移入事件
"mouseover":function () {
$("#btn").css("background-color","yellow");
},
//鼠标移出事件
"mouseout":function () {
$("#btn").css("background-color","red");
}
})
});
/*
使用off解除事件
*/
//解除单一事件
//移除鼠标点击事件
function offOne() {
$("#btn").off("click");
}
//解除多个事件
//移出鼠标移入移出事件
function offMore() {
$("#btn").off("mouseover mouseout");
}
//解除所有事件
function offAll() {
$("#btn").off();
}
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件" onclick="clickEvent();"/>
<input id="btn1" type="button" value="使用off解绑click事件" onclick="offOne();"/>
<input id="btn2" type="button" value="使用off解绑鼠标移入与移出事件" onclick="offMore();"/>
<input id="btn3" type="button" value="使用off解绑所有事件" onclick="offAll();"/>
</body>
</html>
3.3 事件切换
- 概念：同时给html元素绑定多个事件
- 常用的有四种方法：普通写法、on绑定事件写法、链式写法、切换函数写法。
- 下面通过一个示例案例展示
3.3.1 示例案例
需求：页面div默认显示红色，鼠标移入显示绿色，鼠标移出恢复蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件切换</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/*
使用四种事件切换，本质就是用绑定多个事件
*/
//1.普通方式
*$(function () {
$("#testDiv").mouseover(function () {
$(this).css("background-color","green");
});
$("#testDiv").on("mouseout",function () {
$(this).css("background-color","deepskyblue");
});
});
//2.on绑定多个事件
$(function () {
$("#testDiv").on({
"mouseover":function () {
$(this).css("background-color","green");
},
"mouseout":function () {
$(this).css("background-color","deepskyblue");
}
})
});
//3.链式写法:绑定了事件之后仍是一个jQuery对象，可以使用链式写法
//3.1 普通写法的链式写法
$(function () {
$("#testDiv").mouseover(function () {
$(this).css("background-color","green");
}).mouseout(function () {
$(this).css("background-color","deepskyblue");
});
});
//3.2 on绑定事件的链式写法
$(function () {
$("#testDiv").on("mouseover", function () {
$(this).css("background-color", "green");
}).on("mouseout", function () {
$(this).css("background-color", "deepskyblue");
})
});
//3.3 普通写法与on绑定事件混合使用的链式写法，不推荐使用
//4.切换函数
//jQuery对象.hover([over,]out) 仅局限与鼠标移入移出事件
$(function () {
$("#testDiv").hover(
//第一个函数固定是鼠标移入事件
function () {
$(this).css("background-color", "green");
},
//第二个函数固定是鼠标移出事件
function () {
$(this).css("background-color", "deepskyblue");
}
)
});
</script>
</head>
<body>
<div id="testDiv" style="width: 300px;height: 150px;background: deepskyblue;">
鼠标移入变绿，移出恢复
</div>
</body>
</html>
切换函数写法
-
语法
jQuery对象.hover([over,]out)其中，over代表鼠标移入事件触发的函数，out代表鼠标移出事件触发的函数
-
注意：只能应用于鼠标移入移出事件
4. jQuery插件
4.1 插件机制
- 利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。
4.1.1 语法
| 语法 | 解释 |
|---|---|
| jQuery.fn.extend(js对象) | 对jQuery对象进行方法扩展，使用jQuery对象调用 |
| jQuery.extend(js对象) | 对jQuery全局进行方法扩展，使用全局对象$调用 |
4.1.2 方法拓展案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义jQuery插件</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/*
Jquery扩展机制有2种
1.对jq对象扩展，格式：$.fn.extend(js对象);
2.对jq全局对象扩展，格式：$.extend(js对象);
*/
/*第一种对jq对象扩展*/
$.fn.extend({
check:function () {
$(this).prop("checked",true);
},
uncheck:function () {
$(this).prop("checked",false);
}
});
//那么给选中按钮和取消选中按钮就能直接反射check和unchecked的功能
function checkFn() {
//原来的做法是 $(":checkbox").prop("checked",true);
$(":checkbox").check();
}
function uncheckFn() {
$(":checkbox").uncheck();
}
/*第二种对jq全局对象扩展*/
//jq本身没有求最大最小的功能，需要扩展功能
$.extend({
max:function (a,b) {
return a>b?a:b;
},
min:function (a,b) {
return a<b?a:b;
}
});
//使用扩展功能
var min = $.min(3,2);
alert("3和2的最小值：" + min);
var max = $.max(5,8);
alert("5和8的最大值：" + max);
</script>
</head>
<body>
<input id="btn-check" type="button" value="点击全选" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消全选" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>
4.2 表单校验插件validator
4.2.1 表单校验插件的基本使用
-
下载插件并导入工程；
-
html引入该插件js文件
-
编写代码，语法如下：
$("form表单的选择器").validate({ rules:{ 表单项name值:校验规则， 表单项name值:{ 校验规则1:参数值1， 校验规则2:参数值2... },... }, messages:{ 表单项name值:错误提示信息， 表单项name值:{ 校验规则1:错误提示信息1， 校验规则2:错误提示信息2... },... } });其中：rules是对表单项校验的规则，messages是对应的表单项校验失败后的错误提示信息。
- 如果messages不写，内置的校验规则有默认的错误提示信息。默认是英文，可以通过导入本地化语言插件改为中文。
-
如果想要自定义错误显示标签的位置，则:
第一步设置如下lable标签:
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>
第二步将lable标签放再想要显示的位置。
4.2.2 表单校验插件自定义校验方法
使用步骤：
-
自定义校验规则：
$.validator.addMethod("校验规则名称",function(value,element,params)){ //校验代码 //如果返回false，校验失败，显示对应的错误信息； //如果返回true，校验通过； }其中：
value：当前校验组件的value值；
element：当前校验组件的js对象；
params：当前自定义校验规则传递过来的参数； -
在rules中通过校验规则名称使用校验规则。
-
在messages中定义该规则对应的错误提示信息。
5. jQuery综合案例
5.1 广告自动显示和隐藏
需求描述
- 页面打开，延迟几秒钟，广告从上向下慢慢滑下显示，停留几秒，再从下向上慢慢滑动隐藏。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告自动显示和隐藏</title>
<style type="text/css">
#content {
width: 100%;
height: 500px;
background: #999
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/*
要求：页面加载3秒广告向下滑动，停留5秒后自动向上隐藏
*/
$(function () {
//3秒广告向下滑动
setTimeout(function () {
//向下滑动耗时2秒
$("#ad").slideDown(2000, function () {
//广告停留5秒
setTimeout(function () {
//广告往上隐藏，耗时2秒
$("#ad").slideUp(2000);
}, 5000);
});
}, 3000);
});
</script>
</head>
<body>
<div>
<div id="ad" style="display: none;">
<img style="width: 100%" src="img/adv.jpg"/>
</div>
<div id="content">
这里是正文
</div>
</div>
</body>
</html>
5.2 抽奖
需求描述
- 当用户点击开始按钮时，小像框中的像片快速切换。
- 当用户点击停止按钮时，小像框中的像片停止切换，延时2秒后，大像框中也会显示与小像框相同的像片。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="img/man00.jpg" width="800px" height="500px"/>
</div>
<!-- 开始按钮 -->
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px"
onclick="imgStart()">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px"
onclick="imgStop()">
<script type="text/javascript">
//准备一个数组存放图片路径需要循环播放的图片
var imgs = [
"img/man00.jpg",
"img/man01.jpg",
"img/man02.jpg",
"img/man03.jpg",
"img/man04.jpg",
"img/man05.jpg",
"img/man06.jpg"
];
/*
思路：1.点击开始按钮后，开始按钮不能使用，点击停止按钮可以使用
同时，小相框的图片开始切换，使用计时器改变小相框的src值
2.点击停止按钮后，停止按钮不能使用，开始按钮可以使用
同时，小相框停止切换，并将对应的src给到大相框，大相框fadeIn2秒
*/
function imgStart() {
//执行小相框切换功能
imgChange();
//开始按钮不能使用
$("#startID").prop("disabled",true);
//停止按钮可以使用
$("#stopID").prop("disabled",false);
}
//小相框切换
var index = 0;
function imgChange() {
//每100毫秒切换一张图片（执行一次函数），这里用一个全局变量接收这个计时器，用于下面消除时找到这个计时器
clock = setInterval(function () {
//根据index的值获取数组中的图片地址
index = index % imgs.length;//保证index的取值范围是0~6
//获取当前图片的真实地址，这里用一个全局变量接收，方便下面将当前图片地址传递给大相框
curImgPath = imgs[index];
//更改小相框的图片地址
$("#img1ID").attr("src",curImgPath);
//索引值加1
index++;
},100);
}
//添加点击停止按钮方法
function imgStop() {
//首先消除定时器
clearInterval(clock);
//1.首先隐藏大相框原有的图片
$("#img2ID").hide();
//2.根据当前小相框的图片地址更改大相框的图片地址
$("#img2ID").attr("src",curImgPath);
//3.大相框图片淡入
$("#img2ID").fadeIn(2000);
//开始按钮能使用
$("#startID").prop("disabled",false);
//停止按钮不能使用
$("#stopID").prop("disabled",true);
}
</script>
</body>
</html>
5.3 信息录入表单校验
需求描述
- 录入员工信息，有必要的检验信息。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<style type="text/css">
p{text-align: center;font-size:24px;}
table{margin: 0 auto;border: 0;}
table tr{height:40px;border:0;}
table tr td{padding:0 14px;border:1px solid #999}
.error{color:red}/*自己写的错误样式*/
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--导入表单校验插件-->
<script src="js/jquery.validate.min.js"></script>
<!--导入本地化语言消息支持-->
<script src="js/messages_cn.js"></script>
<script type="text/javascript">
/*自定义校验规则
返回true校验通过，返回false检验不通过*/
//1.校验长度为15或者18
$.validator.addMethod("cartlength",function(value,element,params) {
//校验长度在15和18
if(value.length==params[0]||value.length==params[1]){
return true;
}
return false;
});
//2.校验长度为15的身份证号
$.validator.addMethod("cart15",function(value,element,params) {
//校验长度在15和18
if(value.length==15){
//使用正则表达式
var reg = /^\d{15}$/;
if(reg.test(value)){
//校验通过
return true;
} else {
//校验不通过
return false;
}
}
return true; //如果不满足长度为15，那么就放行由其他校验器校验
});
//3.校验长度为18的身份证号
$.validator.addMethod("cart18",function(value,element,params) {
//校验长度在15和18
if(value.length==18){
//使用正则表达式
var reg = /^\d{17}[0-9X]$/;
if(reg.test(value)){
//校验通过
return true;
} else {
//校验不通过
return false;
}
}
return true; //如果不满足长度为15，那么就放行由其他校验器校验
});
//4.校验中文
//[\u4e00-\u9fa5]校验含有中文的正则表达式
//nochinese:true,校验不能含有中文
$.validator.addMethod("nochinese", function (value, element, params) {
var reg = /[\u4e00-\u9fa5]/;
if (reg.test(value)) {
return false;
}
return true;
});
/*开启表单校验*/
$().ready(function () {
$("#empForm").validate({
rules: {
realname: "required",
username: {
required: true,
rangelength: [5,8]
},
psw: {
required: true,
rangelength: [6,12],
//不能包含中文，需要自定义校验规则
nochinese:true
},
psw2: {
required: true,
rangelength: [6,12],
equalTo: "#psw"
},
gender:"required",
age:{
required: true,
range: [26,50]
},
edu:"required",
birthday:{
required: true,
date:true
},
checkbox1:"required",
email: {
required: true,
email: true
},
cart:{
required: true,
cartlength: [15,18],
//自定义校验规则
cart15:true,
cart18:true
}
},
messages: {
//导入本地化语言支持后，有默认的中文提示。如果不想用，可自行修改
//如果是自定义校验规则，没有默认的提示，需要自行增加
psw:{
nochinese:"密码不能含有中文"
},
gender:"必须选择一个",
checkbox1:"必须选择一个",
cart:{
cartlength:"请输入15位或者18位的身份证号码",
cart15:"你输入的格式不对！",
cart18:"你输入的格式不对！"
}
}
});
});
</script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw" name="psw" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/> 男
<input type="radio" id="gender_female" value="f" name="gender"/> 女
<!--插件会自动检测是否有错误消息，有就不会再生成，没有会自动生成-->
<label for="gender" generated="true" class="error" style="display: none;">必选其一</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">－请选择你的学历－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="date" id="birthday" name="birthday" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物
<label for="checkbox1" generated="true" class="error" style="display: none;">必选字段</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table>
</form>
</body>
</html>
6. 补充知识点
6.1 JavaScript对象概念
-
js对象相当于一个保存键值对的集合，其中键为属性名，值为属性值。
-
js对象格式：
{key1:value1,key2:value,...}，其中js对象的属性可以用双引号括住也可以不用括。 -
js对象例子：
var person = {"name":"JoJo",age:18,useStand:function(){ alert("白金之星！！"); }}; //对象访问自己的成员，格式：js对象.属性 alert(person.useStand);
6.2 静态注册事件与动态注册事件
静态注册事件：只能对页面已加载完成的标签注册事件。在html标签中使用onclick等属性注册事件，eg：<bottom onclick="">;
动态注册事件：对于页面动态生成的标签（页面加载完后追加的标签）注册事件。如使用js对象.on等方式注册事件。
注意：使用off只能解除动态js代码注册的事件，不能解除在html标签上直接静态方法注册的事件。
6.3 静态注册事件与动态注册事件的解除绑定方式
静态注册事件：使用removeAttr("属性名")删除静态属性来解除；
动态注册事件：用jquery对象的off函数解除。
6.4 jquery加载完成事件的3种写法
$().ready(function(){});
$(document).ready(function(){});
$(function(){});
6.5 表单校验中校验中文的正则表达式
//[\u4e00-\u9fa5]校验含有中文的正则表达式
//nochinese:true,校验不能含有中文
$.validator.addMethod("nochinese", function (value, element, params) {
var reg = /[\u4e00-\u9fa5]/;
if (reg.test(value)) {
return false;
}
return true;
});
6.6 onclick、click()、on()绑定事件的区别
-
onclick是js独有的事件，本身就是一个事件。而jquery没有onclick这个事件；
-
click、on是jquery的方法，用于给元素绑定事件。
-
click的作用是触发onclick事件。用click()给元素绑定事件，相当于给元素添加onclick事件，只要执行了元素的click()方法，就会触发对应的onclick事件。onclick和click()只能绑定静态的事件。
-
on()绑定事件到当前选定的jQuery对象中的元素。可以绑定包括click、mouseover等事件。on()可以绑定动态事件，也可以绑定静态事件。
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
