封装和优化插件

--封装插件

(function($){

　　//自定义插件代码

})(jQuery)

---------------

(function($){

　　$.fn.extend({

　　　　//函数列表

　　})

})(jQuery)

 <body>

     <div>div元素</div>

     <p>p元素</p>

     <span>span元素</span>

     <script src="../jquery-1.11.3.min.js"></script>

     <script>

         (function($){

             $.fn.extend({

                 color:function(options){

                     $.extend({

                         bcolor:"white",

                         fcolor:"black"

                     },options);

                     return this.each(function(){

                         $(this).css('color',options.fcolor);

                         $(this).css('background',options.bcolor);

                     })

                 }

             })

         })(jQuery);

         $(function(){

             $("p").color({

                 bcolor:"blue",

                 fcolor:"red"

             })

         })

     </script>

 </body>

优化插件

用户要发布自定义的插件，应该保证插件的开放性和封闭性

1.允许定义默认设置

把其中的参数默认值作为$.fn.color对象的属性单独设计，然后借助jQuery.extend()覆盖原来的参数选项即可。

在color()函数中，$.extend()方法能够使用参数options覆盖默认的default属性值，如果没有options值，那就使用

default属性值

 <script src="../jquery-1.11.3.min.js"></script>

     <script>

         (function($){

             $.fn.extend({

                 color:function(options){

                     var defaults={

                         bcolor:"white",

                         fcolor:"black"

                     };

                     $.extend(defaults,options);

                     this.each(function(){

                         $(this).css('color',options.fcolor);

                         $(this).css('background',options.bcolor);

                     });
　　　　　　　　　　　　　  return this;

                 }

             })

         })(jQuery);

         $(function(){

             $("p").color({

                 bcolor:"blue",

                 fcolor:"red"

             })

         })

     </script>

 </body>

插件设计基本格式

 <script>

    (function($){

             $.fn.插件名=function(options){

                 var defaults={

                 };

                 var options=$.extend(defaults,options);

                 return this.each(function(){

                 })

             }

    })(jQuery);

 </script>
 <script>

     (function($){

         $.fn.extend({

             tab:function(options){

                 var defaults={

                 }

                 var options=$.extend(defaults,options);

                 return this.each(function(){

                 })

             }

         })

     })(jQuery);

 </script>

jQuery封装和优化的更多相关文章

  1. asp.net mvc 自定义pager封装与优化

    asp.net mvc 自定义pager封装与优化 Intro 之前做了一个通用的分页组件,但是有些不足,从翻页事件和分页样式都融合在后台代码中,到翻页事件可以自定义,再到翻页和样式都和代码分离, 自 ...

  2. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  3. jQuery选择器的优化选择

    jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]");  ...

  4. jquery封装常用方法

    var git = { //true表示格式正确 checkEmail: function (str) { -]{,})(\S*)/g) == null) { return false; } else ...

  5. jquery选择器效率优化问题

    jquery选择器效率优化问题   jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...

  6. 不借助jquery封装好的ajax，你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  7. jquery封装的选项卡

    ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...

  8. 自己使用Jquery封装各种功能分享

    自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...

  9. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

随机推荐

  1. Linux sed命令使用方法

    sed(Stream Editor)是Linux中文本处理使用非常广泛的工具,可以对文件内容进行替换.删除.新增.选取特定行等功能.下面通过sed常用实例介绍sed命令的使用方法. sed基本语法 s ...

  2. Android Bug：Error:com.android.dex.DexException: Multiple dex files define Landroid/support/design/widget/CoordinatorLayout$LayoutParams;

    项目编译通过,运行时出现异常: Error:com.android.dex.DexException: Multiple dex files define Landroid/support/desig ...

  3. pytest 单元测试

    pytest简介 pytest 是python的一种单元测试框架,它非常的简洁.清晰. pytest 安装 pip install -U pytest 查看pytest版本 pytest --vers ...

  4. hexo发表博文

    3.4创建博客文章与发布 在hexo 目录下终端命令: $ hexo new '文件名' //会在source/_posts创建一个文件名.md文件 这就可以使用markdown编辑器开始写自己的博客 ...

  5. mysql 5.7.3.0-m13安装教程

    安装mysql百度经验地址:(默认安装,除了选择不更新和选择保存路径,其它基本是下一步下一步) http://jingyan.baidu.com/article/7e440953d6f0702fc1e ...

  6. Oracle Error

    1. TNS:listener does not currently know of service requested in connect descriptor 数据库连接出错

  7. RabbitMQ的安装与管理控制台设置

    首先下载安装Erlang环境:http://www.erlang.org/downloads: 再下载安装RabbitMQ:http://www.rabbitmq.com/download.html: ...

  8. linux移植常见问题

    *************1.给板子添加新的驱动**************** 一.       驱动程序编译进内核的步骤在 linux 内核中增加程序需要完成以下三项工作:1. 将编写的源代码复制 ...

  9. sass 的安装 编译 使用

    1.使用node 的command 运行命令: gem install sass2.cmd检查是否安装成功 sass -v 如果成功了 可以看见版本信息Sass 3.5.5 ...3. 创建.scss ...

  10. MySQL driver for Node

    [MySQL driver for Node] 1.安装 2.一个示例 From this example, you can learn the following: Every method you ...