如何将Js代码封装成Jquery插件

很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈。

代码如下

这是一个自定闪烁打印文字的Jquery特效

HTML代码如下:

<div id="code">
  <p>/**</p>
  <p>*2014-2-12</p>
  <p>*代码自动闪烁输入</p>
  <p>*/</p>
  2014-2-14,I want to say:<br />
  Baby, I love you forever!<br />
</div>

Js代码:

function typewriter(id){
  var $ele = document.getElementById(id);
  var str = $ele.innerHTML, progress = 0;
  $ele.innerHTML = ‘‘;
  var timer = setInterval(function() {
    var current = str.substr(progress, 1);
    if (current == ‘<‘) {
      progress = str.indexOf(‘>‘, progress) + 1;
    } else {
      progress++;
    }
    $ele.innerHTML =str.substring(0, progress) + (progress & 1 ? ‘_‘ : ‘‘);
    if (progress >= str.length) {
      clearInterval(timer);
    }
  }, 75);
}

调用方法:

<script type="text/javascript">
        $(function () {
            typewriter("code");
        });
    </script>

下面开始对js代码进行Jquery插件封装了

(function ($) {
    $.fn.typewriter = function () {
        var $ele = $(this), str = $ele.html(), progress = 0;
        $ele.html(‘‘);
        var timer = setInterval(function () {
            var current = str.substr(progress, 1);
            if (current == ‘<‘) {
                progress = str.indexOf(‘>‘, progress) + 1;
            } else {
                progress++;
            }
            $ele.html(str.substring(0, progress) + (progress & 1 ? ‘_‘ : ‘‘));
            if (progress >= str.length) {
                clearInterval(timer);
            }
        }, 75);
    };
})(jQuery);

调用方法:

<script type="text/javascript">
        $(function () {
            $("#code").typewriter();
        });
    </script>

封装完毕!

时间: 2024-10-05 15:19:01

如何将Js代码封装成Jquery插件的相关文章

MyEclipse安装JS代码提示(Spket插件)

近期需要大量使用JS来开发,但是MyEclipse2014自带的JS编辑器没有代码提示的功能,开发效率有点低,所以安装了一个Spket的插件,过程非常简单,SVN插件的安装比这个更简单. Spket插件的安装: 首先下载插件:http://download.csdn.net/detail/u012909091/7335891 解压文件,然后将解压后的文件全部复制到MyEclipse安装目录下的dropins包中,重启MyEclipse.(SVN的安装只需要将文件解压,然后放在dropins目录下

将代码转化成jQuery插件

将类似的jQuery代码,转化为插件,可以提高代码的重用性,并能够有效的组织代码. (function($){ $.fn.yourPluginName=function(){ //Your code goes here return this; } })(jQuery) 总结以便之后查阅. 将代码转化成jQuery插件

自己做jQuery插件:将audio5js封装成jQuery语音播放插件

日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器. 其主要特性: 拥有完整API来控制“加载”,“播放”,“暂停”,“音量”和“查找” 并且可以得到播放内容的具体相关信息 不依赖任何类库 兼容版本浏览器,包括:IE8, IE9, Chrome

封装第三方jquery插件

需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件.因为插件在 AngularJS 之外对表单值进行更改,并不能即时反应到 Model 中.例如我们用得比较多的 jQueryUI datepicker 插件,当你选中一个日期后,插件会将日期字符串填到 input 输入框中.View 改变了,却并没有更新 Model,因为$('.datepicker').datepicker(); 这段代码不属于 AngularJS 的管理范围.我们需要编写一个directiv

js序列化封装成一个对象,以键值对的方式

类似:Object   {ni: "1", wo: "2", ta: "3", huge: "4", jindong: "5"-} jquery的serialize()方法,得到等值的方式 类似:"ni=1&wo=2&ta=3&huge=4&jindong=5&liukaiwei=6" jquery的serializeArray()方法,得到一个对

原生 JS 代码和用 jQuery 实现效果各有什么优劣势

通过自己的理解再加上自己收集的一些资料总结如下: 各種封裝,主要目的就是爲了省心,拿jq來說: JQ对不同浏览器的事件,DOM对象,都进行了封装,各种操作都可以直接兼容各种浏览器, 要知道, 不同浏览器的区别不仅仅是在CSS里写"-webkit-"还是"filter"的区别, 连事件模型这种底层的东西都不一样= = JQ特有的CSS-LIKE选择器, 链式写法, 封装的各类animate函数, 封装了的异步加载, 都大幅提高了开发效率, 减少重复劳动 JQ用dela

Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)

题外话 这款插件就比較重量级了-.用熟悉了写原生JS的效率要提升非常多--并且,不仅支持JS还包括了nodejs snippet javascript-snippets 插件作者: zenorocha Github地址 : https://github.com/zenorocha/atom-javascript-snippets 内置了丰富的JS snippet . 并且也非常好理解和记忆-耍多了会上手的 安装 在设置中心搜索安装 代码片段(Tab或者Enter补全) Console命令 [cd

!!!常用JS代码块 (jquery)

jquery代码块 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> 取页面参数 //取页面参数 var PAGE = { get:function(_name) { var str0=location.search

被迫使用了坑爹sea.js后如何改造jquery插件

// jquery-plugin-abc define(function(require, exports, module) { var $ = require('$'); // 插件的代码 $.fn.abc = function() {}; }); 详情见 https://github.com/seajs/seajs/issues/971