刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又.

How to create a Jquery Plugin主要看的大体介绍,然后创建Basic Plugin 和  Advanced Plugin

Basic

1.这应该是最简单的一种,定义和调用

$.fn.greenify = function() {
this.css( "color", "green" );
return this; // chain use
} $( "a" ).greenify().addClass( "greenified" );

2.proteting the $ Alias and Adding Scope(包起来防止$标识冲突)

(function ( $ ) {

    $.fn.greenify = function() {
this.css( "color", "green" );
return this;
}; }( jQuery ));

3.Using the each() Method

调用插件方法时可能有多个Element

$.fn.myNewPlugin = function() {

    return this.each(function() {
// Do something to each element here.
}); };

Advanced

// Plugin definition.
$.fn.hilight = function( options ) { // Extend our default options with those provided.
// Note that the first argument to extend is an empty
// object – this is to keep from overriding our "defaults" object.
var opts = $.extend( {}, $.fn.hilight.defaults, options ); // Our plugin implementation code goes here. }; // Plugin defaults – added as a property on our plugin function.
$.fn.hilight.defaults = {
foreground: "red",
background: "yellow"
};

调用的时候有两种方式改变参数

// Override plugin default foreground color.
$.fn.hilight.defaults.foreground = "blue"; // ... // 方式1.Invoke plugin using new defaults.
$( ".hilightDiv" ).hilight(); // ... // 方式2.Override default by passing options to plugin method.
$( "#green" ).hilight({
foreground: "green"
});

基于Jquery、JqueryUI插件编写的更多相关文章

  1. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  2. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  3. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  4. 基于 jQuery Jcrop 插件的功能模块:头像剪裁

    /** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...

  5. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  6. 基于jquery 移动插件的实现

    引用谢灿勇 地址  http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...

  7. 编写基于jQuery的插件的方法

    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...

  8. 基于jquery分页插件

    今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能:由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的 ...

  9. 自己动手写插件底层篇—基于jquery移动插件实现

    序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...

  10. 基于jQuery的插件

    jQuery Validation 验证框架 jQuery Form Ajax表单插件 jQuery UI插件 Easy UI

随机推荐

  1. ExtJS笔记 Ext.data.Model

    A Model represents some object that your application manages. For example, one might define a Model ...

  2. WPF部署问题 解决:The application requires that the assembly...be installed in the GAC

    vs-->引用-->找到问题类库-->邮件属性--->特定版本-->false done

  3. WP8.1 windows phone 8.1 二次退出

    public MainPage() { HardwareButtons.BackPressed += HardwareButtons_BackPressed; //注册后退键 } private vo ...

  4. 弱引用?强引用?未持有?额滴神啊-- Swift 引用计数指导

    ARC ARC 苹果版本的自动内存管理的编译时间特性.它代表了自动引用计数(Automatic Reference Counting).也就是对于一个对象来说,只有在引用计数为0的情况下内存才会被释放 ...

  5. Android 自定义RecyclerView 实现真正的Gallery效果

    http://blog.csdn.net/lmj623565791/article/details/38173061

  6. cut用法

    cut命令用来剪下文本文件里的数据,文本文件可以是字段类型或是字符类型. cut - remove sections from each line of files 语法 cut  OPTION... ...

  7. bootstrap入门-1.可视化布局

    下载地址:http://v3.bootcss.com/getting-started/#download   HTML模板: <!DOCTYPE html> <html> &l ...

  8. W3cshool之JavaScript基础

        1.  JavaScript 对大小写敏感 名为 "myfunction"的函数和名为 "myFunction" 的函数是两个不同的函数,同样,变量 & ...

  9. PHP之十六个魔术方法详解

    https://segmentfault.com/a/1190000007250604#articleHeader14

  10. C#实现执行多条SQl语句,实现数据库事务

    C#实现执行多条SQl语句,实现数据库事务 在数据库中使用事务的好处,相信大家都有听过银行存款的交易作为事务的一个例子.事务处理可以确保除非事务性单元内的所有操作都成功完成,否则不会永久更新面向数据的 ...