现在Javascript库海量，流行的也多，比如jQuery，YUI等，虽然功能强大，但也是不万能的，功能不可能涉及方方面面，自己写一个的JS库是对这些的补充，很多也比较实用，把应用到项目中中去也比较方面，这也是对工作的一些积累，也加深对知识的理解。

 (function(jQuery){

     /**

      * 元素居中

      * @return {[type]}

      */

     jQuery.fn.mCenterDiv = function (){

         this.css("position", "absolute");

         this.css("border", "1px solid #ccc");

         this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");

         this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");

         this.show(100);

         return this;

     };

 })(jQuery);

html部分代码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

     .box{width:400px;height:400px;background:pink;}

     </style>

 </head>

 <body>

 <div class="box"></div>

 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript" src="js.js"></script>

 </body>

 </html>

 <script type="text/javascript">

     $(function(){

         $(".box").mCenterDiv();

         $(window).resize(function(){

             $(".box").mCenterDiv();

         });

     });

 </script>

封装一个jquery库的更多相关文章

  1. 封装一个postMessage库，进行iframe跨域交互

    这是近期个人在开发chrome插件时的其中一个小总结.还有很多没有总结出来.因为目前插件还在迭代中,(herry菌插件,用于B站C站),属于个人业余的一个小项目.还有很多功能没有实现,以及还需要再看能 ...

  2. 如何封装一个Cookie库

    由Cookie详解我们已经了解到了Cookie是为了实现有状态的基于HTTP协议的应用而存在的.一个Cookie的由以下几个部分组成: //设置cookie的格式和Set-Cookie头中使用的格式一 ...

  3. 优雅的创建一个JavaScript库

    这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不 ...

  4. 仿照jquery封装一个自己的js库（一）

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  5. 仿照jquery封装一个自己的js库

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...

  6. [js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)

    所谓字符串工具库就是利用javascript面向对象的知识封装一个常用的字符串处理方法库,首先给这个库起个名字,好吧就叫ghostwu.js. 看下ghostwu.js的整体架构: ; (functi ...

  7. 你不需要 jQuery，但你需要一个 DOM 库

    写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以 ...

  8. 如何优雅的封装一个DOM事件库

    1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级 ...

  9. 像jQuery那样，采用链式方法，封装一个方法：CSS（）

    主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> &l ...

随机推荐

  1. docker (2) 通用/镜像命令

    原文:docker (2) 通用/镜像命令 Docker 的常用命令: (1)Docker  help 命令: 可以查看有关docker的所有操作命令: (2)docker COMMAND -–hel ...

  2. JQuery.extend扩展实现同步post请求

    有时需要在jQuery中实现同步post请求,而jquery自带的是异步,需要通过JQuery.extend扩展. 支持ie和firefox,方法转载而来.需要在submit前将form.append ...

  3. Java JDK5.0新特性

    JDK5.0新特性 虽然JDK已经到了1.8 但是1.5(5.0)的变化是最大的 1. 增强for循环 foreach语句 foreach简化了迭代器 作用: 对存储对象的容器进行迭代 (数组, co ...

  4. （C#）设计模式之装饰模式

    1.装饰模式 动态的给一个对象添加一些额外的职责,就添加功能来说,装饰模式比生成子类更加灵活.*装饰模式是为已有功能动态添加更多功能的一种方式.*装饰模式将原有类中的核心职责与装饰功能分离.简化了原有 ...

  5. CSP201503-2：数字排序

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  6. JavaScript 作用域链范例

    函数在执行的过程中,先从自己内部找变量 如果找不到,再从创建当前函数所在的作用域去找,以此往上 注意找的是变量的当前状态 范例 例1 var a=1 function fn1() { function ...

  7. 【第四章】Shell 条件测试表达式

    shell中条件测试的三种格式: 格式1: test 条件表达式格式2: [ 条件表达式 ]格式3: [[ 条件表达式 ]] 使用test: [root@host- ~]# test -f file ...

  8. 【MySQL解惑笔记】忘记MySQL数据库密码

    破解MySQL密码 一.MySQL5.7.5之前 只要有系统root密码就可以破解: [root@host- ~]# vim /etc/my.cnf //在配置文件中加入如下内容 [mysqld] s ...

  9. 关于wcf服务编译平台是x86, 运行平台是x64时，如何调试

    关于调试CTDC项目中的的 wcf服务时注意事项: 因为wcf项目引用的的 x86的程序集,所以wcf生成的目标平台为x86.故在64系统上调试需要执行下面的脚本 具体操作步骤: 1. 必须使用201 ...

  10. leetcode个人题解——two sum

    这是leetcode第一题,通过较为简单. 第一题用来测试的,用的c,直接暴力法过, /** * Note: The returned array must be malloced, assume c ...