2018-07-11 第六十六天 jQuery
一、jQuery中的事件 1.绑定事件 方法1:click()、mousemove()、mouseout()、mouseover(); 方法2:bind() 对后来加入的无效; live()对后来加入的也有效 在jQuery1.7及之前的版本中使用, 1.9版本中淘汰了; one()一次事件绑定; trigger()在每一个匹配的元素上触发某类事件。 2.解除绑定unbind(): 不传参表示解除所有事件, 传参表示解除指定的事件 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <!--网络加载jquery.js--> <scriptsrc="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.js"type="text/javascript"charset="utf-8"></script> <scripttype="text/javascript"> /*等价于js中的onload*/ //$(document).ready(function() {}) //$(function() {}) //jQuery(function() {}) $(function() { /*事件的绑定*/ $("#bu1").click(function() { alert("单击事件的绑定"); }) $("#bu1").dblclick(function() { alert("双击事件的绑定"); }) /******bind事件的绑定*********/ $("#bu2").bind('click',function() { alert("单击事件的绑定"); }) /*绑定多个事件*/ $("#bu2").bind({ 'click':function() {}, dblclick:function() {}, blur:function() {} }) /****one事件的绑定***********/ $("#bu3").one("click",function() { alert("单击一次执行效果"); }) /*******trigger事件的使用**************/ $("#bu4").click(function() { $("#bu1").trigger("click"); $("#bu3").trigger("click"); }) $("#bu5").click(function() { //解绑所有绑定事件 $("#bu1").unbind(); //解绑单个的事件 $("#bu1").unbind("click"); }) /***********live方法介绍********************/ $(".bb").click(function() { alert("live事件的添加"); }) $(".bb").bind('click',function() { alert("live事件的添加"); }) $(".bb").live('click',function() { alert("live事件的添加"); }) $("body").append("<input type='button' value='live事件' class='bb' />") }) </script> </head> <body> <inputtype="button"name="bu1"id="bu1"class="bb"value="单击事件的绑定"/> <inputtype="button"name="bu2"id="bu2"value="bind事件的绑定"/> <inputtype="button"name="bu3"id="bu3"value="one事件的绑定"/> <inputtype="button"name="bu4"id="bu4"value="trigger事件的绑定"/> <inputtype="button"name="bu4"id="bu5"value="事件的解绑"/> </body> </html> 二、jQuery中的动画 1.显示隐藏:show()--hide(),改变width、height、opacity; 2.淡入淡出:fadeIn()--fadeOut(),改变opacity ; 3.滑入滑出:slideDown()--slideUp(),改变height(对于img同时改变height和width); 4.隐藏的显示/显示的隐藏:toggle()。 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <scripttype="text/javascript"src="js/jquery-1.12.3.min.js"></script> <scripttype="text/javascript"> $(function() { $("#bu1").click(function() { //获得div对象 vardiv1=$("#div1"); /*隐藏的效果*/ div1.hide(3000); div1.show(3000); //显示的隐藏-- 隐藏的显示 $("div").toggle(3000); //滑动上 div1.slideUp(3000); //滑动下 div1.slideDown(3000); //淡出 div1.fadeOut(3000); //淡入 div1.fadeIn(3000); }) }) </script> <style> #div1{ height:300px; background-color:red; } #div2{ height:300px; background-color:gold; } </style> </head> <body> <inputtype="button"name="bu1"id="bu1"value="动画的测试"/> <divid="div1"></div> <divid="div2"></div> </body> </html> 三、jQuery实现表单校验 1.为什么要进行表单验证:保证数据符合要求。 2.为什么要进行JavaScript或者jQuery表单验证:降低服务器端负担。 3.还可以进行服务器验证(JSP) 4.正则表达式 推荐两篇文章: https://www.jb51.net/article/72044.htm https://www.jb51.net/article/76901.htm (1)为什么使用正则表达式:简洁的代码、严谨的验证文本框中的内容。 (2)正则表达式举例: 匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7}; 匹配腾讯QQ号:[1-9][0-9]{4,}; 匹配中国邮政编码:\d{6}; 匹配身份证:\d{15}|\d{18}; 匹配由数字和26个英文字母组成的字符串^[A-Za-z0-9]+$; 匹配Email地址:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*; 匹配中文字符的正则表达式:[\u4e00-\u9fa5]。 (3)什么是正则表达式: Regular Expression,在代码中常简写为regex。 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。 在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。 (4)如何创建正则表达式: var reg=/china/; var reg=new RegExp(" china "); var reg=/^\w+$/; var reg=new RegExp("^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$"; (5)正则表达式中常用的符号和用法: (6)正则表达式的重复字符: <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <scriptsrc="js/jquery-1.12.3.min.js"type="text/javascript"charset="utf-8"></script> <script> /*****验证码产生****************/ functionyzm() { varran=Math.floor(Math.random()*9000+1000); //document.getElementById("yzm1").innerHTML=ran; varspan=document.getElementById("yzm2"); span.innerHTML=ran; } $(function() { /*********姓名的校验**************/ $("#uname").blur(function() { //姓名的正则表达式 2-4位的汉字 varreg=/^[\u4e00-\u9fa5]{2,4}$/; checkData("uname", reg); }) /**********密码的校验****************/ $("#pwd").blur(function() { varreg=/^\d{4,6}$/; checkData("pwd", reg); }) /**********邮箱的校验****************/ $("#email").blur(function() { //邮箱的正则表达式 varreg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; checkData("email", reg); }) /**********手机的校验****************/ $("#phone").blur(function() { varreg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; checkData("phone", reg); }) /**********提取公共的方法***************/ functioncheckData(id,reg) { //获得用户名的值 varus=$("#"+id); //获得span对象 varspan=$("#span_"+id); if(us.val()==""||us.val()==null) { span.html("× "+us.attr("alt")+"不能为空").css("color","red").addClass("error"); }else if(reg.test(us.val())) { //符合要求的格式 span.html("√ "+us.attr("alt")+"合法").css("color","green").removeClass(); }else{ span.html("× "+us.attr("alt")+"不合法").css("color","red").addClass("error"); } } /********爱好的校验***************/ $("input[name=fav]").click(function() { varche=$("input[name=fav]:checked"); if(che.length>0) { $("#span_fav").html("爱好选择成功").css("color","green").removeClass(); }else{ $("#span_fav").html("请选择爱好").css("color","red").addClass("error"); } }) /********籍贯的选择***************/ $("#sel").change(function() { varval=$("#sel").val(); if(val=="0") { $("#span_sel").html("请选择籍贯").css("color","red").addClass("error"); }else{ $("#span_sel").html("籍贯选择成功").css("color","green").removeClass(); } }) /********验证码的校验**************/ $("#yzm1").blur(function() { //[1]随机产生的验证码 varyz=$("#yzm2").html(); //[2]输入的值 varyz2=$("#yzm1").val(); if(yz==yz2) { $("#yzm3").html("验证码输入正确").css("color","green").removeClass(); }else{ $("#yzm3").html("验证码输入错误").css("color","red").addClass("error"); } }) /******同意协议*********/ $("#check").click(function() { varflag=$("#check").prop("checked"); /*if(flag){ $("#sub").prop("disabled",false); }else { $("#sub").prop("disabled",true); }*/ $("#sub").prop("disabled",!flag); }) /******校验表单的提交***********/ $("form").submit(function() { $("#uname").trigger("blur"); $("#pwd").trigger("blur"); $("#email").trigger("blur"); $("#phone").trigger("blur"); /*执行两次*/ $("input[name=fav]").trigger("click"); $("input[name=fav]").trigger("click"); varerr=$(".error"); if(err.length>0) { returnfalse; }else{ returntrue; } }) }) </script> <!-- 正则表达式学习 ^:开始 数字:[0-9] $:结束 \d:代表[0-9] \w [0-9][A-Z][a-z]以及下划线 {n}:段域 ^[0-9]{7}$ ^[0-9]{4,7}$ ^\w{5}$ 快速去除字符串操作 var a="abcdefg"; var jj=/[b|c]/ while(jj.test(a)){ a= a.replace(jj,""); } alert(a); --> </head> <bodyonload="yzm()"> <center> <h3>注册页面</h3> <hr/> <formaction=""method="get"> <table> <trheight="35px"> <tdwidth="150px">用户名:</td> <tdwidth="400px"> <inputtype="text"name="uname"id="uname"value="张三三"alt="用户名"/> <spanid="span_uname"></span> </td> </tr> <trheight="35px"> <td>密码:</td> <td> <inputtype="password"name="pwd"id="pwd"value="123456"alt="密码"/> <spanid="span_pwd"></span> </td> </tr> <trheight="35px"> <td>手机号:</td> <td> <inputtype="text"name="phone"id="phone"value="18231932733"alt="手机号"/> <spanid="span_phone"></span> </td> </tr> <trheight="35px"> <td>邮箱:</td> <td> <inputtype="text"name="mail"id="email"value="2767501426@qq.com"alt="邮箱"/> <spanid="span_email"></span> </td> </tr> <trheight="35px"> <td>性别:</td> <td> 男:<inputtype="radio"name="sex"value="1"/> 女: <inputtype="radio"name="sex"value="0"/> </td> </tr> <trheight="35px"> <td>爱好:</td> <td> <inputtype="checkbox"name="fav"value="1"/>唱歌 <inputtype="checkbox"name="fav"value="2"/>睡觉 <inputtype="checkbox"name="fav"value="3"/>LOL<br/> <inputtype="checkbox"name="fav"value="4"/>旅游 <inputtype="checkbox"name="fav"value="5"/>高尔夫 <inputtype="checkbox"name="fav"value="6"/>篮球 <spanid="span_fav"></span> </td> </tr> <trheight="35px"> <td>籍贯:</td> <td> <selectname="adress"id="sel"> <optionvalue="0">--请选择--</option> <optionvalue="1">安徽</option> <optionvalue="2">北京</option> <optionvalue="3">上海</option> <optionvalue="4">山东</option> <optionvalue="5">天津</option> </select> <spanid="span_sel"></span> </td> </tr> <trheight="35px"> <td>验证码:</td> <td> <inputtype="text"style="width:100px;height:60px;"id="yzm1"/> <spanid="yzm2"onclick="yzm()"></span> <spanid="yzm3"></span> </td> </tr> <trheight="35px"> <td>个人介绍:</td> <td> <textareaname="intro"rows="8"cols="30"></textarea> </td> </tr> <trheight="35px"> <tdcolspan="2"align="center"> <inputtype="checkbox"name=""id="check"value="">是否同一本公司协议 </td> </tr> <trheight="35px"> <tdcolspan="2"align="center"> <inputtype="submit"id="sub"value="注册"disabled="true"/> </td> </tr> </table> </form> </center> </body> </html> 四、jQuery实现树形菜单 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>树形菜单-1</title> <scripttype="text/javascript"src="js/jquery-1.12.3.min.js"></script> <styletype="text/css"> div{ font-size:12px; color:#000000; line-height:22px; } img{ vertical-align:middle; } a{ font-size:13px; color:#000000; text-decoration:none; } a:hover{ font-size:13px; color:#999999 } .red{ color:#FF0000 } </style> <scripttype="text/javascript"> $(function() { $(".fir").click(function() { //parent() 获得父节点对象 next() 得到下一个节点 vardis=$(this).parent().next().css("display"); if(dis=="none") { $(this).parent().next().css("display","block"); children() 获得子节点 $(this).children().attr("src","img/minus.gif"); }else{ $(this).parent().next().css("display","none"); find() 查找到指定的节点 $(this).find("img").attr("src","img/plus.gif"); } }) }) </script> </head> <body> <divid="div1"style="padding-left:100px;"> <div> <ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a> </div> <divid="1"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS 系统 <BR><imgsrc="img/z-top.gif">共建水木 <BR><imgsrc="img/z-top.gif">站务公告栏 <BR><imgsrc="img/z-top.gif">妆点水木 <BR><imgsrc="img/z-end.gif">申请版主 </div> <div> <ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a> </div> <divid="2"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS 系统 <BR><imgsrc="img/z-top.gif">共建水木 <BR><imgsrc="img/z-top.gif">站务公告栏 <BR><imgsrc="img/z-top.gif">妆点水木 <BR><imgsrc="img/z-end.gif">申请版主 </div> <div> <ahref="javascript:void(0)"class="fir"><imgsrc="img/plus.gif"border="0">分类讨论区</a> </div> <divid="3"style="display:none;padding-left:15px;"><imgsrc="img/z-top.gif">BBS 系统 <BR><imgsrc="img/z-top.gif">共建水木 <BR><imgsrc="img/z-top.gif">站务公告栏 <BR><imgsrc="img/z-top.gif">妆点水木 <BR><imgsrc="img/z-end.gif">申请版主 </div> </div> </body> </html> 五、Query中的框架--图片放大器插件 https://www.oschina.net/p/jqzoom 官方网址:https://jquery-plugins.net/jqzoom jQZoom是一个基于最流行的jQuery的图片放大器插件。它功能强大,使用简便。 支持标准模式、反转模式、无镜头、无标题的放大,并可以自定义jQZoom的窗口位置和渐隐效果,修正IE6的select bug。 配置参数 · zoomType,默认值:’standard’,另一个值是’reverse’,是否将原图用半透明图层遮盖。 · zoomWidth,默认值:200,放大窗口的宽度。 · zoomHeight,默认值:200,放大窗口的高度。 · xOffset,默认值:10,放大窗口相对于原图的x轴偏移值,可以为负。 · yOffset,默认值:0,放大窗口相对于原图的y轴偏移值,可以为负。 · position,默认值:’right’,放大窗口的位置,值还可以是:’right’,’left’,’top’,’bottom’。 · lens,默认值:true,若为false,则不在原图上显示镜头。 · imageOpacity,默认值:0.2,当zoomType的值为’reverse’时,这个参数用于指定遮罩的透明度。 · title,默认值:true,在放大窗口中显示标题,值可以为a标记的title值,若无,则为原图的title值。 · showEffect,默认值:’show’,显示放大窗口时的效果,值可以为: ‘show’,’fadein’。 · hideEffect,默认值:’hide’,隐藏放大窗口时的效果: ‘hide’,’fadeout’。 · fadeinSpeed,默认值:’fast’,放大窗口的渐显速度(选项: ‘fast’,'slow’,'medium’)。 · fadeoutSpeed,默认值:’slow’,放大窗口的渐隐速度(选项: ‘fast’,'slow’,'medium’)。 · showPreload,默认值:true,是否显示加载提示Loading zoom(选项: ‘true’,'false’)。 · preloadText,默认值:’Loading zoom’,自定义加载提示文本。 · preloadPosition,默认值:’center’,加载提示的位置,值也可以为’bycss’,以通过css指定位置。