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()。
插件代码示例:
使用这种插件的扩展方式,在使用此插件时,需要首先引用经过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插件的几点理解,希望对大家能有所帮助,也希望大家在使用的过程中能及时反馈相关信息。
相关推荐
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
在前端开发领域,jQuery插件开发是很多开发者都会接触的一个知识点。JQuery作为最流行的JavaScript库之一,其插件架构...通过掌握jQuery插件的写法,开发者可以在遵循jQuery规范的前提下,进行更加高效和模块化的开发。
本篇文章将深入探讨如何编写一个简单的jQuery插件,理解其基本的写法格式。这对于任何希望扩展jQuery功能或者创建自定义解决方案的开发者来说,都是至关重要的基础知识。 首先,我们要明确jQuery插件的目的是为了...
**jQuery应用六:窗口效果(jQuery插件的写法)** 在Web开发中,jQuery库以其简洁、强大的API,使得JavaScript编程变得更加简单。本篇将深入讲解如何利用jQuery实现窗口效果,并探讨jQuery插件的编写方法。我们将...
"jquery插件弹出div"是一个基于jQuery的插件,用于创建弹出式对话框或者模态框,通常用于显示警告、确认消息或者进行表单提交等交互操作。在网页设计中,这种功能能够提升用户体验,因为它可以将用户注意力集中在...
"jqueryzepto插件把各种延迟串联起来采用管道式写法"这个主题,正是讨论如何通过插件的方式,巧妙地管理延迟执行的任务,使得代码更加简洁、高效。 在JavaScript中,我们常常会遇到需要按顺序执行一系列任务的情况...
例如,有一个很受欢迎的jQuery插件叫Bootstrap,它提供了一系列预先设计的UI组件,如导航条、按钮组、模态框等,可以帮助开发者快速创建响应式布局的网站。 在学习过程中,代码注释是非常重要的。良好的注释能让...
几天在学习jQuery插件的写法,搜索了一些资料,包括jQuery官方的示例,但发现描述的并不是很清晰。最后,终于搜索到一篇讲解比较清晰的文章,这里自己总结了一下,并以一个具体的示例来说明jQuery插件的写法
一个简单的jQuery插件通常会定义一个新的方法,这个方法可以在jQuery对象上调用。以下是一个基本的插件模板: ```javascript (function($) { // 封装防止污染全局命名空间 $.fn.myPlugin = function(options) { ...
"JS规范"指的是编写JavaScript代码时应遵循的规则和最佳实践,而"插件写法"则涉及到如何设计和实现可复用、可扩展的功能模块。 **JS规范** 1. **命名规范**:使用有意义的变量、函数和类名,通常推荐采用驼峰式...
jQuery元素属性、jQuery元素内容、jQuery动态创建内容、jQuery删除节点、jQuery事件处理、jQuery文档就绪的四种写法、jQuery事件绑定和解除绑定、jQuery事件切换、jQuery实现toggle功能、jQuery插件、jQuery插件实用...
jQuery插件是jQuery库的一个强大特性,它允许开发者扩展jQuery的功能,创建自定义的方法和功能。下面我们将深入探讨jQuery插件的编写要点和一个简单的插件开发实例。 1. **文件命名规范**: - 为了保持代码组织的...
"jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...
一个jQuery插件通常是用来增强原有jQuery对象的功能,允许开发者自定义行为。以下是一个简单的jQuery插件示例: ```javascript // 使用立即执行函数表达式(IIFE)包裹代码,避免污染全局命名空间 ;(function($) { /...
1. 初始化方法:定义$.fn.sortable,这是jQuery插件的标准写法,用于扩展jQuery对象的方法。 2. 配置选项:插件可能提供一些可配置的参数,如拖动的灵敏度、排序完成后的回调函数等。 3. 事件处理:包括对...
在编写jQuery插件时,确保其质量和兼容性是至关重要的。以下是一些关键的注意事项,可以帮助你写出高质量、模块化的jQuery插件。 1. **命名规范**:遵循良好的JavaScript命名约定,例如使用驼峰式命名(camelCase)...
同时,由于其基于jQuery,因此与其他jQuery插件和库的兼容性较好,可以轻松集成到现有项目中。 总结起来,jQuery消息提示插件growl-notification为网页开发提供了一种强大且灵活的用户反馈机制,通过理解和掌握其...
jQuery基础案例分析(初学者入门精通最佳案例),内容丰富,一切用代码说话...7.jQuery插件的使用和写法 8.用jQuery打造个性网站 9.jQuery Mobile 10.jQuery各个版本的变化 11.jQuery性能优化和技巧 12.jQuery查询手册