jQuery扩展功能

源码如下:

/*!
* 说明:Jquery库扩展
* 创建时间: leo 2016-8-4 * 更新时间:2016-8-5
*/

(function (window, jQuery, undefined) {
    jQuery.extend({

        /*日期时间处理*/
        // data参数的格式为日期格式
        date: {
            // 添加/减去月份  num为正就是加  为负就是减
            countMonth: function(date, num){
                var oDate, oMonth, oDay;
                oDate  = new Date(date);
                oDay   = oDate.getDate();
                oDate.setDate(1);
                oDate.setMonth(oDate.getMonth() + num);
                oMonth = oDate.getMonth() + 1;
                oDay   = $.date.getLastDay(oDate.getFullYear(), oDate.getMonth() + 1);
                return oDate.getFullYear() + ‘-‘ + (oMonth < 10 ? ‘0‘ : ‘‘) + oMonth + ‘-‘ + (oDay < 10 ? ‘0‘ : ‘‘) + oDay;
            },

            // 获取最后一天
            getLastDay: function(year, month){
                var oDt;
                oDt = new Date(year, month - 1, ‘01‘);
                oDt.setDate(1);
                oDt.setMonth(oDt.getMonth() + 1);
                return new Date(oDt.getTime() - 1000*60*60*24).getDate();
            },

            // 计算 date1 - date2 得到相差天数
            countDay: function (date1, date2) {
                return parseInt(Math.abs(new Date(date1) - new Date(date2)) / 86400000);   //把相差的毫秒数转换为天数
            },
        },

        /*操作*/
        action: {
            // 指定 setTimeout 执行的次数  默认时间1秒  次数5次
            setTimeoutWidthNum: function (fun, time = 1000, num = 5) {
                if (fun != null) {
                    setTimeout(function () {
                        fun();
                        num --;
                        if (num > 0)
                            $.action.setTimeoutWidthNum(fun, time, num);
                    }, time);
                }
            },
        },

        //定位
        position: {
            //使页面元素居中  isTure1代表是否左右居中  isTure2代表是否垂直居中  默认上下垂直居中
            center: function (el, isTure1 = true, isTure2 = true) {
                var obj = $(el);
                if (obj.length > 0) {
                    obj.each(function () {
                        var _this, oW, oH;
                        _this = $(this);
                        oW    = _this.width();
                        oH    = _this.height();
                        _this.css(‘position‘, ‘absolute‘);
                        if (isTure1) _this.css({ left: ‘50%‘, marginLeft: - oW / 2 });
                        if (isTure2)  _this.css({ top: ‘50%‘, marginTop: - oH / 2 });
                    })
                }
            }
        },

        /*浏览器*/
        browser: {
            // 设置名称为name 值为value的Cookie  value为空就移除Cookie  保存时间默认3天
            setCookie: function (name, value, time = 3 * 24 * 60 * 60 * 1000) {
                if (value == ‘‘) time = 0;
                var expdate = new Date();   //初始化时间
                expdate.setTime(expdate.getTime() + time);   //时间
                document.cookie = name + "=" + value + ";expires=" + expdate.toGMTString() + ";path=/";
            },

            // 获取cookie的value
            getCookie: function (cookieName) {
                var cookieValue, cookieStartAt, cookieEndAt;
                cookieValue   = document.cookie;
                cookieStartAt = cookieValue.indexOf("" + cookieName + "=");
                if (cookieStartAt == -1) cookieStartAt = cookieValue.indexOf(cookieName + "=");
                if (cookieStartAt == -1) {
                    cookieValue = null;
                }else {
                    cookieStartAt = cookieValue.indexOf("=", cookieStartAt) + 1;
                    cookieEndAt   = cookieValue.indexOf(";", cookieStartAt);
                    if (cookieEndAt == -1) cookieEndAt = cookieValue.length;
                    cookieValue = unescape(cookieValue.substring(cookieStartAt, cookieEndAt));//解码latin-1
                }
                return cookieValue;
            },
        },
    })
})(window, jQuery)

引入时需要先引入jquery.js,如下:

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="leo.js"></script>

使用时直接调用,如下:

console.log($.date.countMonth(‘2015,10,30‘, 4));          // 2016-02-29
console.log($.date.countMonth(‘2015,10-30‘, -8));         // 2015-02-28
console.log($.date.countDay(‘2016-8/2‘,‘2016,7-20‘));      // 13

var n = 0;
$.action.setTimeoutWidthNum(func);                  // 默认调用5次
function func(){
    console.log(n);                           // 0, 1, 2, 3, 4
    n ++;
}

$.position.center(‘#box‘);                        // 上下垂直居中$.position.center(‘#box‘, true, false);                 // 左右居中$.position.center(‘#box‘, false);                     // 上下居中
$.browser.setCookie(‘uname‘, ‘leo‘);    
console.log($.browser.getCookie(‘uname‘));             // leo
$.browser.setCookie(‘uname‘,‘‘);
console.log($.browser.getCookie(‘uname‘));             // null

本人会持续更新,谢谢支持 \(^o^)/~

时间: 2024-10-26 08:56:22

jQuery扩展功能的相关文章

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/jquery-ui.min.css" rel="stylesheet" /> <script src="~/S

jQuery内核详解与实践读书笔记1:原型技术分解2

上一篇已经搭建了一个非常简陋的jQuery框架雏形,如没有阅读搭建过程,请先阅读<jQuery内核详解与实践读书笔记1:原型技术分解1>初始搭建过程.接下来,完成书中介绍的剩下三个步骤: 7. 延续--功能扩展 jQuery框架是通过extend()函数来扩展功能的,extend()函数的功能实现起来也很简单,它只是吧指定对象的方法复制给jQuery对象或jQuery.prototype对象,如下示例代码就为jQuery类和原型定义了一个扩展功能的函数extend(). 1 var $ = j

(转)整体把握jQuery -jQuery 的原型关系图

整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn |来自: 博客园| 评论: 0 摘要: 一幅图展示 jQuery 中各对象之间的关系,这就是很多人想要的最直观的总结 jQuery 的方式.在这篇文章中,一幅画展示整个 jQuery 的核心内容,并逐一解释. ...        若干个月前,看到一篇文章,内容很简单,就是一幅图,展示的是 jQu

看了就很快学会jQuery

一.jQuery简介与第一个jQuery程序 1.1.jQuery简介 1.2.jQuery特点 1.3.jQuery版本 1.4.获得jQuery库 1.5.第一个jQuery程序 二.jQuery对象和DOM对象 2.1.DOM对象 2.2.jQuery对象 2.3.DOM转换成jQuery对象 2.4.jQuery对象转换成DOM对象 2.5.DOM对象与jQuery对象区别 三.常用选择器 3.1. 选择器和包装集 3.2.   基本选择器 3.2.1.通过id获取元素 3.2.2.通过

jquery与js的区别与基础操作

一.什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript.CSS.DOM和Ajax于一体的强大功能.它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐. JQuery的优点:小巧.方便.功能强大.插件丰富.开源.免费. 二.Jquery的功能和优势 jQuery 作为 Ja

jquery对标签属性操作

jquery中添加属性和删除属性: $("#2args").attr("disabled",'disabled'); $("#2args").removeAttr("disabled"); 问题背景: 选择“选项1”是,“两个参数”这个单选按钮有效. 选择“选项2”时,让“两个参数”的这个单选按钮无效. 代码: <!DOCTYPE> <html > <head> <meta chars

JQuery的概述

一.什么是 jQuery 1.jQuery是一个JavaScript库,jQuery 极大地简化了 JavaScript 编程.它通过封装原生的JavaScript函数得到一整套定义好的方法. 2.它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入jQuery已经集成了JavaScript.CSS.DOM和Ajax于一体的强大功能. 3.它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐.主旨:以更少的代码.实现更多的功能 二.jQuery

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制).Form Validator(表单验证).Rangeinput(范围选择).Dateinput(日期选择)等众多功能.jQuery Tools 提供了高自定义的API接口,能够帮助开发者非常容易的实现所需要的功能,带给用户更佳的使用体验. 相比 jQuery UI,jQuery Tools 提供