现在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. 北京Uber优步司机奖励政策(2月22日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. 长沙Uber优步司机奖励政策(1月4日~1月10日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 【LG1527】[国家集训队]矩阵乘法

    [LG1527][国家集训队]矩阵乘法 题面 洛谷 题解 我也不知道为什么取个这样的名字... 其实就是区间\(kth\)扩展到二维 还是用整体二分搞啦,把树状数组换成二维的 其他的基本没有什么差别 ...

  4. 在线大数据cdh迁移,从公有云迁移到私有云

    1.添加新节点 2.迁移hdfs和hbase数据: 3.迁移源节点各个服务到新节点: 4.利用HA,包括hdfs,hbase master,resourcemanager的ha实现在线迁移: 5.数据 ...

  5. Android 打印log 在logcat 看不到

    今天调试一个问题,因为是插件,只能通过打印log 定位问题. 但是打印了log 一直没有看到. 代码如下: Log.d("","aaaa24"); 后来发现是需 ...

  6. Error starting mongod. /var/run/mongodb/mongod.pid exists.启动mongodb报错

    linux上安装mongodb,启动时报上面的错,解决如下: 解决方法: 1.删除mongod.pid文件 rm -rf /var/run/mongodb/mongod.pid 2.修改/tmp/mo ...

  7. 《绝地求生大逃杀》BE错误怎么办 BE服务未正常运行及安装失败解决方法

    <绝地求生大逃杀>BattlEye Launcher是游戏的反作弊程序,也是启动过程中做容易出现错误的,今天小编带来“爆锤吧务”分享的<绝地求生大逃杀>BE服务未正常运行及安装 ...

  8. Clojure基础课程2-Clojure中的数据长啥样?

    本文来自网易云社区 作者:李诺 " Clojure is elegant and pragmatic; it helps me focus more on solving business ...

  9. uvaoj455Periodic Strings(枚举)

    A character string is said to have period k if it can be formed by concatenating one or more repetit ...

  10. 三个线程ABC,交替打印ABC

    转载与:https://www.cnblogs.com/x_wukong/p/4009709.html 创建3个线程,让其交替打印ABC . 输出如下:  ABCABCABCABC. 方法:使用syn ...