2018-07-11 第六十六天 jQuery

一、jQuery中的事件

1. 绑定事件

方法1click()mousemove()mouseout()mouseover()

方法2bind()  对后来加入的无效;

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(),改变widthheightopacity ;

2.淡入淡出:fadeIn()--fadeOut(),改变opacity

3.滑入滑出:slideDown()--slideUp(),改变height(对于img同时改变heightwidth);

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指定位置。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值