jQuery学习笔记(六)

jQuery插件的使用和写法


  • 表单验证插件 Validation

http://bassistance.de/jequery-plugins/jquery-plugin-validation/

  • 表单插件 Form

http://malsup.com/jquery/form/#download

  • 模态窗口插件 SimpleModal

http://www.ericmmartin.com/projects/simplemodal/

1.模态窗口就是在该窗口关闭之前,其父窗口不可能成为活动窗口的那种窗口。
例如:窗口A弹出窗口B,如果窗口B是模态的,在窗口B关闭前就不可能切换到窗口A;如果B是非模态的,那可以在这两个窗口之间任意切换。
更简单地说alert弹出框就是一个模态窗口。

2.模态对话框 和 非模态对话框区别
模态对话框在显示之后,就不能对同一个程序中的其它窗口进行操作。
非模态对话框在显示之后,还可以对同一个程序的其它窗口进行操作

  • 管理Cookie插件 Cookie

http://github.com/carhartl/jquery-cookie/

  • jquery UI 插件

http://ui.jquery.com/download/

主要三个部分:交互微件效果库


 

编写jQuery插件

  • 插件的种类

1.插件对象方法的插件

2.封装全局函数的插件

3.选择器插件

  • 插件的基本要点

a) 推荐命名为:jquery.[插件名].js

b) 所有对象方法应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上

c) 在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样内部的this指向的是DOM元素

d) 可以通过this.each来遍历元素

e) 所有的方法或函数插件以分号结尾,可以在插件头部先加上一个分号

f) 插件一般应该返回一个jQuery对象,以保证插件的可链式操作。

g) 避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示以避免冲突。或者通过闭包来回避这个问题

  • 插件中的闭包
;(function($){    //开始前的分号保证更好的兼容性,此处将$作为匿名函数的形参
//...这里可以使用$作为jQuery的缩写别名
})(jQuery);    //这里将jQuery作为实参传递给匿名函数
  • 插件的机制

jQuery.fn.extend()方法,用来扩展封装对象方法的插件

jQuery.extend()方法,用来扩展封装全局函数的插件和选择器插件

  • 编写jQuery插件

1.封装jQuery对象方法的插件

编写color()插件,作用

a)设置匹配的元素的颜色

b)获取匹配的元素的颜色

;(function($){
$.fn.extend({
"color":function(value){
//插件代码
}
});
})(jQuery);
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
})(jQuery);

因css()方法内部已经有判断value是否为undefined的机制,所以可以借助css()方法的这个特性来处理,删除if()部分,简化如下

;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);

jQuery的选择符可能会匹配1个或多个元素,所以可以在插件内部调用each()方法来遍历匹配元素。插件框架如下:

;(function($){
$.fn.extend({
"somePlugin":function(options){
return this.each(function(){
//插件代码
});
}
});
})(jQuery);
  • 封装全局函数的插件
;(function($){
    $.extand({
         属性名:function(){
            //待封装函数代码
    })
})(jQuery)

 

  • 自定义选择器

 

posted @ 2017-10-25 20:39  透明胶  阅读(162)  评论(0编辑  收藏  举报