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.常见的校验规则

      校验器名称描述
      requiredtrue|false必须填写
      numbertrue|false只能输入数字
      min数字最小值
      max数字大值
      range[min,max]取值范围
      minlength数字最小长度
      maxlength数字大长度
      rangelength[minlength,maxlength]长度范围
      equalTo通过jQuery选择器选中指定元素对象和谁相等(重复密码)
      email"email"校验邮箱
      datetrue校验日期
      dateISOtrue校验日期格式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