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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。