一、基本概念
插件plugin也称为扩展,是一种遵循一定规范的应用程序接口编写出来的程序。
二、插件应用
1、cookie
引入jquery.cookie.js文件
$.cookie("cookie_name","cookie_value",{
expires:7,
path:"/",
domain:"jauery.com",
secure:true
})
expires:有效期,单位天,负数为已经过去的天。
path:cookie的路径,创建该Cookie的页面路径。
domain:cookie的域名。
secure:如果设为true,那么此Cookie的传输会要求一个安全协议。
如:
$.cookie("myCookie","cookieVal",{path:"/",expires:10});
2、插件的种类
封装对象方法的插件:$("id").addClass();
封装全局函数的插件:$.Ajax();
选择器插件:$("div:gt(1)");
3、封装对象方法color插件
//插件编写
;(function($){
JQuery.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(JQuery);
//插件应用
$(function(){
$("div").color();//获得color
$("div").color("red");//设置color
});
4、封装对象方法隔行变色插件
//插件编写
;(function($){
$.fn.extend({
"BgColor":function(options){
options = $.extend({
odd:"odd",
event:"even"
},options);
//在当前表格中查找匹配元素
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
return this;//返回this,使方法可链
}
});
})(JQuery);
//插件应用
$("table").BgColor().find("th").css("color","red");
5、封装全局函数左、右去空格插件
//插件编写
;(function($){
$.extend({
"ltrim":function(txt){
return (txt || "").replace(/^\s+/q,"");
},
"rtrim":function(txt){
return (txt || "").replace(/\s+$/q,"");
}
});
})(JQuery);
//插件应用
$(function(){
$.ltrim(" test ");//"test "
$.rtrim(" test ");//" test"
});
6、封装自定义选择器between
gt:function(a,i,m){
return i > m[3]-0;
}
a:指各当前遍历到的DOM元素。
i:当前遍历到DOM元素的索引。
m:较特别。
m[0]:整个选择器,":gt(1)"这部分。
m[1]:引导符,":"这部分。
m[2]:选择器函数,"gt"这部分。
m[3]:括号内部,"1"这部分。
特例":l(ss(dd))"中
m[0]=":l(ss(dd))",m[1]=":",
m[2]="l",m[3]="ss(dd)",
m[4]="(dd)"
//插件编写
;(function($){
$.extend(JQuery.expr[":"],{
between:function(a,i,m){
var tmp = m[3].split(",");//m[3]="2,5"
return (tmp[0]-0 < i) && (i < tmp[1]-0);
}
});
})(JQuery);
//插件应用
$(function(){
$("div:between(2,5)").css("color","red");
});
--------------------------------------------------------------------------------------------------------------------------------