封装jQuery对象方法的插件
表格隔行变色插件
CSS部分:
.even{ background:#CCC; } .odd{ background:#666; } .selected{ background:#F90; }
DOM结构:
<table id="table1"> <tbody> <tr><th>选择</th><th>姓名</th><th>性别</th></tr> <tr><td><input type="checkbox" checked="checked" /></td><td>小明</td><td>男</td></tr> <tr><td><input type="checkbox" /></td><td>小花</td><td>女</td></tr> <tr><td><input type="checkbox" /></td><td>小红</td><td>女</td></tr> <tr><td><input type="checkbox" /></td><td>小华</td><td>男</td></tr> </tbody> </table>
插件部分:
;(function(){ $.fn.extend({ "alterBgColor":function(options){ //设置默认值 options=$.extend({ odd:"odd", even:"even", selected:"selected" },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $("tbody>tr",this).click(function(){ //判断是否被选中 var isSelected=$(this).hasClass(options.selected);//返回布尔值,判断是否已被选中 //如果被选中就移出selected类,否则加上selected类 $(this)[isSelected?"removeClass":"addClass"](options.selected)//removeClass(myclass)或者addClass(myclass) //查找内部的checkbox,设置对应的属性 .find(‘:checkbox‘).attr(‘checked‘,!isSelected);//v1.7.1正常,v1.11.1经测试在IE9及以上版本点击复选框外的地方,checkbox不能交替选择 }); //如果单选框默认情况下是选择的,则高亮 $(‘tbody>tr:has(:checked)‘,this).addClass(options.selected); return this; //返回this,使方法可链 } }); })(jQuery);
插件使用:
$("#table1").alterBgColor() //应用插件 .find("th").css("color","red"); //可以链式操作
封装jQuery全局函数的插件
去除左侧和右侧的空格
插件部分:
;(function($){ $.extend({ ltrim:function(text){ return (text||"").replace(/^\s+/g),""; }, rtrim:function(text){ return (text||"").replace(/\s+$/g,""); } });})(jQuery);
插件使用:
alert(jQuery.trim(" Hello ")+jQuery.ltrim(" World")+jQuery.rtrim("! "));
自定义选择器
jQuery的选择符解析器首先会使用一组正则表达式来解析选择器,然后针对解析出的每个选择符执行一个函数,称为选择器函数。最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。这样就可以找到匹配的元素节点。
between选择器,如使用$("div:between(2,5)")能实现获取索引值为3、4元素的功能。
DOM结构:
<div style="background:red">0</div> <div style="background:blue">1</div> <div style="background:green">2</div> <div style="background:yellow">3</div> <div style="background:gray">4</div> <div style="background:orange">5</div>
插件定义:
;(function($){ $.extend(jQuery.expr[":"],{ /* 选择器仅仅是jQuery.expr[":"]对象的一部分,同时也是一个Object对象,因此可以直接利用jQuery.extend()对其扩展 a指向当前遍历到的DOM元素 i指的是当前遍历到的DOM元素的索引值,从0开始 m,由jQuery正则解析引擎进一步解析后的产物(用match匹配出来),是一个数组 以$("div:gt(1)")为例: m[0],指:gt(1) m[1],指":",即冒号。当然并非只能使用“:”后面跟上选择器,用户可以自定义其他的选择引导符 m[2],指gt,确定选择器选择器函数 m[3],指数字“1" m[4],如果是div:l(ss(dd))这样一个选择器,m[4]指向(dd)这部分,注意是带括号的(dd),此时的m[3]的值是ss(dd)而非ss */ between:function(a,i,m){ var tmp=m[3].split(",");//将传递进来的m[3]以逗号为分隔符,切成一个数组 return tmp[0]<i&&i<tmp[1]; } }); })(jQuery);
插件应用:
$(function(){ $("div:between(2,5)").css("background","white");//经测试jquery v1.11.1版本不支持 })
时间: 2024-10-07 18:34:52