`
medius
  • 浏览: 3829 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery插件写法

阅读更多

JQuery插件写法的总结

最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率。JQuery本身提供了丰富的操作,但是,有时候我们需要根据我们自己的业务和系统特色(风格)构造一些我们常用的前端UI组件,而 JQuery的插件给了我们一个较好的方式来构造这些UI组件,方便我们日后反复重用这些组件。

网上也有很多关于JQuery插件的文章,我也搜了一些,但是,这些文档太过离散,没有有效地组织并充分说明JQuey插件该如何编写,并且有哪几种形式,什么情况下使用哪种形式。下面,我将说明JQuery插件常用的写法,以及这些插件的常用场景。

 



首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面(或.aspx页面),页面上放置了一个5行3列的表格,即:<table></table>标记,具体代码如下:

 

<table id="newTable">
    <tr>
        <td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td>
    </tr>
</table>

我要实现的功能是:鼠标移到表格的某一行时,当前行高亮显示,其他行正常。

OK,结合这个场景,我们进一步探讨如何利用JQuery插件实现上述功能。常用的JQuery插件有如下几种写法:

1. 对JQuery自身的扩展插件
顾名思义,这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。
插件代码示例:

$.extend({
    handleTableUI : function(table){
        var thisTable = $("#" + table);
        
        $(thisTable).find("tr").bind("mouseover"function () {
            $(this).css({ color: "#ff0011", background: "blue" });
        });
        $(thisTable).find("tr").bind("mouseout"function () {
            $(this).css({ color: "#000000", background: "white" });
        });
    }
});
示 例说明:当要对JQuery自身进行扩展的时候,需要采用$.extend();的形式进行开发,JQuery的extend()方法为我们提供了扩展 JQuery自身的方式,在extend()方法中,我们采用{...}的形式编写具体的方法体。其中,最重要的是要定义我们自己的扩展方法,如示例中的 handleTableUI。定义的方式是:方法名 : function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法,而且这个方法可以在web页面通过智能提示显示出来。页面中调用的代码如下:
<script type="text/javascript">
    $(document).ready(function () {
        $.handleTableUI("newTable");
    });
</script>
 
2. 对HTML标记或页面元素进行扩展
使用这种插件的扩展方式,在使用此插件时,需要首先引用经过JQuery包装的页面元素,如:$("#tableId").Method()。
插件代码示例:
(function ($) {
    $.fn.setTableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
            $(thisTable).find("tr").bind("mouseover"function () {
                $(this).css({ color: "#ff0011", background: "blue" });
            });
            $(thisTable).find("tr").bind("mouseout"function () {
                $(this).css({ color: "#000000", background: "white" });
            });
        });
    };
})(jQuery);
示例说明:当要对页面元素进行JQuery扩展时,需要采用(function($){...})(JQuery);的方式进行开发。在“...”处,定义我们自己的方法,定义方式是:$.fn.自定义方法名 = function(参数){...};的形式定义扩展方法的具体内容。在页面调用的时候不同于对JQuery自身的扩展。具体调用代码如下:
<script type="text/javascript">
    $(document).ready(function () {
        $("#newTable").setTableUI();
    });
</script>
 
3. 不要用在页面显式调用JQuery的方法,而是通过直接添加JQuery插件脚本引用,即可实现对该插件的调用。
一 般,如果需要用到一些全局的JQuery插件,即:插件的方法不需要显式调用,而是引用脚本即可;同时,这种插件一般对整个Web页面起到全局配置或设置 的作用,如:对<body></body>内部的内容进行整体布局,此时可以采用脚本引用的方式实现。
插件代码示例:
(function ($) {
    $.tableUI = { set: function () {
        var thisTable = $("table");
        $(thisTable).find("tr").bind("mouseover"function () {
            $(this).css({ color: "#ff0011", background: "blue" });
        });
        $(thisTable).find("tr").bind("mouseout"function () {
            $(this).css({ color: "#000000", background: "white" });
        });
    }
    };
    //此处需要进行自调用
    $(function () {
        $.tableUI.set();
    });
})(jQuery);
示例说明:如果上面这段代码在my.plugin.js文件中,那么,我们只需要在页面上添加对此脚本文件的引用即可,引用方式为:<script src="Scripts/my.plugin.js" type="text/javascript"></script,当然,在所有要用到JQuery的地方,需要首先添加对JQuery库脚本的引用。在引用型插件的代码中,最主要的就是在插件中要主动调用自己所写的插件方法,上面代码中有注释的地方。否则,我们写的插件代码将不会起作用。
 
OK,以上就是我对JQuery插件的几点理解,希望对大家能有所帮助,也希望大家在使用的过程中能及时反馈相关信息。
分享到:
评论
1 楼 naily 2013-11-06  
好文章。直观简单的说明了jq插件的几种写法及原因

相关推荐

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    Jquery插件写法笔记整理

    在前端开发领域,jQuery插件开发是很多开发者都会接触的一个知识点。JQuery作为最流行的JavaScript库之一,其插件架构...通过掌握jQuery插件的写法,开发者可以在遵循jQuery规范的前提下,进行更加高效和模块化的开发。

    JQuery简单插件示意,介绍插件的基本写法格式

    本篇文章将深入探讨如何编写一个简单的jQuery插件,理解其基本的写法格式。这对于任何希望扩展jQuery功能或者创建自定义解决方案的开发者来说,都是至关重要的基础知识。 首先,我们要明确jQuery插件的目的是为了...

    JQuery应用六:窗口效果(JQuery插件的写法)

    **jQuery应用六:窗口效果(jQuery插件的写法)** 在Web开发中,jQuery库以其简洁、强大的API,使得JavaScript编程变得更加简单。本篇将深入讲解如何利用jQuery实现窗口效果,并探讨jQuery插件的编写方法。我们将...

    jquery插件弹出div

    "jquery插件弹出div"是一个基于jQuery的插件,用于创建弹出式对话框或者模态框,通常用于显示警告、确认消息或者进行表单提交等交互操作。在网页设计中,这种功能能够提升用户体验,因为它可以将用户注意力集中在...

    jqueryzepto插件把各种延迟串联起来采用管道式写法

    "jqueryzepto插件把各种延迟串联起来采用管道式写法"这个主题,正是讨论如何通过插件的方式,巧妙地管理延迟执行的任务,使得代码更加简洁、高效。 在JavaScript中,我们常常会遇到需要按顺序执行一系列任务的情况...

    一个简约的HTML 用于初学者学习 还有一些入门jquery插件

    例如,有一个很受欢迎的jQuery插件叫Bootstrap,它提供了一系列预先设计的UI组件,如导航条、按钮组、模态框等,可以帮助开发者快速创建响应式布局的网站。 在学习过程中,代码注释是非常重要的。良好的注释能让...

    jQuery插件的写法分享

    几天在学习jQuery插件的写法,搜索了一些资料,包括jQuery官方的示例,但发现描述的并不是很清晰。最后,终于搜索到一篇讲解比较清晰的文章,这里自己总结了一下,并以一个具体的示例来说明jQuery插件的写法

    jQuery扩展插件和拓展函数的写法-代码

    一个简单的jQuery插件通常会定义一个新的方法,这个方法可以在jQuery对象上调用。以下是一个基本的插件模板: ```javascript (function($) { // 封装防止污染全局命名空间 $.fn.myPlugin = function(options) { ...

    JS 规范 插件 写法

    "JS规范"指的是编写JavaScript代码时应遵循的规则和最佳实践,而"插件写法"则涉及到如何设计和实现可复用、可扩展的功能模块。 **JS规范** 1. **命名规范**:使用有意义的变量、函数和类名,通常推荐采用驼峰式...

    最全面的jQuery基础知识

    jQuery元素属性、jQuery元素内容、jQuery动态创建内容、jQuery删除节点、jQuery事件处理、jQuery文档就绪的四种写法、jQuery事件绑定和解除绑定、jQuery事件切换、jQuery实现toggle功能、jQuery插件、jQuery插件实用...

    Jquery插件编写简明教程

    jQuery插件是jQuery库的一个强大特性,它允许开发者扩展jQuery的功能,创建自定义的方法和功能。下面我们将深入探讨jQuery插件的编写要点和一个简单的插件开发实例。 1. **文件命名规范**: - 为了保持代码组织的...

    jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq

    "jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...

    jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)

    一个jQuery插件通常是用来增强原有jQuery对象的功能,允许开发者自定义行为。以下是一个简单的jQuery插件示例: ```javascript // 使用立即执行函数表达式(IIFE)包裹代码,避免污染全局命名空间 ;(function($) { /...

    jquery实现的div拖动排序插件jquery.sortable源码.zip

    1. 初始化方法:定义$.fn.sortable,这是jQuery插件的标准写法,用于扩展jQuery对象的方法。 2. 配置选项:插件可能提供一些可配置的参数,如拖动的灵敏度、排序完成后的回调函数等。 3. 事件处理:包括对...

    写jQuery插件时的注意点

    在编写jQuery插件时,确保其质量和兼容性是至关重要的。以下是一些关键的注意事项,可以帮助你写出高质量、模块化的jQuery插件。 1. **命名规范**:遵循良好的JavaScript命名约定,例如使用驼峰式命名(camelCase)...

    jQuery多种消息提示插件growl-notification.zip

    同时,由于其基于jQuery,因此与其他jQuery插件和库的兼容性较好,可以轻松集成到现有项目中。 总结起来,jQuery消息提示插件growl-notification为网页开发提供了一种强大且灵活的用户反馈机制,通过理解和掌握其...

    jQuery基础案例分析(初学者入门精通最佳案例)

    jQuery基础案例分析(初学者入门精通最佳案例),内容丰富,一切用代码说话...7.jQuery插件的使用和写法 8.用jQuery打造个性网站 9.jQuery Mobile 10.jQuery各个版本的变化 11.jQuery性能优化和技巧 12.jQuery查询手册

Global site tag (gtag.js) - Google Analytics