jQuery之jQuery扩展和事件

一、jQuery事件

常用事件
   blur([[data],fn])   失去焦点
   focus([[data],fn])  获取焦点（ 搜索框例子）
   change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
   click([[data],fn])  点击
   dblclick([[data],fn]) 双击
   scroll([[data],fn])   滚动
   submit([[data],fn])   提交

不常用事件
   error([[data],fn])
   focusin([data],fn)
   focusout([data],fn)
   keydown([[data],fn])   按下
   keypress([[data],fn])  按键
   keyup([[data],fn])     键松开
   mousedown([[data],fn]) 鼠标按下
   mouseenter([[data],fn])  鼠标移进去
   mouseleave([[data],fn])  鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件
   mousemove([[data],fn])   鼠标移动
   mouseout([[data],fn])    鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件
   mouseover([[data],fn]    鼠标悬停
   mouseup([[data],fn])     鼠标弹起
   resize([[data],fn])  元素窗口发生变化
   select([[data],fn])
   unload([[data],fn])
   补充：
      文档树加载完之后绑定事件（绝大多数情况下）
      第一种：吧script放在后面。
      第二种：
      $(document).ready(function(){
         // 绑定事件的代码
         ....
      })

      简写：
      $(function($){
         // 绑定事件的代码
         ....
      });
事件练习

focus和blur练习

mouseleave和mouseout练习

二、jQuery扩展（很重要！！）

1、jQuery扩展语法

把扩展的内容就可以写到xxxx.js文件了，在主文件中直接导入就行了。

用法1、$.xxx()
   $.extend({
      "GDP": function () {
         console.log("戴小红花");
      }
   });
   - 给jQuery添加扩展
   - $.GDP()

用法2、$("").xxx()
   $.fn.extend({
      "BJG": function () {
         console.log("英语八级就是好！");
      }
   })
   - 给jQuery对象添加扩展
   - $(":input").BJG()

2、练习1

　　第一步：不完美

extend.js文件

$.extend({
       "GDP":function () {
           foo();
        console.log("带小红花")
    }
});
那么如果这样定义一个函数，其他的扩展都可以调用这个函数了
这个函数只想在自己调用。不想让它公共的调用，不让他起冲突
那么定义一个私有的。用一个匿名函数
function foo() {
    console.log("英语八级就是牛")
}
$.fn.extend({
    "BJG":function () {
        foo()
        console.log("就这样吧")
    }
});

　　继续第二步：加上匿名函数

匿名函数：foo方法只想自己用，不想让别人调用
(function () {
    $.extend({
       "GDP":function () {
           foo();
        console.log("带小红花")
    }
});
    function foo() {  函数的内部可以调用，外部就不可以调用了
    console.log("英语八级就是牛")
    }
})();


(function () {
    $.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})();

　　第三步、越趋于完美：既不可以让别人在外部随意调用，也可以避免别人修改$

// 如果怕$被别人改，那么就传个参数进去
(function (jq) {
    jq.extend({
       "GDP":function () {
           foo();
          console.log("带小红花")
       },   //可以扩展多个（加上逗号在写几个）
        "SGS":function () {
          console.log("你蛤蟆")
    }
});
    function foo() {
    console.log("英语八级就是牛")
    }
})(jQuery);


(function (jq) {
    jq.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})(jQuery);

extend.html文件

 

 

3、具体示例练习（登录校验）

login.html文件

View Code

loginextend.js 文件

// 匿名函数
(function (jq) {  //jq就相当于$
    jq.extend({
        "myValidate": function (form) {
            var formObj = jq(form) ;//赋一个变量，因为我们经常用到  

　　　　　　　　　　　　　　　　　　　　　　这里的form参数就指的是在html文件里面传进去的"#login"，也就是找到的form标签

            formObj.find(":submit").on("click", function () {
                //先清空状态
            formObj.find(".form-group").removeClass("has-error");
            formObj.find("span").text("");

                formObj.find(":input").each(function () {
                    if ($(this).val().length === 0) {
                        var name = $(this).prev().text();
                        $(this).parent().addClass("has-error");
                        $(this).next().text(name + "不能为空");
                        return false
                    }
                });
                return false
            });
        }
    })
})(jQuery);

loginextend2.js 文件

/**
 * Created by Administrator on 2017/10/17.
 */
// 匿名函数
(function (jq) {
    jq.fn.extend({
        "myValidate": function (arg) {
            console.log(this);  //就是当前的.前面的jQuery对象 $("#login")  ----->也就是[form#login]
            var formObj = this;//赋一个变量，因为我们经常用到
            formObj.find(":submit").on("click", function () {
                // this --->提交的submit
                //先清空状态
            formObj.find(".form-group").removeClass("has-error");
            formObj.find("span").text("");

            //each循环
            var flag = true;  //设置一个标志位
                // 找到input的属性[required=true]的，然后设置相关的操作
            formObj.find("input[required=true]").each(function () {
                var inputID = jq(this).attr("id");  //获取input的id属性值  "username"
                var minlength = arg[inputID]["min-length"];  //arg[inputID]["min-length"]--->arg["username"]["min-length"]--->得到6
                if ($(this).val().length === 0) {
                    //而这里的this是当前的input框，和上面的不是同一个
                    var name = $(this).prev().text();
                    $(this).parent().addClass("has-error");
                    $(this).next().text(name + "不能为空");
                    flag =  false;
                    return flag
                }
                if (minlength!==undefined){
                    if (jq(this).val().length<minlength){
                        var name = $(this).prev().text();
                        $(this).parent().addClass("has-error");
                        $(this).next().text(name + "长度太短");
                        flag =  false;
                        return flag
                     }
                }
            });
            return flag
          });
        }
    })
})(jQuery);

三、表格的添加 | 删除 | 编辑示例

第一种：点击编辑没有模态框，是input框编辑修改

增删改1

第二种：点击编辑有模态框

增删改2

 补充一个知识点 data

- .data()
- .data("key", value) 保存值，value可以是字符串，也可以是数组，也可以是jquery对象
- .data("key") 获取值（没有值就返回undefined）
- .removeData() 删除所有

- .removeData("key") 删除key对应的value