编写jQuery插件(三)——三个插件例子

封装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

编写jQuery插件(三)——三个插件例子的相关文章

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候,在页面中导入js文件用本插件进行引入的话, 那么其他请求的页面中也导入了和前面页面相当的js文件的情况下,那这些js文件就不需要重新引入.插件会自动忽略之前已

jQuery和CSS3超酷三面板幻灯片插件

这是一款效果非常酷的jquery和css3三面板幻灯片特效插件.该幻灯片插件将一张图片分割为三部分,在幻灯片切换的时候,图片的每一部分都从不同方向进入显示,效果非常不错. 你可以使用左右导航箭头或下面的原点导航来控制幻灯片图片的切换.该幻灯片被设计为可以加载无限图片的模式,所以你可以任意添加你想要播放的图片的数量. 在线演示:http://www.htmleaf.com/Demo/201503271583.html 下载地址:http://www.htmleaf.com/jQuery/Slide

如何编写JQuery 插件详解

转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第 三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式

自己编写jQuery插件 之 菜单折叠

菜单折叠这个功能很简单,很多人都有写过,只因它在项目中使用实在是太频繁了.代码就那么几行,没什么讲的,这里只是将其封装成插件而已. Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>11

编写jQuery插件的方法

声明:详细内容请看<<锋利的jquery>>这本书 这里没对自定义选择器作介绍 因为我感觉jQuery已经为我们定义足够的选择器已经满足使用 <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>编写jquery插件<

【树莓派】【网摘】树莓派与XBMC及Kodi、LibreELEC插件(三)

之前的相关文章参考: [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(一) [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(二) [树莓派]树莓派与XBMC及Kodi.LibreELEC插件(三) ------------------------------------------------------------------------------------------ 这是在github上面的插件合集,可参考:https://github.com/taxigp

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种

编写jQuery插件

编写jQuery插件 在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在这里就不多说了,主要那个小需求来练练: 需求说明:一个标题插件,可以通过后端取数,自定义标题,自定义样式 讨论:插件通常不都是加载一下就不操作了,比如表格插件,加载数据,刷新等等. 今天练习的控件就简单给大家理理写控件的思路,(有问题,有意见大家指出.) ; (function

自己编写jQuery插件 之 表单验证

吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar([email protected]) */ (function ($) { $.fn.checkFor