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

  1.  (function(jQuery){
  2.      /**
  3.       * 元素居中
  4.       * @return {[type]}
  5.       */
  6.      jQuery.fn.mCenterDiv = function (){
  7.          this.css("position", "absolute");
  8.          this.css("border", "1px solid #ccc");
  9.          this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  10.          this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  11.          this.show(100);
  12.          return this;
  13.      };
  14.  })(jQuery);

html部分代码:

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.      .box{width:400px;height:400px;background:pink;}
  8.      </style>
  9.  </head>
  10.  <body>
  11.  <div class="box"></div>
  12.  <script type="text/javascript" src="jquery.js"></script>
  13.  <script type="text/javascript" src="js.js"></script>
  14.  </body>
  15.  </html>
  16.  <script type="text/javascript">
  17.      $(function(){
  18.          $(".box").mCenterDiv();
  19.          $(window).resize(function(){
  20.              $(".box").mCenterDiv();
  21.          });
  22.  
  23.      });
  24.  </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. nio之netty3的应用

    1.netty3是nio的封装版本.在使用上面比nio的直接使用更好.nio简单使用都是单线程的方式(比如:一个服务员服务很多客户),但是netty3的方式不一样的是,引入线程池的方式来实现服务的通信 ...

  2. bbblack的网络socket通信实验

    1. 本次用bbblack作网络的通信实验,对了,这个板子必须装SD卡才能启动吗?板载的4GB eMMC Flash 存储器,eMMC (Embedded Multi Media Card) 为MMC ...

  3. 请求头（request）和响应头（response）

    说一说常见的请求头和相应头都有什么呢? 1)请求(客户端->服务端[request]) GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采 ...

  4. Python简要标准库（2）

    集合 堆 和 双端队列 1.集合 创建集合 s = set(range(10)) 和字典一样,集合元素的顺序是随意的,因此不能以元素的顺序作为依据编程 集合支持的运算 a = set([1,2,3]) ...

  5. opencv-学习笔记(5)形态学转变

    opencv-学习笔记(4)形态学转变 本章讲了几种形态学操作 腐蚀erode 膨胀dilate 开运算MORPH_OPEN 闭运算MORPH_CLOSE 形态学梯度MORPH_GRADIENT 礼帽 ...

  6. POJ 1921 Paper Cut（计算几何の折纸问题）

    Description Still remember those games we played in our childhood? Folding and cutting paper must be ...

  7. js如何处理字符串中带有↵字符

    js或vue中如何处理字符串中带有↵字符 split('\n') 使用split('\n')将字符串分割成数组就行 如果我们在vue中,只需要在页面中绑定变量时操作split('\n')就可以了: & ...

  8. 自测之Lesson8：进程操作

    题目:请解释wait是如何同步父子进程的. 程序代码: #include <stdio.h> #include <unistd.h> #include <sys/type ...

  9. 软件工程 作业part2 采访

    Part 2 采访本课程往届同学(含外校和毕业生). 现代软件工程这门课已经上了好几年了,以前有很多学生做过团队项目(说不定包括本校的学生),请你们找一个以前的团队采访一下. 我采访的是2016级于淼 ...

  10. MyBatis 基本构成与框架搭建

    核心组件 SqlSessionFactoryBuilder (构造器) 根据配置信息(eg:mybatis-config.xml)或者代码来生成SqlSessionFactory. SqlSessio ...