jquery简单插件制作(fn.extend)完整实例

本文实例讲述了jquery简单插件制作方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <script type="text/javascript" src="jquery.js"></script>
  <title>jquery简单的插件制作</title>
  <script type="text/javascript">
  (function ( $ ) {
    $.fn.greenify = function ( options) {
      var settings = $.extend({
       color:"#556b2f",
       backgroundColor:'#000',
       padding:'20px'
      }, options );
      return this.css( {
        color:settings.color,
        backgroundColor : settings.backgroundColor,
        padding : settings.padding
      });
    };
  }( jQuery ));
  $(document).ready(function(){
    $("div").greenify({
      color:"#000",
      backgroundColor:'#ccc',
      padding:'50px'
    })
  });
  </script>
</head>
<body>
<div id="accordion">
jquery简单的插件制作
</div>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery $.extend()用法总结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. 复制代码 代码如下: <span style="font-size:18px;"><html> <head>

  • jQuery.extend 函数及用法详细

    jquery.extend函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

  • jQuery的extend方法【三种】

    jQuery的extend方法【三种】

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩展静态方法 用法二:$.fn.extend({})  插件,对jQuery.prototype进行扩展,提到插件那么就得说一下另一种方法$.fn.method = function(){} 1. $.fn.method = function(){} 可以定义一个方法            2 . $

  • 浅谈jquery.fn.extend与jquery.extend区别

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的"静态方法",之后便可以在引入 jQuery 的地方,使用这个方法了. 2.jQuery.fn.extend(object); 对jQuer

  • jQuery插件扩展extend的简单实现原理

    相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {

  • jQuery中extend()和fn.extend()方法详解

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>   

  • Jquery中扩展方法extend使用技巧

    在使用Jquery开发的过程中,extend是常用的参数处理函数,特别是对默认值的使用. Jquery的扩展方法原型是: var v=$.extend(dest,src1,src2,[,src3...]); 作用是把src1,src2,src3合并到到dest中并返回合并后的dest. 但是在使用过程中,默认值往往是不能被改变的, 如下: var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolo

  • Jquery实现$.fn.extend和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法 $.extend是扩展常规方法,是$的静态方法. 我们之前写的代码看一下: (function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(sel

  • 分析了一下JQuery中的extend方法实现原理

    分析了一下JQuery中的extend方法实现原理

    很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理.目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正.谢谢! 下面是JQuery.extend方法源代码: 复制代码 代码如下: jQuery.extend = jQuery.fn.extend = function() {      var options, name, src, copy, copyIsArray, clone,          target =

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • jQuery继承extend用法详解

    jQuery继承extend用法详解

    本文实例为大家jQuery继承extend用法,供大家参考,具体内容如下 js代码 //直接基于jQuery的扩展,判断是否为空 $.isBlank = function(obj){ return(typeof(obj)=='undefined'||obj==''||obj==null); } //直接基于jQuery的扩展,去除html标签,保留内容 $.htmlContent = function(tag){ var reTag = /<(?:.|\s)*?>/g; return tag.

随机推荐