前端之jQuery基础
jQuery简单了解
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
二、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也无法使用 jQuery里的方法。
DOM对象和jQuery对象的相互转化：
DOM对象--->jQuery对象 $(DOM对象) 用$()将DOM对象包起来
jQuery对象--->DOM对象 $("选择器")[索引值]
备注：
1. 约定成俗，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
// 声明一个DOM对象的变量时，变量名按照驼峰体的格式定义
2. jQuery的导入：
<script src="jquery-3.3.1.js"></script>
3. jQuery的代码一定要放在导入jQuery文件的下面，否则会报错：Uncaught ReferenceError: $ is not defined
一般情况，如果报错为：$ is not defined 时有两种情况：1.你没有导入jQuery.js文件 2.你在导入jQuery之前使用了jQuery方法。
在jQuery中$相当于jQuery的别名。
$('#d1'); 等同于 jQuery('#d1');
jQuery基础语法
$(selector).action() // $("找标签的条件").方法()
查找标签
1.选择器
id选择器：
$("#id值") // 结果为一个数组 可以通过索引取得具体的标签，从而转化为DOM对象，就可以使用DOM方法
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName") // 查找多个用逗号隔开 表示将满足#id条件的和满足.className条件的和....全部返回
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器：
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
备注：has是指从自己的后代中找（不包含自己） 而not是从自己中找（不包含后代）
例子：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>class操作实例</title>
<style>
.c1 {
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<div class="c1 "></div>
<input type="button" id="b1" value="开关">
<script src="jquery-3.3.1.js"></script>
<script>
// 找到b1按钮,绑定事件
$("#b1")[0].onclick=function () {
// 给div.c1 toggle c2的样式类
$(".c1").toggleClass("c2");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title> 自定义模态框弹出示例</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 999;
}
.modal {
width: 400px;
height: 300px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>内容</div>
<input type="button" id="show" value="弹出模态框">
<!--模态框 开始-->
<div class="cover hide"></div>
<div class="modal hide">
<form action="">
<p><input type="text"></p>
<p><input type="password"></p>
<p><input type="submit">
<input type="button" value="取消" id="close"></p>
</form>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 找到弹出模态框的按钮
$("#show")[0].onclick=function () {
// 把模态框和盖板显示出来--> 移除它们两个的.hide样式类
$(".cover, .modal").removeClass("hide"); // 如果是找到多个标签做同样的事情就可以直接写方法
};
// 找到 取消按钮
$("#close")[0].onclick=function () {
// 把模态框和盖板隐藏出来--> 添加它们两个的.hide样式类
$(".cover, .modal").addClass("hide");
}
</script>
</body>
</html>
属性选择器：
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子：
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单常用筛选：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子：
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
// 使用：checked时会包含select下拉框的默认选择内容！！ $(':checked'); jQuery.fn.init [option, prevObject: jQuery.fn.init(1)]0: optionlength: 1prevObject: jQuery.fn.init [document]__proto__: Object(0) $(':checked')[0]; <option value="1">11</option>
备注：使用：checked方法查找input标签中所有的被选中的属性时，不能单独的使用$(':checked'),而要加上具体的标签：$("input:checked")
例子：
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
2. 筛选器
下一个元素：
$("#id").next() // 找到当前标签的下一个同级标签
$("#id").nextAll() // 找到当前标签的下面的所有同级标签
$("#id").nextUntil("#i2") // 找到当前标签后面的所有直到某个标签停止 不包含直到的那个标签
上一个元素：
$("#id").prev() // 找到当前标签的前一个标签
$("#id").prevAll() // 找到当前标签的上面的所有标签 备注：找到的所有标签是倒序的顺序
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent() // 父标签
$("#id").parents() // 查找当前元素的所有的父辈元素 -->得到一个数组 包含所有的父标签 一直到HTML标签
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
// 不包含那个元素
儿子和兄弟元素：
$("#id").children(); //所有的子标签
$("#id").siblings(); //所有同级的兄弟标签（前面的和后面的都包含）
查找元素：
$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
补充：
.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
左侧菜单代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
ul {
list-style-type:none;
}
a {
text-decoration:none;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div class="left-menu">
<div class="menu-title">菜单一</div>
<div class="menu-items hide">
<ul>
<li><a href="">内容一</a></li>
<li><a href="">内容二</a></li>
<li><a href="">内容三</a></li>
</ul>
</div>
<div class="menu-title">菜单二</div>
<div class="menu-items hide">
<ul>
<li><a href="">内容一</a></li>
<li><a href="">内容二</a></li>
<li><a href="">内容三</a></li>
</ul>
</div>
<div class="menu-title">菜单三</div>
<div class="menu-items hide">
<ul>
<li><a href="">内容一</a></li>
<li><a href="">内容二</a></li>
<li><a href="">内容三</a></li>
</ul>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(".menu-title").on("click", function () {
// 把其它的选项隐藏掉
// $(this)
// 找到当前点击标签的兄弟标签 --> 含有title class的兄弟标签
// $(this).siblings(".title").next().addClass("hide");
// jQuery绑定事件的方式!!!
// 当前点击的标签 下一个标签 显示出来--> 从class移除hide
// this --> 当前操作的标签 --> DOM对象 --> 不能调用jQuery对象
// console.log(this);
// $(this) --> DOM对象用$()包起来就能转换成jQuery对象,就能调用jQuery的方法
// $(this).next() --> 找到了当前点击标签的下一个标签
// 移除当前点击标签下一个标签的hide
// $(this).next().toggleClass("hide");
// 用一行,链式操作
$(this).next().removeClass("hide").siblings(".menu-items").addClass("hide");
// 将removeClass 换成 toggleClass 可以实现将菜单下的标签点击收起来
// $(this).next().toggleClass("hide").siblings(".menu-items").addClass("hide");
})
</script>
</body>
</html>
操作标签
1. 样式操作
1.1 样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在，返回bool值
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例：开关灯和模态框
1.2 CSS
$("选择器").css("样式属性") // 获取标签的属性值
$("选择器").css("样式属性","属性值") // 设置标签的CSS属性值
$("选择器").css({"样式属性1":"属性值1","样式属性2":"属性值2",..}) // 设置多个属性值时，可以用自定义对象格式
css("color","red")//DOM操作：tag.style.color="red"
备注：$("选择器") 找到多个标签时，获取值时返回的是第一个标签的属性值。而设置标签属性值时，是将找到的所有标签都设置。
示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
1.3 位置：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移 -->用于标签是绝对定位absolute
// scroll 用于window对象 获取滚动条距离那一侧的距离
scrollTop()// 获取匹配元素相对滚动条顶部的偏移 $(window).scrollTop(); -->得到一个值，置于顶部时，值为0，滚动后会得到一个具体的值
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 $(window).scrollTop(此处可以设置值) 表示将滚动条置于某处
备注：.offset()方法允许我们检索一个元素相对于文档（document）的当前位置(也就是当前窗口的位置)。
和 .position()的差别在于： .position()是相对于父级元素的位移。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部示例</title>
<style>
*{
margin:0;
padding:0;
}
.c1 {
width:200px;
height:200px;
background-color:#0f0;
}
.c2 {
height:1000px;
background-color:#bbbbbb;
}
li {
line-height:50px;
}
#roll {
padding:5px;
text-align:center;
background-color:#eee;
color:tomato;
position:fixed;
right:10px;
bottom:20px;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div class="c1"></div>
<div>
<ul>
<li>1<a href=""></a></li>
<li>2<a href=""></a></li>
<li>3<a href=""></a></li>
<li>4<a href=""></a></li>
<li>5<a href=""></a></li>
<li>6<a href=""></a></li>
<li>7<a href=""></a></li>
<li>8<a href=""></a></li>
<li>9<a href=""></a></li>
<li>10<a href=""></a></li>
</ul>
</div>
<div class="c2"></div>
<button id="roll" class="btn hide">返回顶部</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 当窗口的滚动条滚动起来就触发事件
$(window).on('scroll',function(){
// 每次滚动滚动条就判断当前滚动条距离文档顶部的距离，如果距离大于200就将返回顶部按钮显示出来
if ($(window).scrollTop() >200){
$('#roll').removeClass('hide');
} else {
// 否则就隐藏
$('#roll').addClass('hide');
}
});
// 为返回顶部按钮绑定点击事件
$('#roll').on('click',function() {
// 点击按钮就将滚动条距离文档顶部的距离改为0
$(window).scrollTop(0);
});
</script>
</body>
</html>
1.4 尺寸：
height() // 表示CSS属性中height的值 即content的高度
width() // 表示CSS属性中width的值
innerHeight() // 表示content+padding的height值
innerWidth() // 表示content+padding的width值
outerHeight() // 表示content+padding+border的值
outerWidth()
2. 文本操作
2.1 HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
2.2 文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
2.3 值：
val() // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置checkbox、select的值
备注：checkbox多选框选择多个值时（checked），取值时返回第一个，取出全部用for循环。select下拉框中多选下拉框获取值时得到的是一个数组。
示例：
获取被选中的checkbox或radio的值：
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery val示例</title> </head> <body> <label for="s1">城市</label> <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> <hr> <label for="s2">爱好</label> <select id="s2" multiple="multiple"> <option value="basketball" selected>篮球</option> <option value="football">足球</option> <option value="doublecolorball" selected>双色球</option> </select> <script src="jquery-3.3.1.js"></script> <script> // 单选下拉框 $("#s1").val("shanghai"); // 多选下拉框 $("#s2").val(["basketball", "football"]); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>文本操作之登录验证</title> <style> .error { color: red; } </style> </head> <body> <form action=""> <div> <label for="input-name">用户名</label> <input type="text" id="input-name" name="name"> <span class="error"></span> </div> <div> <label for="input-password">密码</label> <input type="password" id="input-password" name="password"> <span class="error"></span> </div> <div> <input type="button" id="btn" value="提交"> </div> </form> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $("#btn").click(function () { var username = $("#input-name").val(); var password = $("#input-password").val(); if (username.length === 0) { $("#input-name").siblings(".error").text("用户名不能为空"); } if (password.length === 0) { $("#input-password").siblings(".error").text("密码不能为空"); } }) </script> </body> </html>
3. 属性操作
用于ID等或自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr(attrName) // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 适用于返回布尔值的属性 比如CheckBox和radio判断选中与否
removeProp() // 移除属性
注意：
1.在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
2.使用prop时，如果要选中某个值，可以用 $("找到这个选项").prop(''checked",true) 将checked的值设为true即为选中，相反取消设为false。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
示例：jQuery实现全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title>
<style>
#t1 {
border:2px solid blue;
}
</style>
</head>
<body>
<table id="t1" border="solid">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>rain</td>
<td>下雨</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>snow</td>
<td>飘雪</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>wind</td>
<td>刮风</td>
</tr>
</tbody>
</table>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 全选 找到全选按钮 绑定点击事件
$('#all').on('click',function(){
// 找到td标签下面所有的CheckBox标签，全部设置为checked属性
$('td>:checkbox').prop('checked',true);
});
// 取消 找到取消按钮，绑定点击事件
$("#cancel").on("click",function(){
// 找到td标签下面的所有的CheckBox标签，全部设为false
$("td>:checkbox").prop('checked',false);
});
// 反选 找到反选按钮 绑定点击事件
$("#reverse").on('click',function(){
// 两种方式
// 1.找到所有的CheckBox，循环 依次判断是否选中
// 声明一个变量 可以使得代码执行更高效
var $checkbox = $('td>input:checkbox');
var $currcheckbox;
for (var i=0;i<$checkbox.length;i++){
$currcheckbox = $($checkbox[i]);
// 判断是否被选中 如果被选中，则将checked 设为false
if ($currcheckbox.prop('checked')){
$currcheckbox.prop('checked',false);
}else{
// 否则 就将checked 设为true
$currcheckbox.prop('checked',true);
}
}
// 2. 将找到的被选中的标签和为选中的标签储存在变量中
var $checked = $("td>input:checked");
var $notchecked = $("td>input:not(:checked)");
$checked.prop('checked',false);
$notchecked.prop('checked',true);
})
</script>
</body>
</html>
4. 文档处理
备注：使用jQuery进行文档处理的操作时，无法使用jQuery创建标签，通常我们使用原生DOM创建标签的方式：document.createElement("标签名")
4.1 添加
4.11 添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
4.12 添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
4.13 添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
4.14 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
4.2 移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
备注：empty是清空匹配标签中的所有的子标签，自身保留，而remove是从DOM中直接删除，包括自身和子标签。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加删除示例</title>
</head>
<body>
<input type="button" id="add" value="点击添加">
<table border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>snow</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td>2</td>
<td>kerma</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td>3</td>
<td>jone</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
// 点击添加按钮添加一条数据
// 创建一条数据
var trEle = document.createElement('tr');
trEle.innerHTML='<td>4</td> <td>malgn</td> <td><input type="button" value="删除" class="delete"></td>';
// 找到添加按钮 绑定点击事件
$("#add").on("click",function(){
// 将创建的数据追加到tbody内部的后面
$("tbody").append(trEle);
});
// 点击删除按钮删除当前行的数据
// 找到删除按钮 绑定点击事件
$(".delete").on('click',function(){
// 通过这个删除按钮找到当前行 然后删除remove
$(this).parent().parent().remove();
})
</script>
</body>
</html>
备注：上面的实现有一个问题，那就是添加的数据无法删除，这时我们就要用到一个概念：事件的委托，下面介绍事件时完善。
4.3 替换
replaceWith()
replaceAll()
备注：replaceWith（）和replaceAll（）都可以替换一个或者所有的找到的标签，不同的是两者的表达顺序不同，replaceWith（） 表示用
后面的括号中的标签替换前面找到的标签，而replaceAll（）则相反，用前面的标签替换后面的。
4.4 克隆
clone()// 参数
克隆示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆</title>
</head>
<body>
<button id="btn">点击复制</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 找到点击按钮 绑定点击事件
$("#btn").on("click",function(){
// 复制指定的标签 复制后将复制标签添加到某个位置
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$(this).clone().insertAfter($(this));
// clone(true) 加上参数true表示连标签的事件也复制
$(this).clone(true).insertAfter($(this));
})
</script>
</body>
</html>
备注：button标签可以简写
<input type="button" value="取消"> <button>取消</button>
事件
1. 常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
2. 事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
事件委托的实现就是在绑定click事件时多传一个参数。格式为 $("父标签").on("事件","子标签"，function(){...})
click点击事件中有一个事件委托的概念，利用事件冒泡来实现对未来的标签绑定事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加删除示例</title>
</head>
<body>
<input type="button" id="add" value="点击添加">
<table border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>snow</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td>2</td>
<td>kerma</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td>3</td>
<td>jone</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
// 点击添加按钮添加一条数据
// 创建一条数据
var trEle = document.createElement('tr');
trEle.innerHTML='<td>4</td> <td>malgn</td> <td><input type="button" value="删除" class="delete"></td>';
// 找到添加按钮 绑定点击事件
$("#add").on("click",function(){
// 将创建的数据追加到tbody内部的后面
$("tbody").append(trEle);
});
// 点击删除按钮删除当前行的数据
// 找到删除按钮 绑定点击事件
// 可以给tbody绑定一个事件委托，利用事件冒泡 来监听后代中含有.delete样式类的标签的点击事件
$("tbody").on('click','.delete',function(){
// 通过这个删除按钮找到当前行 然后删除remove
$(this).parent().parent().remove();
})
</script>
</body>
</html>
3. hover事件
hover事件是一个特殊的事件，hover绑定事件的方式是：$("选择器").hover(function(){...},function(){...}) 里面接收两个匿名函数，一个是鼠标移上去的操作，一个是鼠标移走后的操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hover示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
width: 100%;
background-color: #3d3d3d;
position: fixed;
top: 0;
}
.nav ul {
list-style-type: none;
line-height: 40px;
}
.nav li {
float: left;
padding: 0 10px;
color: #999999;
position: relative;
}
.nav li:hover {
background-color: #0f0f0f;
color: white;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.son {
position: absolute;
top: 40px;
left: 0;
height: 50px;
width: 100px;
background-color: #00a9ff;
display: none;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>登录</li>
<li>注册</li>
<li>购物车
<p class="son">
空空如也...
</p>
</li>
</ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(".nav li").hover(
function () {
// 鼠标移上去的操作
$(this).addClass("hover");
},
// 鼠标移走的操作
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
4. change事件
jQuery 实现select联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>change事件示例</title>
</head>
<body>
<div id="d1">
<form action="">
<label for="s1"></label>
<select name="advince" id="s1">
<option value="0">请选择省</option>
</select>
<label for="s2"></label>
<select name="city" id="s2">
<option value="0">请选择市</option>
</select>
</form>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 创建一条数据
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var optEle;
// 循环这个自定义对象
for (var i in data){
// 创建一个option标签
optEle = document.createElement('option');
$(optEle).text(i);
$("#s1").append($(optEle));
}
// 找到触发改变事件的标签 绑定改变事件
var $s1 = $("#s1");
$s1.on('change',function(){
$s1.html('<option value="0">请选择市</option>');
var city = data[$('#s1').val()];
for (var i=0;i<city.length;i++) {
optEle1 = document.createElement('option');
$(optEle1).text(city[i]);
$("#s2").append($(optEle1))
}
})
</script>
</body>
</html>
5.keydown和keyup事件
组合示例：
!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title> 按住shift批量操作</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
// 定义一个全局的变量,保存shift有没有被按下的状态
var flag = false;
// 给window绑定按键被按下的事件
$(window).on("keydown", function (e) {
console.log(e.keyCode);
if (e.keyCode === 16){
// 表示shift被按下!!!
flag = true;
}
});
// 给window绑定按键被抬起的事件
$(window).on("keyup", function (e) {
if (e.keyCode === 16){
// 表示shift被按下!!!
flag = false;
}
});
// select标签的值发生变化之后,触发事件
$("select").on("change", function () {
// 1. 判断shift有没有被按下
// 2. 判断当前行有没有被选中
var isChecked = $(this).parent().parent().find(":checkbox").prop("checked");
if (flag && isChecked) {
// 按下就进入批量编辑模式
// 1. 取到select变化之后的值
var value = $(this).val();
// 2. 找到所有的选中的checkbox,把对应的select设置成上面能取到的值
$("input:checked").parent().parent().find("select").val(value);
}
// 没有被按下,啥都不做
})
</script>
</body>
</html>
6. input事件
实时监听input输入值变化示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>实时监听input输入值变化</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { alert($(this).val()); }) </script> </body> </html>
7. 事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
8. 移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
9. 阻止后续事件执行
return false; // 常见阻止表单提交等
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
10. 页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
当我们将jQuery 的代码和导包书写到HTML文档上面的时候，由于HTML代码是从上往下执行的，HTML文档还没有加载，所以就会报错，jQuery代码无法生效，这时我们采用这个方法，将jQuery和JS的代码写在这个ready事件里，可以保证整个文档加载完成之后才会执行此处的代码。所以我们在编写JS代码时要将代码放入$(document).ready(function(){...})
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
备注：在原生DOM中也有等待页面加载的用法，window.onload= function(){}，后跟一个匿名函数。函数中执行加载完之后进行的操作。也可以使用于某一个操作执行完之后进行的操作，比如读取文件的时候，我们要把文件整个读取完之后才能进行显示等等之类的。fileReader.onload = function(){}。
原生 js 的入口函数指的是：window.onload = function() {}; 如下：
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
window.onload = function () {
alert(1);
}
而 jQuery的入口函数，有以下几种写法：
写法一：
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
})
写法二：（写法一的简洁版）
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
});
写法三：
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
jQuery入口函数与js入口函数的区别：
区别一：书写个数不同：
-
Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
-
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
-
Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
-
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载完绑定事件，并且阻止默认事件发生：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录注册示例</title> <style> .error { color: red; } </style> </head> <body> <form id="myForm"> <label for="name">姓名</label> <input type="text" id="name"> <span class="error"></span> <label for="passwd">密码</label> <input type="password" id="passwd"> <span class="error"></span> <input type="submit" id="modal-submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="s7validate.js"></script> <script> function myValidation() { // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树 var $myForm = $("#myForm"); $myForm.find(":submit").on("click", function () { // 定义一个标志位，记录表单填写是否正常 var flag = true; $myForm.find(":text, :password").each(function () { var val = $(this).val(); if (val.length <= 0 ){ var labelName = $(this).prev("label").text(); $(this).next("span").text(labelName + "不能为空"); flag = false; } }); // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件 return flag; }); // input输入框获取焦点后移除之前的错误提示信息 $myForm.find("input[type!='submit']").on("focus", function () { $(this).next(".error").text(""); }) } // 文档树就绪后执行 $(document).ready(function () { myValidation(); }); </script> </body> </html>
动画效果
// 基本
show([s,[e],[fn]]) // 将图片显示出来 可以设置一个时间参数 表示多少秒将图片显示出来 $("选择器").show(1000) 1秒将图片显示
hide([s,[e],[fn]]) // 将图片隐藏起来 同上
toggle([s],[e],[fn]) // 图片显示中就隐藏 图片隐藏将显示
// 滑动
slideDown([s],[e],[fn]) // 像遮光帘一样将图片慢慢展开
slideUp([s,[e],[fn]]) // 遮光帘一样将图片收起来
slideToggle([s],[e],[fn]) // 显示将收起来 隐藏就展示出来
// 淡入淡出
fadeIn([s],[e],[fn]) // 改变图片的透明度 将图片逐渐的显出来
fadeOut([s],[e],[fn]) // 图片逐渐变淡
fadeTo([[s],o,[e],[fn]]) // 传两个参数 将图片变淡到多少的透明度 $("选择器").fadeTo(时间，透明度) 透明度：0-1之间
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn]) // 传一个自定义对象 {字体 背景颜色等等}
自定义动画示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点赞动画示例</title> <style> div { position: relative; display: inline-block; } div>i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1; } </style> </head> <body> <div id="d1">点赞</div> <script src="jquery-3.2.1.min.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ opacity: 0 }, 1000) }) </script> </body> </html>
each循环
each是jQuery内置的一个模块。
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出：
0 10 1 20 2 30 3 40
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
each循环的两种方式：1.$.each(一个可循环的对象，function(i){...}) 2.$("选择器").each(function(){...})
each循环中的this关键字表示每一个循环的元素。
在遍历过程中可以使用 return false提前结束each循环。而跳出本次循环继续下次循环可以使用 return；
终止each循环
return false；
应用示例：
submit 提交数据时，如果input内容为空，就不能提交的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>return false的使用</title>
</head>
<body>
<form action="">
<input id="username" type="text">
<input id="pwd" type="password">
<input id="i1" type="submit" value="提交">
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$("#i1").on("click", function () {
alert(123);
var username = $("#username").val();
var pwd = $("#pwd").val();
if (username.trim().length === 0 || pwd.trim().length===0) {
// username和pwd有一个为空就表示数据不合格,就不让提交
// 也就是不让执行默认submit事件
return false; // 后续的事件不执行
}
})
</script>
</body>
</html>
跳过本次each循环
return；
备注：form表单中的submit提交按钮，每次提交都会刷新页面，这是submit默认的状态。绑定多个事件时，submit会优先执行绑定的事件，最后执行默认的刷新页面。当一个标签绑定多个事件时，会倒序的执行。
九、data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
一般给特定的某一个标签保存数据，用来代替全局变量。
.data(key, value): 利用这个方法可以将任意的一个对象存储
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
$("body").data("$Ele",$("选择器")) // 将所有的通过$("选择器")找到的标签存储在“$Ele”这个key中
.data(key): 取值
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
备注：取值时有值返回对应保存的值，没有值，返回undefined。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
示例：
模态框编辑的数据回填表格，表格数据的增删改查。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>就三个按钮的作业讲解</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hide {
display: none;
}
/*遮罩层*/
.cover {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.8;
z-index: 999;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 400px;
margin-top: -100px;
margin-left: -200px;
background-color: white;
z-index: 1000;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-hobby">爱好</label>
<input type="text" id="modal-hobby">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 弹出模态框的函数
function showModal() {
// 把模态框显示出来
$("#myCover, #myModal").removeClass("hide");
}
// 隐藏模态框的函数
function hideModal() {
// 把模态框隐藏起来
$("#myCover, #myModal").addClass("hide");
// 清空模态框中input标签的值
$("#modal-name, #modal-hobby").val("");
}
// 新增按钮绑定事件
$("#add").on("click", function () {
showModal();
});
// 给模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () {
hideModal();
});
var $table = $("table");
// 表格中每一行的删除按钮,绑定事件
$table.on("click", ".delete-btn", function () {
// 更新表格中当前行后面每一行的序号
// 找到当前行后面的每一行
$(this).parent().parent().nextAll().each(function () {
// each中的this和外面的this不一样了!
var num = $(this).children().first().text();
$(this).children().first().text(num-1);
});
// 找到当前行,删除
$(this).parent().parent().remove();
});
// 编辑按钮绑定事件
$table.on("click", ".edit-btn", function () {
// 显示模态框
showModal();
// 把原来的内容填充到模态框中
// 取到当前编辑的这一行
var $currentTr = $(this).parent().parent();
// 将当前编辑行保存到模态框对象中
$("#myModal").data("key", $currentTr);
// 1. 取值
var name = $currentTr.children().eq(1).text();
var hobby = $currentTr.children().eq(2).text();
// 填充到模态框
$("#modal-name").val(name);
$("#modal-hobby").val(hobby);
});
// 点击模态框中的提交按钮
$("#modal-submit").on("click", function () {
// 获取模态框中input的值
var name = $("#modal-name").val();
var hobby = $("#modal-hobby").val();
// 如何区分是编辑还是新增
var $tr = $("#myModal").data("key");
if ($tr !== undefined){ // 可以简写,这里是为了引出来好理解
// 是编辑操作
$tr.children().eq(1).text(name);
$tr.children().eq(2).text(hobby);
// 编辑完之后要把之前保存的data删掉
$("#myModal").removeData("key");
}else {
// 就是新增操作
// 创建一个新的tr标签
var newTr = document.createElement("tr");
// 塞td标签
var num = $("table tr").length;
var eleStr = "<td>" + num + "</td>";
eleStr += "<td>" + name + "</td>";
eleStr += "<td>" + hobby + "</td>";
eleStr += "<td>" + '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>' + "</td>";
newTr.innerHTML = eleStr;
// 将新创建的tr标签追加到table里
$("tbody").append(newTr);
}
// 隐藏模态框
hideModal();
})
</script>
</body>
</html>
插件(了解即可)
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
<script>
jQuery.extend({
min:function(a, b){return a < b ? a : b;},
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
单独写在文件中的扩展：
(function(jq){
jq.extend({
funcName:function(){
...
},
});
})(jQuery);
例子：
自定义的jQuery登录验证插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录校验示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登录"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate.js"></script> <script> $.validate(); </script> </body> </html>
"use strict"; (function ($) { function check() { // 定义一个标志位，表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if ($(this).attr("required")) { // 如果是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密码类型，我们就要判断密码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断密码长度是否大于6位 if (inputValue.length < 6) { errMsg = labelName + "必须大于6位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手机类型，我们需要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有效的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我定义的工具函数 $.extend({ validate: function () { $("form :submit").on("click", function () { return check(); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
传参版插件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录校验示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登录"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
"use strict"; (function ($) { function check(arg) { // 定义一个标志位，表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if (arg[inputName].required) { // 如果是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密码类型，我们就要判断密码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断密码长度是否大于6位 if (inputValue.length < arg[inputName].minLength) { errMsg = labelName + "必须大于"+arg[inputName].minLength+"位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手机类型，我们需要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有效的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我定义的工具函数 $.extend({ validate: function (arg) { $("form :submit").on("click", function () { return check(arg); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
作者：赵盼盼
出处：https://www.cnblogs.com/zhaopanpan/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
⇩ 关注或点个喜欢就行 ^_^
关注我
浙公网安备 33010602011771号