网站 建设文档,网站建设要如何选择,手机网站建设 技术规范,营销品牌策划公司一、jQuery的事件
1.1常用事件
jQuery绑定事件#xff0c;事件名字没有on。
事件名称事件说明blur事件源失去焦点click单击事件源change内容改变keydown接受键盘上的所有键(键盘按下)keypress接受键盘上的部分键#xff08;ctrl,alt,shift等无效#xff09;(键盘按下)key…一、jQuery的事件
1.1常用事件
jQuery绑定事件事件名字没有on。
事件名称事件说明blur事件源失去焦点click单击事件源change内容改变keydown接受键盘上的所有键(键盘按下)keypress接受键盘上的部分键ctrl,alt,shift等无效(键盘按下)keyup键盘抬起mouseover鼠标悬停(鼠标移入)mouseout鼠标离开
1.2 on绑定事件 语法
jQuery元素对象.on(事件名称,function(){//逻辑代码
})
其中事件名称是jQuery的事件方法的方法名称例如click、mouseover、mouseout、focus、blur等 代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript srcjs/jquery-3.3.1.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function(){/*$(#btn).on(click,function(){alert(按钮被点击了!);});*/$(#btn).click(function(){alert(按钮被点击了!);});});/script/headbodyinput idbtn typebutton value使用on绑定点击事件/body
/html 代码效果 1.3 off解绑事件 语法
jQuery元素对象.off(事件名称);
其中参数事件名称如果省略不写可以解绑该jQuery对象上的所有事件
代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function(){$(#btn-on).on(click,function(){alert(使用on绑定点击事件);});$(#btn-off).click(function(){$(#btn-on).off(click);});});/script/headbodyinput idbtn-on typebutton value使用on绑定点击事件input idbtn-off typebutton value使用off解绑点击事件/body
/html
代码效果 1.4 事件切换
普通写法 代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function(){$(#myDiv).mouseover(function(){$(this).css(background,green);});$(#myDiv).mouseout(function(){$(this).css(background,red);});});/script/headbodydiv idmyDiv stylewidth:300px;height:300px;background:red鼠标移入变成绿色移出回复红色/div/body
/html 效果 链式写法 代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function(){$(#myDiv).mouseover(function(){$(this).css(background,green);}).mouseout(function(){$(this).css(background,red);});});/script/headbodydiv idmyDiv stylewidth:300px;height:300px;background:red鼠标移入变成绿色移出回复红色/div/body
/html 效果 切换函数写法 语法
hover([over,]out)其中over代表鼠标移入事件触发的函数out代表鼠标移出事件触发的函数。 代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript src../js/jquery-3.3.1.min.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function(){$(#myDiv).hover(function(){$(this).css(background,green);},function(){$(this).css(background,red);});});/script/headbodydiv idmyDiv stylewidth:300px;height:300px;background:red鼠标移入变成绿色移出回复红色/div/body
/html 效果 二、jQuery的插件
2.1jQuery的插件机制
jQuery插件机制概述
jQuery插件的机制很简单就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法扩展jQuery的功能。
jQuery插件机制语法
语法解释jQuery.fn.extend(object)对jQuery对象进行方法扩展jQuery.extend(object)对jQuery全局进行方法扩展
对jQuery对象进行方法扩展 代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript srcjquery-3.3.1.js typetext/javascript charsetutf-8/scriptscript typetext/javascript//普通方式--点击选中复选框function checkFn(){$(input[typecheckbox]).prop(checked,true);}//普通方式--点击取消复选框选中function uncheckFn(){$(input[typecheckbox]).prop(checked,false);}//对jQuery的函数进行扩展jQuery.fn.extend({//定义全选函数check:function(){$(:checkbox).prop(checked,true);},//定义全不全函数uncheck:function(){$(:checkbox).prop(checked,false);}});//插件方式--点击选中复选框function checkFn1(){//任何一个jQuery对象都可以调用$(#btn1-check).check();}//插件方式--点击选中复选框function uncheckFn2(){$(#btn-check).uncheck();}/script/headbodyinput idbtn-check typebutton value点击选中复选框 onclickcheckFn()input idbtn-uncheck typebutton value点击取消复选框选中 onclickuncheckFn()br/input typecheckbox valuefootball足球input typecheckbox valuebasketball篮球input typecheckbox valuevolleyball排球/body
/html
效果 对jQuery全局进行方法扩展 代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript srcjquery-3.3.1.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$.extend({//定义js对象的min属性值是一个函数返回a与b比较的最小值min: function(a, b) { return a b ? a : b; },//定义js对象的max属性值是一个函数返回a与b比较的最大值max: function(a, b) { return a b ? a : b; }});alert($.max(3,5));/script/headbody/body
/html 效果 2.2表单校验插件validator
表单校验插件概述
网络上有许多成熟的插件共使用者参考插件就是将jquery实现的常用操作进行封装封装后的“小框架“就可以叫做插件按照插件的语法去操作可以实现很多复杂的功能而我们需要做的是学会该插件的使用语法即可。表单校验插件是按照一定的语法编写代码可以使用简单的代码完成复杂的表单校验工作。
表单校验插件的基本语法
开发步骤 下载jquery-validation插件 将该插件也就是一个js文件导入到我们的工程中 在要使用校验插件的html中引入该js文件 编写表单校验的代码语法 $(form表单的选择器).validate({rules:{表单项name值:校验规则表单项name值:校验规则... ...},messages:{表单项name值:错误提示信息表单项name值:错误提示信息... ...}
}); 其中rules是对表单项校验的规则messages是对应的表单项校验失败后的错误提示信息。 注意当错误提示信息不按照我们预想的位置显示时我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置当此表单项验证不通过时会将此信息自动显示出来jQuery验证插件会自动帮助我们控制它的显示与隐藏。 lable forhtml元素name值 classerror styledisplay:none错误信息/lable 如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了。
常用的校验规则 表单校验插件自定义校验方法
如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则
自定义校验规则步骤如下 使用$.validator.addMethod(校验规则名称,function(value,element,params){}); 在rules中通过校验规则名称使用校验规则 在messages中定义该规则对应的错误提示信息其中 value是校验组件的value值 element是校验组件的节点对象 params是校验规则的参数
代码实现
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /title我的jquery表单校验页面/titlestyle typetext/cssp{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}/stylescript typetext/javascript srcjquery-3.3.1.js/scriptscript typetext/javascript srcjquery.validate.js/scriptscript typetext/javascript$(function(){//自定义校验规则/** 参数* 第一个 规则名称* 第二个 规则的实现逻辑 匿名函数*/$.validator.addMethod(cardlength,function(value,element,param){//校验输入的长度是否满足15或18if(value.trim().length!param[0]value.trim().length!param[1]){return false; //代表该校验器不通过 显示该校验规则对应的错误信息}return true;});$.validator.addMethod(card15,function(value,element,param){//校验15位的规则是否正确 --- 都是数字var regExp15 /^[0-9]{15}$/;if(value.trim().length15){//校验格式return regExp15.test(value.trim());}return true;//放行 不归该校验器校验 });$.validator.addMethod(card18,function(value,element,param){if(param){//校验15位的规则是否正确 --- 都是数字var regExp18 /^[0-9]{18}|[0-9]{17}X$/;if(value.trim().length18){//校验格式return regExp18.test(value.trim());}}return true;//放行 不归该校验器校验 });$(#empForm).validate({rules:{realname:required,username:{required:true,rangelength:[5,8]},psw:{required:true,minlength:6,maxlength:12},psw2:{required:true,minlength:6,maxlength:12,equalTo:#psw},gender:{required:true},age:{required:true,range:[26,50]},edu:{required:true},birthday:{required:true,dateISO:true,date:true},checkbox1:{required:true},email:{email:true},card:{required:true,cardlength:[15,18],card15:true,card18:true}},messages:{realname:真实姓名必须写,username:{required:用户名必须写,rangelength:长度在5-8之间},psw:{required:密码必须写,minlength:最小是6位,maxlength:最大是12位},psw2:{required:密码必须写,minlength:最小是6位,maxlength:最大是12位,equalTo:密码输入不一致},age:{required:年龄必须写,range:年龄必须在26-50之间},edu:{required:必须选择一个},birthday:{required:生日必须填写,dateISO:日期格式不正确,date:日期非法},email:{email:邮箱格式不正确},card:{required:身份证必须填写,cardlength:身份证长度是15或18位,card15:15位的身份证必须都是数字,card18:18位的身份证必须都是数字或末尾是X}}});});/script
/head
bodyp员工信息录入/pform nameempForm idempForm methodpost actiontest.htmltable border1trtd真实姓名(不能为空 ,没有其他要求)/tdtdinput typetext idrealname namerealname //td/trtrtd登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):/tdtdinput typetext idusername nameusername //td/trtr td密码(不能为空,长度6-12字符或数字,不能包含中文字符):/tdtdinput typepassword idpsw namepsw //td/trtr td重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):/tdtdinput typepassword idpsw2 namepsw2 //td/trtrtd性别(必选其一)/tdtdinput typeradio idgender_male valuem namegender/nbsp;男input typeradio idgender_female valuef namegender/nbsp;女label classerror forgender styledisplay: none;必须选择一个性别 /label/td/trtrtd年龄(必填26-50):/tdtdinput typetext idage nameage //td/trtr td你的学历:/tdtd select nameedu ideduoption value请选择你的学历/optionoption valuea专科/optionoption valueb本科/optionoption valuec研究生/optionoption valuee硕士/optionoption valued博士/option/select/td/trtr td出生日期(1982/09/21):/tdtdinput typetext idbirthday namebirthday value //td/trtr td兴趣爱好:/tdtd colspan2 input typecheckbox namecheckbox1 idqq1/nbsp;乒乓球 nbsp;input typecheckbox namecheckbox1 idqq2 value1 /nbsp;羽毛球 input typecheckbox namecheckbox1 idqq3 value2 /nbsp;上网input typecheckbox namecheckbox1 idqq4 value3 /nbsp;旅游input typecheckbox namecheckbox1 idqq5 value4 /nbsp;购物label classerror forcheckbox1 styledisplay: none;必须选一个/label/td/trtr td alignleft电子邮箱:/tdtdinput typetext idemail nameemail //td/trtr td alignleft身份证(15-18):/tdtdinput typetext idcard namecard //td/trtrtd/tdtdinput typesubmit namefirstname idfirstname value保存/td/tr/table
/form
/body
/html
代码效果
