jquery插件开发方式多样化。
个人比较喜欢以下方式:
一.jquery扩展
1.javascript结构
(function(jquery){
//jquery扩展插件
jquery.fn.showMess = function(){
this.each(function(){
alert("测试");
});
}
})(jQuery);
使用javascript闭包方式。
(function(){})();
2.调用方式就很简单了。
$("span").showMess();
二.另外一种就是使用类的静态方法定义;
1.定义结构
(function(jquery){
//定义jquery的静态方法
jquery.showMess = function(input){
alert("静态定义测试");
}
})(jQuery)
2.调用方式可以在html标记事件上调用;
<span onclick="$.showMess()">静态定义测试</span>
当然调用的时候也可以根据情况,在定义插件的时候定义相关的调用方法就可以了,这两种方式也可以同时使用。
我自己比较喜欢jquery定义插件的方式是;
1.使用闭包
(function(jquery){})(jQuery)
function的参数使用jquery而不是$,这样不会与别的参数冲突;
2.里面的结构是
先定义类后使用(扩展插件,定义静态方法)new一个对象出来;这样自己觉得好管理一些,参数当然肯定可以被实际参数覆盖才行(extends)
3.局部变量使用“_变量名”的方式定义;
一个比较简单的信息提示插件:
/**
* @fileOverview 简单的信息提示插件
* @author <a href="gleams.iteye.com">星月</a>
* @version 0.1
*/
(function(jquery){
var showMess = function(elem){
var _elem = this.elem = $(elem);
var prompt = _elem.attr("prompt");
if(prompt!=undefined && prompt!=null){
this.showDiv();
}
}
showMess.prototype.showDiv = function(){
var span="<span id=\"showDiv\"></span>";
var _prompt = this.elem.attr("prompt");
var _elem = this.elem;
var div="<div class=\"showMess\">"+_prompt+"</div>";
$(_elem).hover(function(){
if($("#showDiv").size()<1) {
$("body").append(span);
}
$("#showDiv").append(div);
},function(){
$(".showMess").remove();
});
$(_elem).mousemove(function(ev){
var ev = ev || window.event;
var tagName = $(_elem).attr("tagName");
var x = tagName=="A" ? mouseCoords(ev).x+10+"px" : mouseCoords(ev).x+"px";//如果是a 标记x位置增加10像素
var y = tagName=="A" ? mouseCoords(ev).y+20+"px" : mouseCoords(ev).y+10+"px";//如果是a 标记y位置增加20像素
var txtLength = _prompt.length;
var lengthNum = txtLength/20;
if(lengthNum>1){
$(".showMess").width(lengthNum*80);
}else{
$(".showMess").width(80);
}
$(".showMess").fadeIn("show");
$("#showDiv").css({
"display":"block",
"left":x,
"top":y
});
});
}//showDiv_end
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
} //mouseCoords_end
//jquery扩展插件
jquery.fn.showMess = function(){
this.each(function(){
new showMess(this);
});
}
//jquery运行
$(function(){
$("span,div,input,a,img,td").showMess();
});
})(jQuery);
分享到:
相关推荐
### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...
jquery插件开发是提高前端开发效率的重要方式之一。在本篇文章中,我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建...
这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...
总结来说,jQuery插件开发中的五种形态小结通过一系列的示例和说明,为开发者展示了如何创建一个高效、可维护的插件。这五个形态涉及到了代码的独立性、链式操作、插件的可配置性、生命周期的管理、无冲突处理以及...
**jQuery插件开发** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式,允许开发者根据需求定制各种功能,如表单验证、...
jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...
《jQuery插件开发详解》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了DOM操作、事件处理和动画制作。对于开发者而言,掌握jQuery插件的开发技巧是提升工作效率的重要一环。本篇将深入探讨...
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...
首先,要学习jQuery插件开发,我们先要理解插件的概念。jQuery插件本质上是通过某种机制对jQuery核心模块进行扩展的方法或额外功能。在编写属于自己的插件时,我们不仅可以提高开发效率,还可以在不同的项目中重复...
jQuery插件开发是一项能够极大提升前端开发效率和代码可复用性的技术。在学习开发jQuery插件之前,需要先了解一些基础概念和最佳实践,以及避免在开发过程中的一些常见陷阱。 首先,我们需要掌握什么是jQuery插件。...
在学习jQuery插件开发之前,需要了解jQuery库本身的功能和组成。jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。在进行jQuery插件开发时,尤其需要关注...
**通用JQuery插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jQuery插件开发是创建可复用、模块化代码的一种有效方式,它允许开发者扩展jQuery的功能,满足特定需求。本文将深入探讨jQuery插件开发的几个关键点:jQuery扩展、私有域以及定义插件的基本步骤。 首先,我们来看...
### jQuery插件开发精品教程 #### 一、引言 jQuery是一个广泛使用的JavaScript库,其核心功能之一是通过插件扩展其功能。在这一部分,我们将了解到插件对jQuery的重要性,以及如何使用插件来提升jQuery的能力。 ##...
学习jQuery插件开发对于任何希望提升自身前端开发能力的开发者而言,是一项非常重要的技能。 在插件开发中,首先需要了解的是插件开发的基本模式。根据《jQuery高级编程》所述,jQuery插件开发主要有以下几种方式:...
这篇博文“JQuery插件开发 + 插件”可能涉及到如何创建自定义的jQuery插件以及如何利用这些插件来增强网页功能。下面我们将深入探讨jQuery插件开发的相关知识点。 一、jQuery插件基础 1. 插件定义:jQuery插件是...