美文网首页
jquery插件的封装方法

jquery插件的封装方法

作者: DaveWeiYong | 来源:发表于2017-03-03 17:43 被阅读0次

废话不多说 代码撸起来
一 ,js封装方法

function change(){
window.onload = function(){
var box = document.getElementById("box");
box.onclick = function(){
this.style.background = "black";

            };
            //hover事件
            box.onmouseover = function(){
                this.style.background = "blue"
            };
            //双击事件
            box.ondblclick = function(){
                this.style.background = "yellow";
            }
            
    }   

};

调用方法:
<script>
change()
</script>

二,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>

相关文章

  • 从零开始的jQuery插件封装

    jQuery插件简易封装方法。 jQuery插件机制 jQuery.extend( [deep ], target...

  • jQuery插件

    1.jQuery插件分类 封装对象方法的插件 应用最广 封装全局函数的插件 作为jQuery全局函数插件 选择器插...

  • jQuery面试题(一)

    一、手写一个jQuery插件。 例1:封装jQuery对象方法的一个插件(使用jQuery.fn.extend()...

  • JQ 插件

    jquey的插件主要分为3中类型1.封装对象方法的插件2.封装全局函数的插件3.选择器插件 jquery插件的文件...

  • jQuery插件封装

    jQuery插件封装 自定义插件:...

  • jQuery插件封装方法

    资料来源 慕课网全屏切换效果 概述 最近在慕课网上学习奇舞团课程系列--全屏切换效果的视频课程,在学到如何实现jQ...

  • jquery插件的封装方法

    废话不多说 代码撸起来一 ,js封装方法 function change(){window.onload = fu...

  • jQuery扩展插件

    什么是jQuery插件? 扩展jQuery原型对象的一个方法(jQuery插件是jQuery对象的一个方法)jQu...

  • jQuery对象插件编写方法

    jQuery对象插件编写方法 在上一篇文章中,我写到jQuery类插件的编写方法,这个方法是针对jquery本身的...

  • jQuery第一天笔记

    JQuery简介 JQuery常用方法 JQuery中的插件 JQuery简介 JQuery 的发展历史http:...

网友评论

      本文标题:jquery插件的封装方法

      本文链接:https://www.haomeiwen.com/subject/yturgttx.html