js封装JQ库为插件

//在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件
//在jQuery匿名函数中, 采用对象.属性 = 函数的方式创建jQuery插件
(function ($) {
    jQuery.extend({
        jia: function (a, b) {
            return a + b;
        },
        jian: function (a, b) {
            return a < b ? b - a : a - b;
        }
    });
    $.sub = {
        sheng: function (a, b) {
            return a * b;
        },
        chu: function (a, b) {
            return a < b ? b / a : a / b;
        }
    }
    jQuery.fn.Insert = function (a) {
        alert(a);
    }
})(jQuery)
    <script type="text/javascript" src="~/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="~/JQTest.js"></script>
    <script type="text/javascript">
        function btn_click() {
           var a = prompt("请输入一个数字:");
           var b = prompt("请输入一个数字:");
           var A = prompt("请输入一个数字:");
           var c = jQuery.jia(a, b);
           var d = jQuery.jian(a, b);
           var e = $.sub.sheng(a, b);
           var f = $.sub.chu(a, b);
           alert("相加:" + c + ",相减:" + d + ",相乘:" + e + ",相除:" + f );
           $.fn.Insert("啦啦");
        }
    </script>

关于”call”

    语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])

    定义:调用一个对象的一个方法,以另一个对象替换当前对象。

    说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

关于”this”

   在插件的方法中,可能有用到指向插件的this、和指向事件触发的this,所以事件触发的this用event来获取:event.cuerrntTarget

    • event.currentTarget:指向事件所绑定的元素,按照事件冒泡的方式,向上找到元素
    • event.target:始终指向事件发生时的元素

constructor属性:始终指向创建当前对象的构造函数

   每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数

时间: 2024-10-20 14:30:06

js封装JQ库为插件的相关文章

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

js封装成插件

由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了下如何封装.....虽然之前看了很多源码,但是感觉就算了解也是野路子..... 什么是封装呢? 我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己包饺子是一样的,但是

iOS开发 非常全的三方库、插件、大牛博客等等

UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明.具体使用看"使用方法". (国人写) XHRefreshControl- XHRefreshControl 是一款高扩展性.低耦合度的下拉刷新.上提加载更多的组件.(国人写) CBStoreHo

iOS:iOS开发非常全的三方库、插件、大牛博客等等

iOS开发非常全的三方库.插件.大牛博客等等 github排名:https://github.com/trending, github搜索:https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS UI 下拉刷新 EGOTableViewPullRefresh- 最早的下拉刷新控件. SVPullToRefresh- 下拉刷新控件. MJRefresh- 仅需一行代码就可以为UITableView或

iOS开发常用三方库、插件、知名博客等等

TimLiu-iOS   Swift版本点击这里 欢迎加入QQ交流群: 594119878 介绍 这是一个用于iOS开发的各种开源库.开源资料.开源技术等等的索引库. github排名 https://github.com/trending,github搜索:https://github.com/search 使用方法 根据目录关键字搜索,记得包含@,以保证搜索目录关键字的唯一性. 问题反馈 期待大家和我们一起共同维护,同时也期望大家随时能提出宝贵的意见(直接提交issues即可).请广大网友只

iOS 第三方库、插件、知名博客总结

用到的组件1.通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好化时间 MBProgressHUD一款提示框第三方库 MWPhotoBrowser一款简单的 iOS 照片浏览控件 CTAssetsPickerController一个选择器组件, 支持从用户的相片库选择多张照片和视频. QB

js常用工具库XCLJsTool v1.0发布

最近有空,整了一个js的工具库,还没有正式用于项目中,自己也没有时间写测试用例,想了一下,还是贴出来给大家看看,如果有问题,请留言,非常感谢!项目我放在了github上面,会经常更新的,过段时间会发布一版! /** * 欢迎使用本程序,您可以任意修改.复制.分享本程序所有代码,只需要保留本注释即可,谢谢! * 项目地址:<span style="color:#ff0000;">https://github.com/xucongli1989/XCLJsTool</spa

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>