jQuery思维导图梳理2-创新互联

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-创新互联
当前链接：https://www.cdcxhl.com/article10/dsidgo.html

成都网站建设公司_创新互联，为您提供云服务器、外贸建站、微信小程序、小程序开发、网页设计公司、外贸网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容