2018-07-11 第六十六天 jQuery
一、jQuery中的事件
1. 绑定事件
方法1：click()、mousemove()、mouseout()、mouseover()；
方法2：bind() 对后来加入的无效；
live() 对后来加入的也有效 在jQuery1.7及之前的版本中使用, 1.9版本中淘汰了；
one() 一次事件绑定；
trigger() 在每一个匹配的元素上触发某类事件。
2. 解除绑定unbind()：
不传参表示解除所有事件,
传参表示解除指定的事件
<!DOCTYPE html>
<html>
<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>
二、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>
三、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>
四、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>
五、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指定位置。
