JQuery(五)：事件和插件

一、事件

1、事件的定义

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

2、定义事件的方式

//1、直接定义
function fun1(){
    $("#b1").click(function(){
     alert("abc");
    });
}

//2、动态绑定
window.onload = function(){
    $("#b1").click(function(){
     alert("abc");
    });
}
//jquery入口函数(dom文档加载完成之后执行该函数中的代码)
$(function () {
    $("#b1").click(function(){
        alert("abc");
    });
});

3、常见的事件方法

$(function () {
    // 1、click([[data],fn])：触发每一个匹配元素的click事件。
    $("#name").click(function () {
        alert("我被点击了...")
    });

    // 2、mouseover([[data],fn])：当鼠标指针位于元素上方时，会发生 mouseover 事件。
    $("#name").mouseover(function () {
       alert("鼠标来了...")
    });

    // 3、mouseout([[data],fn])：当鼠标指针从元素上移开时，发生 mouseout 事件。
    $("#name").mouseout(function () {
        alert("鼠标走了...")
    });

    // 4、focus([[data],fn])：当元素获得焦点时，触发 focus 事件。
    $("#name").focus();//让文本输入框获得焦点
});

4、事件绑定和解绑

$(function () {
    //1.使用on给按钮绑定单击事件  click
    $("#btn").on("click",function () {
        alert("我被点击了。。。")
    }) ;

    //2. 使用off解除btn按钮的单击事件
    $("#btn2").click(function () {
        //解除btn按钮的单击事件
        $("#btn").off("click");
        //$("#btn").off();//将组件上的所有事件全部解绑
    });

    //3、事件切换：toggle
    $("#btn").toggle(function () {
        //改变div背景色backgroundColor 颜色为 green
        $("#myDiv").css("backgroundColor","green");
    },function () {
        //改变div背景色backgroundColor 颜色为 pink
        $("#myDiv").css("backgroundColor","pink");
    });
});

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

二、插件

1、$.fn.extend(object)：扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

//1、定义jqeury的对象插件
$.fn.extend({
    //定义了一个check()方法。所有的jq对象都可以调用该方法
    check:function () {
        //让复选框选中
        this.prop("checked",true);
    },
    uncheck:function () {
        //让复选框不选中
        this.prop("checked",false);
    }
});

//2、使用jquery新增加的方法
$(function () {
    $("#btn-check").click(function () {
        //获取复选框对象
        $("input[type='checkbox']").check();
    });

    $("#btn-uncheck").click(function () {
        //获取复选框对象
        $("input[type='checkbox']").uncheck();
    });
});

2、$.extend(object)：扩展jQuery对象本身。

$.extend({
    max:function (a,b) {
        //返回两数中的较大值
        return a >= b ? a:b;
    },
    min:function (a,b) {
        //返回两数中的较小值
        return a <= b ? a:b;
    }
});

//调用全局方法
var max = $.max(4,3);
alert(max);

var min = $.min(1,2);
alert(min);