第三方插件: 日期,验证,瀑布流-04

2019-01-31  本文已影响6人  白雪公主960

正课:

  1. 第三方插件:
    日期,验证,瀑布流

  2. ***开发自定义jQuery插件

  3. 第三方插件:
    日期: jquery ui datepicker
    h5 input type="date"
    My97
    layDate
    layDate: 不依赖于jquery
    如何:
    html: <input class="laydate-icon"
    css: 引入laydate/skins/default/laydate.css
    js: laydate({
    elem:"selector",
    format:"YYYY年MM月DD日",
    其他属性
    })

表单验证: jquery.validator 依赖于jquery
如何使用:
$(表单).validate({
rules: {//规则
name1: "required",//必填,如果只有一个简单规则时
name2: {//如果一个字段,需要多个规则验证时
规则1: 值,
规则2: 值,
},//所有规则列表: https://jqueryvalidation.org/documentation/
List of built-in Validation methods
},
message:{//提示信息
name1: "name1验证失败的信息",
name2:{
规则1: "name2的规则1验证失败的信息",
规则2: "name2的规则2验证失败的信息",
}
}
});
如何添加自定义验证规则:
jQuery.validator.addMethod(规则名,method[,默认提示])
使用自定义规则: field: "规则名"

Masonry: 瀑布流
特点: 不规则大小的砖块,拼凑成完整的砖墙
什么是Masonry: 是一个javascript网格布局库.
作用: 在一个垂直区域内,将元素按最优化的空间利用率自动摆放。
如何使用: $(容器父元素).masonry();

  1. ***自定义jquery插件:
    需求: 添加一个专门的函数sum,来计算数组中所有元素的和
    问题: 直接定义在全局,易被污染
    解决: 定义在一个自定义的对象中: 2步:

    1. 定义一个全局对象;
    2. 在自定义的全局对象中添加自定义方法
      优: 不易被污染
      html如何使用自定义方法: 2步:
    3. 先引入方法所在的js文件
    4. 用库对象.自定义方法()
      添加jquery全局函数:
      下课了。。。。。。。。。。。。。。。。。。。。。。。
      正课:
  2. ***自定义jQuery插件:
    jQuery的全局方法
    添加jQuery的对象方法——自定义插件

  3. jQuery 全局方法:
    jQuery库对象: window.jQuery=window.$=jQuery
    向jQuery库中添加全局方法: 2步:

    1. jQuery.命名空间={}
    2. jQuery.命名空间.方法名=function(){...}

原生js的全局方法 vs jQuery的全局方法
原生js的全局方法: 直接定义在window下,不需要任何对象即可直接访问。
jQuery的全局方法: 定义在jQuery对象内部,必须用jQuery对象才能调用

  1. 添加jQuery 对象方法:
    为所有jQuery查找结果对象添加的方法——插件
    vs jQuery全局方法:
    全局方法: .xxx.方法名() 对象方法:(selector).方法名()
    何时: 如果希望对查找结果对象调用方法时
    如何定义: $(...)的原型对象是jQuery.fn

鄙视题: .each(arr,function(i,val){...}) arr.forEach(function(val,i,arr){...}) vs(...).each(function(i,elem){...})
.each()是jQuery全局方法,存储在jQuery全局对象上 主要用于遍历普通数组(...).each()是jQuery对象方法,存储在原型对象jQuery.fn上
主要用于对查询结果中的每个DOM元素执行操作

  1. 自定义jQuery插件:
    何时: 如果一个效果需要反复使用,就要封装为插件
    优: 重复利用, 提高发开效率
  2. dropdown:
上一篇下一篇

猜你喜欢

热点阅读