jQuery
大纲: jQuery-Dom操作 jQuery效果 jQuery遍历 jQuery的事件总结 常见事件 事件和事件源的绑定 事件切换 jQuery插件 插件机制 validate插件
jQuery效果
基本:高和宽都变化 hide([毫秒值]):隐藏(几毫秒后完成隐藏) show([毫秒值]):展示(几毫秒后完成展示) toggle([毫秒值]):切换(几毫秒后完成切换) 滑入滑出:高变化 slideUp([毫秒值]):滑出 slideDown([毫秒值]):滑入 slideToggle([毫秒值]):切换 淡入淡出: fadeIn([毫秒值]):淡入 fadeOut([毫秒值]):淡出 fadeToggle([毫秒值]):切换 了解: fadeToggle(毫秒值,[速度],function(){}); 以上效果都可以添加一个回调函数
jQuery遍历
方式一:jQuery的对象方法
格式:[ele0,ele1,ele2] jq对象.each(function([index],[dom对象]){ 对遍历到的每个元素进行操作 }) 写法: $("#city>li").each(function(index,ele){}) //index是被遍历到的索引, ele就是被遍历到的js对象
方式二:全局函数
格式: $.each(要遍历的对象,function([index],[dom对象]){}) • 1 • 2
方式三:新特性:
格式:for of for(var 变量 of 被遍历的对象){}
jQuery的事件和事件源的绑定
派发事件: jq对象.事件名称(function(){}) jQuery的事件绑定与解绑 on绑定事件 jQuery对象.on("事件名称",function(){}) off解绑事件 jQuery对象.off("事件名称")//如果不给名称则解绑当前对象上的所有事件
事件切换
hover:相当于给一个元素添加了mouseover和mouseout两个事件 jq元素对象.hover(function(){ //第一个函数相当于mouseover },function(){ //第二个函数相当于mouseout })
案例
案例一:定时弹出广告 需求分析: 页面加载成功5秒后,弹出一个广告,广告时间3秒钟,3秒后消失 技术分析: 页面加载成功事件: $(function(){}) 定时器: setTimeout(函数名,5000) 效果: show(); hide(); 步骤分析: 1:确定事件 页面加载成功事件 $(function(){ //设置一个单次执行定时器 setTimeout(showAd,5000); }) 2:编写showAd函数 function showAd(){ //a.展示广告 //让存放广告的div展示 //b.设置单词执行定时器计时 setTimeout(hideAd,3000) } 3:编写hideAd函数 function hideAd(){ //a.隐藏广告 //让存放广告的div隐藏 }
案例一代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时弹出广告</title> <style> #content{width:100%;height:300px;background:#999} </style> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script> $(function () { //页面加载成功5秒后,弹出一个广告,广告时间3秒钟,3秒后消失 setTimeout(showAd, 5000); }); //展示广告 function showAd() { $("#ad").show(); setTimeout(hideAd,3000) } //隐藏广告 function hideAd() { $("#ad").hide(); } </script> </head> <body> <div id="ad" style="display: none"> <img src="../img/ad.jpg" style="width: 100%"> </div> <div id="content"> 正文部分 </div> </body> </html>
案例二:抽奖小程序 需求分析: 1:当页面加载成功后,让点击停止按钮失效,点击开始按钮生效 2:当点击开始按钮时, 让点击开始按钮失效,让点击停止按钮生效.小图片轮播 3:当点击停止按钮时, 让点击停止按钮失效,让点击开始按钮生效. 让轮播图停止轮播,让选中的图片2秒展示到大图区域
案例二代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖小程序</title> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script language='javascript' type='text/javascript'> //准备一个一维数组，装用户的像片路径 var imgs = [ "../img/scenery/1.jpg","../img/scenery/2.jpg","../img/scenery/3.jpg", "../img/scenery/4.jpg","../img/scenery/5.jpg","../img/scenery/6.jpg", "../img/scenery/7.jpg","../img/scenery/8.jpg","../img/scenery/9.jpg", "../img/scenery/10.jpg","../img/scenery/11.jpg","../img/scenery/12.jpg", "../img/scenery/13.jpg","../img/scenery/14.jpg","../img/scenery/15.jpg", "../img/scenery/16.jpg","../img/scenery/17.jpg","../img/scenery/18.jpg", "../img/scenery/19.jpg","../img/scenery/20.jpg","../img/scenery/21.jpg", ]; </script> <script> $(function () { //1:当页面加载成功后,让点击停止按钮失效,点击开始按钮生效 $("#stopID").attr("disabled", true); }); //2:当点击开始按钮时, // 让点击开始按钮失效,让点击停止按钮生效.小图片轮播 function imgStart() { $("#startID").attr("disabled", true); $("#stopID").attr("disabled", false); intervalId=setInterval(showImg, 500); } //3:当点击停止按钮时, // 让点击停止按钮失效,让点击开始按钮生效. // 让轮播图停止轮播,让选中的图片2秒展示到大图区域 function imgStop() { $("#startID").attr("disabled", false); $("#stopID").attr("disabled", true); clearInterval(intervalId); showBigImg(); } var i = 0; function showImg() { $("#img1ID").attr("src",imgs[i]); i++; if(i==imgs.length) { i = 0; } } function showBigImg() { $("#img2ID").attr("src",imgs[--i]); } </script> </head> <body> <!-- 小像框 --> <div style="border-style:dotted;width:50px;height:50px"> <img id="img1ID" src="" style="width:50px;height:50px"/> </div> <!-- 大像框 --> <div style="border-style:double;width:700px;height:500px;position:absolute;left:500px;top:10px"> <img id="img2ID" src="" style="width:700px;height:500px"/> </div> <!-- 开始按钮 --> <input onclick="imgStart()" id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px" > <!-- 停止按钮 --> <input onclick="imgStop()" id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px" > </body> </html>
jQuery插件
插件:实现了指定功能的代码片段
jq对象.text()等等都是jq为我们定义好的方法.而我们可以模仿jq方法定义我们自己的方法 也就是插件扩展机制
插件扩展机制(两种:jQuery对象进行方法扩展,jQuery全局进行方法扩展)
注意:在extend使用中this代表的是掉用者的jQuery对象
jQuery插件机制概述: jQuery插件的机制很简单,就是利用jQuery提供的 jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery功能 jQuery插件机制语法 jQuery.fn.extend(object) 对jQuery对象进行方法扩展
1:jQuery对象进行方法扩展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插件机制</title> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script> jQuery.fn.extend({ "checkAll":function () { //extend使用中this代表调用者的jQuery对象在这里也就是 $("input[type='checkbox']") $.each(this,function (index,ele) { ele.checked = true; }) } }); jQuery.fn.extend({ "uncheckFn":function () { //extend使用中this代表调用者的jQuery对象在这里也就是 $("input[type='checkbox']") this.each(function (index,ele) { ele.checked = false; }) } }) function checkFn() { $("input[type='checkbox']").checkAll(); } function uncheckFn() { $("input[type='checkbox']").uncheckFn(); } </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>
2:jQuery全局进行方法扩展
jQuery.extend({ "min":function(i,j){ return i>j ? j:i; } "max":function(i,j){ return i>j ? i:j; } })
validate插件
作用:对表单进行校验. 下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip 使用方式: 导入jquery.js validate是基于jquery写的,所以要先导入jquery的js文件 在导入validate.js 想要使用别人的插件必须导入人家已经写好的js文件 在页面加载成功后,要确定页面上的那个表单进行校验 $(function(){ 表单对象.validate(): }) validate使用格式: 表单对象.validate({ rules:{//校验规则 //需要校验那个输入框就是用其name的值 }, messages:{}//不满足规则时的提示信息 }) 自定义校验器: 格式: $.validator.addMethod(name,function(val,ele,param){},"message"); val:输入框的值 ele:被校验的输入框的对象(js对象) param:校验器的值(true,false) message:提示信息 需要有返回值,默认为false
常见的校验规则
| 校验器名称 | 值 | 描述 |
| required | true|false | 必须填写 |
| number | true|false | 只能输入数字 |
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
| range | [min,max] | 取值范围 |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| rangelength | [minlength,maxlength] | 长度范围 |
| equalTo | 通过jQuery选择器选中指定元素对象 | 和谁相等(重复密码) |
| “email” | 校验邮箱 | |
| date | true | 校验日期 |
| dateISO | true | 校验日期格式xxxx-xx-xx xxxx/xx/xx |
案例:
<!DOCTYPE html> <!--suppress XmlInvalidId --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的jquery表单校验页面</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> <!-- 1.导入jq的js文件 --> <script src="../js/jquery-3.3.1.js"></script> <!-- 2.导入validate的js文件 --> <script src="../js/jquery.validate.min.js"></script> <script src="../js/messages_zh.js"></script> <!-- 3.在页面加载成功后,锁定被校验的表单对象 --> <script> $(function () { // 锁定被校验的表单对象 $("#empForm").validate({ rules:{ // 校验规则 // 需要校验哪个输入框就使用那个输入框name属性的值 realname:"required", // 单一校验规则 username:{ required:true, // 校验不可为空 rangelength:[5,10] // 校验长度 }, psw:{ required:true, number:true }, psw2:{ equalTo:$("#psw") }, gender:{ required:true }, age:{ required:true, range:[26,50] }, edu:{ required:true }, birthday:{ required:true, dateISO:true, date:true }, email:{ required:true, email:"email" }, card:{ required:true, cardLength:true } }, messages:{ // 当不满足规则时的提示信息 realname:"真实姓名不可为空.", username:{ required:"用户名不可为空", // 校验不可为空 rangelength:"长度在{0}到{1}位之间" // 校验长度 }, card:{ cardLength:"身份证号长度只能是15或18位" } } }); }); // 自定义校验器 $.validator.addMethod( "cardLength", // 校验器的名称 // val: 被校验的输入框中的内容 // ele: 被校验的输入框对象(js对象) // params: 是否需要校验(校验器的值) function (val,ele,params) { // 在该函数中完成校验,需要返回校验结果 boolean // 默认返回false if(params){ // 需要校验 if(val.length==15 || val.length==18){ return true; } } }, "默认: 身份证号长度不合法" // 当不满足校验规则时的默认提示信息 ); </script> </head> <body> <p>员工信息录入</p> <form name="empForm" id="empForm" method="get" 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 class="error" for="gender" 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 class="error" for="checkbox1" 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="card" name="card" /></td> </tr> <tr> <td></td> <td><input type="submit" name="firstname" id="firstname" value="保存"></td> </tr> </table> </form> </body> </html>
总结:
DOM: 效果: 基本效果: hide show toggle 滑入滑出: slideUp,slideDown,slideToggle 淡入淡出: fadeIn,fadeOut,fadeToggle 遍历: jq对象.each(function(index,ele){}) $.each(被遍历的对象,function(index,ele){}) for of for( var 变量名 of 被遍历的对象){} 事件总结: 派发事件: jq对象.事件方法(function(){}) 绑定事件: jq对象.on("事件名称",function(){}) 解绑事件: jq对象.off("事件名称")//不给事件名称则解绑此对象上的所有事件 事件切换: jq对象.hover(function(){},function(){})//第一个fn为悬停事件方法,第二个为移出事件方法 插件: 插件扩展机制: jq对象的方法: jq对象.fn.extend("函数名称":function(){ //这里的this代表jq对象 }) 全局方法: $.extend(function(){}) validate插件: 作用:表单的检验 使用步骤: 1:导入jq的js文件 2:导入validate的js文件 3.编写页面加载成功事件 表单对象.validate({ rules:{ name属性的值:"校验器" name属性的值:{ 校验器:值, 校验器:值 } } messages:{ name属性的值:"提示信息" name属性的值:{ 校验器:提示信息, 校验器:提示信息 } } }) 自定义校验器: $.validator.addMethod("校验器名":function(val,ele,param){ //返回值true和false(默认) },"提示信息")
