Jquery插件编写简明教程

2024-10-01 17:02:13

代码如下:

/*
1.jQuery插件文件名推荐命名为 jquery.[插件名].js 以免和其他javascript库插件混淆。例如命名为jquery.color.js
2.所有的对象方法名都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上。
3.在插件内部，this指向的是当前通过选择器获取的jquery对象，而不像一般方法哪样，例如chick()方法，内部的this指向的dom元素
4.可以通过this.each来遍历所有元素
5.所有的方法或函数插件，都应当以分号结尾，否者压缩的时候可能出现问题，为了更稳妥一些，甚至可以在插件头部先加上一个分号，
以免他人不规范的代码给查询带来影响。
6.插件应该返回一个jquery对象，以保证插件可链式操作。除非插件需要返回的是一些需要回去的量，例如字符串或者数组
7.避免在插件内部使用$作为jquery对象的别名，而应使完整的jquery来表示，这样可以避免冲突。当然，也可以利用闭包这种技巧来回避
这儿问题，使插件内部继续使用$作为jquery的别名。
*/

//;为了更好的兼容性，开始有个分号
;(function($){//此处将$作为匿名函数的形参
  //$.fn.extend 扩展插件
  $.fn.extend({
      "color":function(value){//color 自己写的插件方法名
      //jQuery提供了css方法可以直接写成this.css("属性","值");
      return this.css("color",value);
      }
  });

})(jQuery);//这里将jquery作为实参传递给匿名函数

function red(){
  alert($("#div").color()+"证明插件可用");
  alert($("#div").color("red")+"证明插件返回了一个Jquery对象");
  $("#div").color("red");
}

在HTML使用插件示例：

代码如下:

<body>
<div id="div" onclick="red()">dddddddddddddddd</div>
</body>

编写自己的jQuery插件简单实现代码

这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了...好了,下面开始... jQuery插件主要分为三种 1.封装对象方法的插件 2.封装全局函数的插件 3.扩展选择器的插件这里只编写前俩种,即比较常见的.. 大多数插件都是已这种形式编写的: 复制代码代码如下: (function ($) { /* 这里放置代码 */ })(jQuery); 这样的好处是函数内部依然可以使用$作为jQuery的别名,而不影响到其他库使用$ jQuery提供了俩个扩展用于编写插件 $.fn.ex
编写简单的jQuery提示插件

很简单的代码,就不多废话了. 代码: 复制代码代码如下: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibilit
基于编写jQuery的无缝滚动插件

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b
jQuery插件编写步骤详解

本文实例讲述了jQuery插件编写步骤.分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简单扩展Jquery
jQuery弹簧插件编写基础之“又见弹窗”

本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 $.ajax,$.get 等. 2. 对象级别,这里所谓的对象是指通过jQuery选择器选中的jQuery对象,在该对象上添加方法.例如:$('div').css(), $('div').show() 等. 在实际开发中,我们通常选用对象级别的方法来开发插件,jQuery强大的选择器及对象操作是我们
jQuery编写设置和获取颜色的插件

分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js. 该插件用来实现以下两个功能设置元素的颜色. 获取元素的颜色. 先在搭建好如下编写插件的框架: ;(function($){ //这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.extend().这种方法来编写,代码如下: ;(function($){ $.fn.extend({ "color":function(value){ //这里写插件代码 } }); })(jQ
基于jquery编写分页插件

扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了: $.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.pe
基于jquery插件编写countdown计时器

废话不多说,直接上代码: 先展示一下插件调用方式: 1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插
如何编写jquery插件

前面的话编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护.本文将详细介绍如何编写jQuery插件类型 jQuery的插件主要分为3种类型 1.封装对象方法这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如:parent()方法.appe
基于jquery编写的放大镜插件

本文实例为大家分享了自己动手实现的jquery放大镜插件,供大家参考,具体内容如下 /** *********************************************** **此插件使用须知--------------- ** **滤镜(inner)与其活动区(active)之比要等于 ** **放大区(movequ)与其内部图片之比.如比值不相 ** **等,请改变图片大小.------------------------** **参数介绍 ** **active:滤镜活动区
编写自己的jQuery提示框（Tip）插件

对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码代码如下: //添加check和uncheck插件 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked =

Jquery插件编写简明教程

相关推荐

随机推荐