jQuery思维导图梳理2-创新互联
jQuery-Dom操作
jQuery效果:
基本:高和宽都变化
hide([毫秒值]):隐藏
show([毫秒值]):显示
toggle([毫秒值]):切换
滑入滑出:高变化
slideUp([毫秒值]):滑出
slideDown([毫秒值]):滑入
slideToggle([毫秒值]);切换
淡入淡出:
fadeIn([毫秒值]);淡入
fadeOut([毫秒值]);淡出
fadeToggle([毫秒值]);切换
了解:
fadeToggle(毫秒值,[速度],function(){});
以上效果都可以添加一个回调函数
jQuery遍历
方式1:jQuery的对象方法
格式: [ele0,ele1,ele2] $("tr")jq对象.each(function([index],[dom对象]){ 对遍历到每个元素的操作 });
方式2:全局函数
格式:$.each(要遍历的对象,function([index],[dom对象]){});
方式3: 新特性
格式: for of
for(var 变量 of 被遍历的对象){}
jQuery的事件总结
常见事件
页面加载成功事件★
$(function(){})
$(document).ready(function(){})
submit 表单提交事件★
focus 获得焦点事件 ★
blur 失去焦点 ★
change 改变 ★
click 单击 ★
dblclick 双击
keydown 键盘按下
keyup 键盘弹起
keypress 按住
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标移入
mouseout 鼠标移出
mouseover 鼠标悬停
事件和事件源的绑定 ★
派发事件
jq对象.事件名称(function(){});
jQuery的事件绑定与解绑
jQuery对象.off("事件名称")如果不给名称,解绑所有
jQuery对象.on("事件名称",function(){})
on绑定事件
off解绑事件
事件切换
hover:相当于给一个元素添加了mouseover和mouseout两个事件jq元素对象.hover(function(){ //第一个函数相当于mouseover},function(){ //第二个函数相当于mouseout});
jQuery插件
插件: 实现了指定功能的代码片段
jq对象.text()
val()
html()
以上方法都是jq为我们实现定义好的,我们直接使用即可.
我们可以模仿jq,定义我们自己的方法
插件机制
jQuery插件机制概述
jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能.
jQuery插件机制语法
jQuery.fn.extend(object) 对jQuery对象进行方法扩展
jQuery.fn.extend({
"check":function(){
return this.each(function (index,ele) {
ele.checked = true;
});
},
"自定义方法名称":function () {
// 处理对象的逻辑
return this.each(function (index,ele) {
ele.checked = false;
});
}
});
jQuery.extend(object) 对jQuery全局进行方法扩展
jQuery.extend({
"min":function (i,j) {
return i>j?j:i;
},
"max":function (i,j) {
return i>j?i:j;
}
});
validate插件
插件:指的就是别人已经写好的功能代码,直接引入使用即可.
作用:对表单进行校验
下载: 下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
使用方式:
方式1:name属性的值:"提示信息"
方式2: name属性的值:{ 校验器1:"提示信息1", 校验器2:"提示信息2" }
方式1:单一校验name属性的值:"校验器"
方式2:多个校验 name属性的值:{ 校验器1:值1, 校验器2:值2 }
1.导入jquery.jsvalidate是基于jquery写的,所以要先导入jquery的js文件
2.再导入validate.js想要使用别人的插件就必须的导入人家已经写好的js文件(插件)
3.在页面加载成功后,要确定对页面上的哪个表单进行校验 $(function(){ 表单对象.validate(); });
4.validate使用格式: 表单对象.validate({ rules:{}, //校验规则 messages:{} //提示信息 });
5.常见的校验规则
校验器名称 值 描述 required true|false 必须填写 number true|false 只能输入数字 min 数字 最小值 max 数字 大值 range [min,max] 取值范围 minlength 数字 最小长度 maxlength 数字 大长度 rangelength [minlength,maxlength] 长度范围 equalTo 通过jQuery选择器选中指定元素对象 和谁相等(重复密码) email "email" 校验邮箱 date true 校验日期 dateISO true 校验日期格式xxxx-xx-xx xxxx/xx/xx 6.rules校验器语法:
7.messages自定义提示信息语法:
自定义校验器
$.validator.addMethod(name,function(value,element,params){},"message");
参数说明:
value:用户输入的值
element:要校验的dom对象
params:校验器的值
name:校验器的名称,唯一
function:校验规则
message:当不满足校验规则时的提示信息
格式:
// 自定义校验器
// 格式:
$.validator.addMethod(name,function(val,ele,param){},"message");
name: 自定义校验器的名称
function: 完成校验的逻辑,满足返回true,不满足返回false(默认)
val: 输入框中的值
ele: 被校验的输入框对象(js对象)
param: 校验器的值
message: 提示信息
案例
案例1-定时弹出广告
需求分析:
页面加载成功5秒后,弹出一个广告,广告事件3秒钟,3秒后广告消失.
技术分析:
页面加载成功事件:
$(function(){});
定时器:
setTimeout(函数名,5000);
效果:
show()
hide()
步骤分析:
1.确定事件
页面加载成功事件
$(function(){
// 设置一个单次执行定时器
setTimeout(showAd,5000);
});
2.编写showAd函数
function showAd(){
//a.展示广告
// 让存放广告的div显示
//b.设置单次执行定时器计时
setTimeout(hideAd,3000);
}
3.编写hideAd函数
function showAd(){
// 隐藏广告div
}
案例2-抽奖小程序
需求分析:
当页面加载成功后,让"点击停止"按钮失效,"点击开始"按钮有效.
当点击"点击开始"按钮时
让"点击开始"按钮失效,让"点击停止"按钮生效
小图片开始轮播
当点击"点击停止"按钮时
让"点击停止"按钮失效,让"点击开始"按钮生效
让轮播图停止轮播
让选中的小图2秒后展示到大图区域.
技术分析:
页面加载成功事件
操作标签的属性: disabled
周期执行定时器:
var interId = setInterval(函数,毫秒值);
clearInterval(interId);
步骤分析:
1.当页面加载成功后,让"点击停止"按钮失效,"点击开始"按钮有效.
2.当点击"点击开始"按钮时
让"点击开始"按钮失效,让"点击停止"按钮生效
小图片开始轮播
3.当点击"点击停止"按钮时
让"点击停止"按钮失效,让"点击开始"按钮生效
让轮播图停止轮播
让选中的小图2秒后展示到大图区域.
总结:
DOM:
效果:
基本效果:
hide show toggle
滑入滑出:
slideUp slideDown slideToggle
淡入淡出:
fadeIn fadeOut fadeToggle
遍历:
jq对象.each(function(index,ele){});
$.each(被遍历的对象,function(index,ele){});
for of
for(var 变量 of 被遍历的对象){}
事件总结:
派发事件:
jq对象.事件方法(function(){})
绑定事件:
jq对象.on("事件名",function(){});
解绑事件:
jq对象.off("事件名");
如果不给值,那么会解绑所有事件
事件切换:
jq对象.hover(function(){},function(){});
插件:
插件扩展机制:
jq对象的方法:
$.fn.extend({
"函数名":function(){
// 如果在这里使用 this ,this代表的是jq对象
},
"函数名":function(){
// 如果在这里使用 this ,this代表的是jq对象
}
});
全局方法:
$.extend({
"函数名":function(i,j){
return 值;
},
"函数名":function(){
}
});
validate插件:
使用步骤:
1.导入jq的js文件
2.导入validate的js文件
3.在页面加载成功后,锁定被校验的表单对象
表单对象.validate({
//4.校验规则
rules:{
name属性的值:"校验器",
name属性的值:{
校验器:值,
校验器:值
}
},
//5.提示信息
messages:{
name属性的值:"提示信息",
name属性的值:{
校验器:提示信息,
校验器:提示信息
}
}
});
自定义校验器:
$.validator.addMethod("校验器名称",function(val,ele,params){
返回值 boolean值
},"默认提示信息");
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：jQuery思维导图梳理2-创新互联
文章路径：http://ybzwz.com/article/dsidgo.html
