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

Posted jimmy.wang123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将Js代码封装成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>

封装完毕!

以上是关于如何将Js代码封装成Jquery插件的主要内容,如果未能解决你的问题,请参考以下文章

将jquery框架的代码转换成js代码如何转换?

原生JS封装AJAX

原生js怎么封装插件

JQuery分页插件封装(源码来自百度,自己封装)

jQuery 《基础整合》 jQuery插件jQueryAPI查询网站

[XJBG系列] 封装一下jquery.ajax当插件吧,为了少些几行代码