1、jQuery中的事件javascript
- 绑定事件
方法1：click()、mousemove()、mouseout()、mouseover()；css
方法2：bind() 对后来加入的无效；html
live() 对后来加入的也有效 在jQuery1.7及以前的版本中使用, 1.9版本中淘汰了；java
one() 一次事件绑定；jquery
trigger() 在每个匹配的元素上触发某类事件。
- 解除绑定unbind()：
不传参表示解除全部事件,正则表达式
传参表示解除指定的事件服务器
<!DOCTYPE html>网络
<html>app
<head>框架
<meta charset="utf-8">
<title></title>
<!--网络加载jquery.js-->
<script src="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="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>
<input type="button" name="bu1" id="bu1" class="bb" value="单击事件的绑定" />
<input type="button" name="bu2" id="bu2" value="bind事件的绑定" />
<input type="button" name="bu3" id="bu3" value="one事件的绑定" />
<input type="button" name="bu4" id="bu4" value="trigger事件的绑定" />
<input type="button" name="bu4" id="bu5" value="事件的解绑" />
</body>
</html>
2、jQuery中的动画
1.显示隐藏：show()--hide()，改变width、height、opacity ；
2.淡入淡出：fadeIn()--fadeOut()，改变opacity ；
3.滑入滑出：slideDown()--slideUp()，改变height（对于img同时改变height和width）；
4.隐藏的显示/显示的隐藏：toggle()。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"> $(function() { $("#bu1").click(function() { //得到div对象 var div1 = $("#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>
<input type="button" name="bu1" id="bu1" value="动画的测试" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
3、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）正则表达式的重复字符：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script> /*****验证码产生****************/ function yzm() { var ran = Math.floor(Math.random() * 9000 + 1000); //document.getElementById("yzm1").innerHTML=ran; var span = document.getElementById("yzm2"); span.innerHTML = ran; } $(function() { /*********姓名的校验**************/ $("#uname").blur(function() { //姓名的正则表达式 2-4位的汉字 var reg = /^[\u4e00-\u9fa5]{2,4}$/; checkData("uname", reg); }) /**********密码的校验****************/ $("#pwd").blur(function() { var reg = /^\d{4,6}$/; checkData("pwd", reg); }) /**********邮箱的校验****************/ $("#email").blur(function() { //邮箱的正则表达式 var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; checkData("email", reg); }) /**********手机的校验****************/ $("#phone").blur(function() { var reg = /^(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); }) /**********提取公共的方法***************/ function checkData(id, reg) { //得到用户名的值 var us = $("#" + id); //得到span对象 var span = $("#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() { var che = $("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() { var val = $("#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]随机产生的验证码 var yz = $("#yzm2").html(); //[2]输入的值 var yz2 = $("#yzm1").val(); if(yz == yz2) { $("#yzm3").html("验证码输入正确").css("color", "green").removeClass(); } else { $("#yzm3").html("验证码输入错误").css("color", "red").addClass("error"); } }) /******赞成协议*********/ $("#check").click(function() { var flag = $("#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"); var err = $(".error"); if(err.length > 0) { return false; } else { return true; } }) }) </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>
<body onload="yzm()">
<center>
<h3>注册页面</h3>
<hr />
<form action="" method="get">
<table>
<tr height="35px">
<td width="150px">用户名：</td>
<td width="400px">
<input type="text" name="uname" id="uname" value="张三三" alt="用户名" />
<span id="span_uname"></span>
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password" name="pwd" id="pwd" value="123456" alt="密码" />
<span id="span_pwd"></span>
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text" name="phone" id="phone" value="18231932733" alt="手机号" />
<span id="span_phone"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text" name="mail" id="email" value="2767501426@qq.com" alt="邮箱" />
<span id="span_email"></span>
</td>
</tr>
<tr height="35px">
<td>性别：</td>
<td>
男：<input type="radio" name="sex" value="1" /> 女：
<input type="radio" name="sex" value="0" />
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
<input type="checkbox" name="fav" value="1" />唱歌
<input type="checkbox" name="fav" value="2" />睡觉
<input type="checkbox" name="fav" value="3" />LOL<br />
<input type="checkbox" name="fav" value="4" />旅游
<input type="checkbox" name="fav" value="5" />高尔夫
<input type="checkbox" name="fav" value="6" />篮球
<span id="span_fav"></span>
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="adress" id="sel">
<option value="0">--请选择--</option>
<option value="1">安徽</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">山东</option>
<option value="5">天津</option>
</select>
<span id="span_sel"></span>
</td>
</tr>
<tr height="35px">
<td>验证码：</td>
<td>
<input type="text" style="width: 100px; height: 60px;" id="yzm1" />
<span id="yzm2" onclick="yzm()"></span>
<span id="yzm3"></span>
</td>
</tr>
<tr height="35px">
<td>我的介绍：</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="">是否同一本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="注册" disabled="true" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
4、jQuery实现树形菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树形菜单－1</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
<style type="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>
<script type="text/javascript"> $(function() { $(".fir").click(function() { //parent() 得到父节点对象 next() 获得下一个节点 var dis = $(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>
<div id="div1" style="padding-left:100px;">
<div>
<a href="javascript:void(0)" class="fir"><img src="img/plus.gif" border="0">分类讨论区</a>
</div>
<div id="1" style="display: none; padding-left:15px;"><img src="img/z-top.gif">BBS 系统
<BR><img src="img/z-top.gif">共建水木
<BR><img src="img/z-top.gif">站务公告栏
<BR><img src="img/z-top.gif">妆点水木
<BR><img src="img/z-end.gif">申请版主
</div>
<div>
<a href="javascript:void(0)" class="fir"><img src="img/plus.gif" border="0">分类讨论区</a>
</div>
<div id="2" style="display: none; padding-left:15px;"><img src="img/z-top.gif">BBS 系统
<BR><img src="img/z-top.gif">共建水木
<BR><img src="img/z-top.gif">站务公告栏
<BR><img src="img/z-top.gif">妆点水木
<BR><img src="img/z-end.gif">申请版主
</div>
<div>
<a href="javascript:void(0)" class="fir"><img src="img/plus.gif" border="0">分类讨论区</a>
</div>
<div id="3" style="display: none; padding-left:15px;"><img src="img/z-top.gif">BBS 系统
<BR><img src="img/z-top.gif">共建水木
<BR><img src="img/z-top.gif">站务公告栏
<BR><img src="img/z-top.gif">妆点水木
<BR><img src="img/z-end.gif">申请版主
</div>
</div>
</body>
</html>
5、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指定位置。