Javascript - Jquery - 插件

插件（Plugin）

livequery插件

比如如果为页面上的所有div绑定了click事件，那么之后如果再动态创建一个div插入文档后，这个div则不会有click事件，livequery插件能使后来动态创建的元素也能自动注册事件。

livequery(type,x,y)

为JQuery对象绑定事件（包括使用Javascript动态插入的元素），type是事件触发方式，x是事件侦听器，y是可选的事件完成后的回调方法。

$(document).ready(function () {
    //使用livequery绑定事件
    $(‘a‘).livequery(‘click‘,function () {
        ADS.preventDefault()
        ADS.log.write($(this).text());
    })
    //之后动态创建的a元素也被自动绑定了事件
    $("<a href=‘‘>4</a>").appendTo(document.body);
});

<a href=‘‘>1</a>
<a href=‘‘>2</a>
<a href=‘‘>3</a>

JQuery UI插件

一整套基于web UI的插件，此插件大体分为三个部分 如下：

交互{ 拖动、置放、缩放、选择、排序 。}

微件{ 手风琴导航、自动完成、拾色器、对话框、滑块、标签、日历、放大镜、进度条、微调控制器、历史、布局、表格、菜单、工具提示、树、工具栏、上传组件 。}

效果{ 丰富的动画 无需animate方法 实现更强大的动画。}

自定义插件

为JQuery添加静态方法

使用extend方法可以为JQuery对象添加静态方法，静态方法属于$构造函数的成员，不属于实例对象，所以调用时使用$.方法名即可。

$.extend(x)

x是对象，也可以是匿名对象，将自定义的方法作为x的属性进行定义，就完成了为JQuery添加静态方法。

//定义一个trace函数
function trace() {
    alert(‘hello‘);
}
//将其作为JQuery的静态方法
$.extend({
    trace: trace
});
//使用JQuery的静态方法
$.trace();

为JQuery原型添加方法

使用fn.extend方法可以为JQuery对象添加原型方法，原型方法属于JQuery对象，属于实例对象，所以调用时使用$的实例.方法名即可。

$.fn.extend(x)

//定义一个trace函数
function trace() {
    alert(‘hello‘);
}
//将其作为JQuery的原型方法
$.fn.extend({
    trace: trace
});
//JQuery对象自动继承原型方法
$("#box").trace()

为JQuery编写插件

以上两种方式都可以为JQuery增加静态或实例方法，但用起来不如自定义一个插件库来得方便。你只需要定义一个匿名函数，匿名函数需要接收一个参数，参数=$。使该函数可自运行，将JQuery作为参数传递给它，使用运行起来。接着只需要将我们编写的自定义方法全部放入该匿名函数内就可以了。

(function ($) {
    //定义一个JQuery的静态方法trace
    $.extend({
        trace: trace
    });
    //定义一个trace函数
    function trace() {
        alert(‘hello‘);
    }
})(jQuery)

$.trace();

(function ($) {
    //定义一个JQuery的原型方法trace
    $.fn.extend({
        trace: trace
    });
    //定义一个trace函数
    function trace() {
        alert(‘hello‘);
    }
})(jQuery)

$(document).trace();

Javascript - 学习总目录