Jquery插件编写简明教程

代码如下:

/*
 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>

时间: 2014-03-23

基于jquery编写的放大镜插件

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

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

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

编写自己的jQuery提示框(Tip)插件

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

如何编写jquery插件

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

jQuery弹簧插件编写基础之“又见弹窗”

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

基于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插件编写步骤详解

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

基于编写jQuery的无缝滚动插件

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

编写简单的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插件编写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.color.js. 该插件用来实现以下两个功能 设置元素的颜色. 获取元素的颜色. 先在搭建好如下编写插件的框架: ;(function($){ //这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.extend().这种方法来编写,代码如下: ;(function($){ $.fn.extend({ "color":function(value){ //这里写插件代码 } }); })(jQ

jquery attr()设置和获取属性值实例教程

语法: 1.attr("属性名"): //获取属性的值(取得第一个匹配元素的属性.通过这个方法可以方便的从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回undefined) 2.attr("属性名","属性值"); //设置属性的值(为所有匹配的元素设置一个属性值) 3.attr("属性名","函数值"); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值.不提供值,而是提供一个函

jquery衣服颜色选取插件效果代码分享

本文实例讲述了jquery衣服颜色选取插件效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现衣服颜色选取插件效果代码,有了这个插件可以为自己搭配衣服颜色,自己就是设计师,为自己设计独一无二的衣服,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery衣服颜色选取插件效果代码如下 <head> <

jquery获取颜色在ie和ff下的区别示例介绍

在使用$("#id").attr("color") 获取颜色的时候,ie和ff是不同的.举个简单的例子: 复制代码 代码如下: <font id="id" color="green"> 使用$("#id").attr("color") 在ff,chrome中获取到的值是"green",在ie中获取到的值是"#008000". 所以说,如

使用jquery.qrcode.js生成二维码插件

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

个人网站留言页面(前端jQuery编写、后台php读写MySQL)

首先,上个人网站的留言页面,大家可以看看效果:留言板 前端为了省事,使用jQuery编写,后台使用php简单读写MySQL数据库. 数据库设计和实现思路 数据库创建了一个表:comments,结构如下图: 全部评论(包括文章评论回复,留言板)都写在同一张表中,不同的评论区用字段belong区分 同一个评论区里,parent为0表示为评论,parent为某值时表示为哪个评论的回复,思路不复杂. 注意,这里并不讲CSS,大家根据自己的需要定制,现在开始封装: 定下功能 我们根据自己的需要定下功能,首

jQuery循环动画与获取组件尺寸的方法

本文实例讲述了jQuery循环动画与获取组件尺寸的方法.分享给大家供大家参考.具体分析如下: 一.前言 1.jQuery中的animate()方法允许您创建自定义的动画. animate() 方法几乎可以操作所有 CSS 属性,不过当使用 animate() 时,必须使用Camel标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等.同时,色彩动画并不包含在核心 jQuery 库中.如果需要生成

jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

本文实例讲述了jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

jQuery查找节点并获取节点属性的方法

本文实例讲述了jQuery查找节点并获取节点属性的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jqu

jQuery操作DOM之获取表单控件的值

本文实例讲述了jQuery操作DOM之获取表单控件的值.分享给大家供大家参考.具体分析如下: HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了.比如,文本输人框的 value属性在DOM中的属性叫defaultValue,DOM中就没有value属性.而选项列表(select) 元素呢,其选项的值在DOM中通常是通过selectedIndex属性,或者通过其选项元素的 selected属性来取得. 由于存在这些差异,在取得和设置表单控件的值时,最好不要使用.attr()方法.而对