JQ 4

Posted 2020-09-28 Hale.Proh

1. jQuery UI

2. 第三方插件: 日期，验证，照片墙

3. ***封装自定义插件

 

1. jQuery UI

   autocomplete 自动完成:

   为什么: 减少输入

   如何: html : <input />

       js: 2件事:

         1. 数组: 保存所有备选词

         2. $(...).autocomplete({source: 数组})

 

   button 将a, input, button都转为统一的样式 -boot中也有

   为什么: 统一样式

   如何: $(...).button();

 

   datapicker: 日期选择:

   html: 普通的input文本框

        js: $(...).datepicker()

 

   dialog: 对话框  - boot中有

   为什么: 普通的alert,confirm,prompt 样式不可修改,且兼容性问题

   何时: 今后，在页面中只要弹窗就用dialog

   如何: html: 容器元素包含提示内容

                          容器元素的title属性作为对话框的标题

        js: $(容器元素).dialog(); //让元素变成对话框的样子

             $(容器元素).dialog({autoOpen:false}); //默认隐藏

             $(容器元素).dialog("open"); //弹出对话框

 

   tabs:  -boot中有

    html : div

                  >ul>li>a href="#div"

                  +div id="..." *n

    js: $(父容器).tabs();

 

   tooltip: 工具提示: ——boot中有

    何时: 只要提示用户按钮或输入项的意义时

         其实就是title属性

    为什么: 不同浏览器的title显示样式不一样

    如何: $(document).tooltip(); //对整个页面统一tooltip的样式

 

2. 第三方插件:  日期, 验证, 照片墙

    日期: layDate  不依赖于jquery

      引入css: "laydate/skins/default/laydate.css"

      html: <input class="laydate-icon"/>

       js:

         跟换主题: laydate.skin("dahong或molv")

         2种调用:

            1. 在input的单击事件中调用: laydate();

            2. 在页面加载后调用: laydate({elem: "#input的id"})

 

    验证: jquery.validator

      js: $(表单).validate({

              rules:{

         name1: "required", //name1的内容必填

                 name2: {

             规则名:值,

                     规则名:值,

                 }

              },

              messages:{

         name1: "name1验证失败",

                 name2:{

                     规则名:"name2的规则1验证失败",

                     规则名:"name2的规则1验证失败",

                 }

              }

          })

    规则名: jquery.validate.js的327行

 

    添加自定义验证规则:   其实就是为jquery.valicator添加一个验证函

数

       jQuery.validator.addMethod(规则名,fn,msg)

      fn:function(val){//自动获得要验证的元素内容

           return 验证结果

      }

      自定义的规则，遇到空val，直接返回true，不做验证

   

 

 

 

1. 第三方插件: masonry

2. ***封装自定义插件

 

1. masonry: 彩砖墙

   html: <div class="container">

                <div class="block"> *n

   js: $(".container").masonry();

 

2. ***封装自定义插件:

   2种:

    1. 扩展jQuery全局函数:

      jQuery全局对象: window.jQuery 或 window.$

        jQuery全局函数: 在jQuery对象内添加的函数

           vs ES的全局函数: 在window下添加的函数

       如何:  jQuery.方法名=function(){...}

          $.方法名(); 可以调用

          $().方法名(); X

       鄙视: $.each()  vs  $(...).each(function(){...})

          $.each()是jQuery的全局函数,不需要任何查找结果就可直接调用

         保存在: 直接保存在jQuery对象上

          $(...).each()是jQuery的实例函数,必须要在查找结果上才能调用

                 保存在: jQuery查询结果集合的原型对象中

       何时: 只要复用一个基于jQuery的函数时，就将函数添加到jQuery全局对象中。

        

    2. 封装自定义部件:

       1. myAccordion插件

       在使用jQuery已经实现功能和样式的基础上:

        //制作插件

        1. 所需的所有样式，放入专门的css文件中

        2. 所需的js，放入专门的js文件中:

             1. 判断是否先引入jQuery

             2. 为jQuery添加实例方法

         为元素侵入class和行为

        //制作完成

        如何: 1. 引入自定义插件的css

                 2. 引入jQuery

                 3. 引入自定义插件的js

                 4. 按照插件要求，编写html内容

                 5. 在自定义脚本中直接找到父元素，调用插件函数