关于jquery插件的那点事!

原创 2016年05月30日 15:18:25
;(function ($) {
    var Beauty = function (ele, opt) {
        this.$element = ele,
            this.defaults = {
                "color": "red",
                "fontSize": "12px"
            },
            //将一个空对象作为第一个参数
            this.options = $.extend({}, this.defaults, opt);
    };

    Beauty.prototype ={
        beautiful : function(){
            return this.$element.css({
                "color":this.options.color,
                "fontSize": this.options.fontSize
            });
        }
    }
    $.fn.extend({
        myPlugin : function(options){
            var beautifier = new Beauty(this,options);
            return beautifier.beautiful();
        }
    })
})(jQuery);

关于jQuery的小技巧:

  • js中一个数字的字符串与一个数字进行运算会得到一个数字,避免了我们使用parseFloat()函数,方便使用,小技巧一个。
    “5” - 3 = 2;>+ 上述代码中:

>var settings = $.extend({},defaults,option);//将一个空对象作为第一个参数,不然的话会将defaults中的默认值给改变。
>例如下面这种:
>var settings = $.extend(default,option);(不推荐)
>var settings = $.extend({},defaults,option);(推荐)

注:有几个小点:

用自调用匿名函数包裹你的代码

;(function($){
    //此处写你的插件代码
})(jQuery)

我们知道JavaScript中无法用花括号方便地创建作用域,但函数却可以形成一个作用域,域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中,那么就不会污染全局命名空间,同时不会和别的代码冲突。

如上面我们定义了一个Beautifier全局变量,它会被附到全局的window对象上,为了防止这种事情发生,你或许会说,把所有代码放到jQuery的插件定义代码里面去啊,也就是放到$.fn.myPlugin里面。这样做倒也是种选择。但会让我们实际跟插件定义有关的代码变得臃肿,而在$.fn.myPlugin里面我们其实应该更专注于插件的调用,以及如何与jQuery互动。

所以保持原来的代码不变,我们将所有代码用自调用匿名函数包裹。

参考的博客:让你的jQuery提升一个台阶

jquery优化:

尽量使用javascript的原生来代替jquery的函数
例如:

var $scr = $("#scr");//jquery方式
#scr.click(function(){
    if($scr.is(":checked")){//jquery方式
    }
})

var #cr = $("#cr");
var cr j= $cr.get(0);
#cr.click(function(){
if(cr.checked){//原生的javascript方式判断
}})

    $(this).css("color","red");
    优化后:
    this.style.color = "red" ;

    $("<p></p>");
    优化后
    $(document.createElement("p"));

jQuery技巧

  • 配置的回调函数字符串传到插件如何执行
  • >要注意的是 action:function(){ … }
  • >此处一定不能有”“,不然函数无法执行还要后续处理
"关闭": {
                    style: "close",
                    action: function() { alert(1) },
                    onLoad: "",
                    onClose: true,
                    onShow: ""

                },

使用

 $btn.on("click", function () {
            if (opt.action) {
            //函数字符串后面加上()就可以执行此函数了
                (opt.action)();
            }
            new PopBox(this, options).close();
        })
  • 禁用页面邮件菜单
$(document).ready({
    $(document).bind("contextmenu",function(e){
    return false;
    })
})
  • 新窗口打开页面
以http开头的将会在新窗口打开
$("a[href^='http://']").attr("target","_blank");
  • 返回头部滑动动画
Jquery.fn.scrollTop = function(speed){
var targetOffset = $(this).offset().top;
$("html.body").stop().animal({scrollTop:targetOffset},speed);
return this;
}
//how use
$("#goheader").click(function(){
    $(body).scrollTo(500);
    return false;
})
  • 判断判断元素是否存在
$(document).ready(function(){
    if($("id").length){
    }
})
  • 设置div在屏幕中央显示
$(document).ready(functionn(){
    jQuery.fn.center = function(){
    this.css("position","absolute")
    this.css("top","$(window).height()-this.height())/2+$(window).scrollTop()"+"px");
    this.css("left","$(window).width()-this.weight())/2+$(window).scrollTop()"+"px");
    return this;
    }
})

+回车提交表单

$(document).ready(function(){
    $("input").keyup(function(e){
        if(e.which == "13"){
            //回车提交
        }
    })
})
  • 设置全局Ajac参数
$("#load").ajaxStart(function(){
    showLoading();//显示loading
    disableButtons();//禁用按钮
})
$("#load").ajaxComplete(function(){
    hideLoading();//隐藏loading
    enabvleButtons();//启用按钮
})
  • 使用siblings来选择同辈元素
//不这样做
$("#nav li").click(function(){
    $("#nav li").removeClass("active");
    $(this).addClass("active");
})
//替代做法
$("#nav li").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
})
  • 切换复选框
var tog = false;
$("button").click(function(){
    $("input[type='checkbox']").attr("checked",!tog);
    tog = !tog;
})
  • 为table里面的td元素绑定click事件,不管td是一直存在还是动态创建的
//jQuery 1.4.2之前使用的
$("table").each(function(){
    $("td",this).live("click",function(){
        $(this).toggleClass("hover");
    })
})

//jQuery 1.7.1 使用的方式
$("table").on("click","td",function(){
    $(this).toggleClass("hover");
})

高效Web开发的10个jQuery代码片段

版权声明:本文为博主原创文章,未经博主允许不得转载。

从from or form说起,谈谈那些关于bug的事情

这篇博客,从我前段时间开发项目中出现的一个bug说起。一个把from写成form的bug说起                 一个不起眼的错误,可能是手误,可能是长期敲错导致坏习惯,也...
  • lfsf802
  • lfsf802
  • 2011年02月10日 08:40
  • 5857

网络的那些事之IP

在此,我就用比较通俗的语言说一说关于IP的那些事,不一定全面,有的可能我的理解不正确,如果有不当之处,希望你可以通知我,一起进步。 一、IP的概念          IP在这里有两层意思:      ...
  • bingjia103126
  • bingjia103126
  • 2016年11月25日 15:06
  • 144

专访魅族资深架构师:关于实时推送系统的那点事

专访魅族资深架构师 关于实时推送系统的那点事
  • little_walt
  • little_walt
  • 2016年10月08日 17:01
  • 644

《小老爷们那点事儿》终极整理贴 (已完结)

《小老爷们那点事儿》终极整理贴  (已完结) 以下是分帖链接地址 小老爷们那点事儿整理帖之一 http://www.tulaoya.cn/bbs/read.php?tid=4 小老爷们那点事儿整理帖之...
  • metababy
  • metababy
  • 2007年08月24日 13:32
  • 18478

多线程那些事

多线程
  • qq_33344834
  • qq_33344834
  • 2016年07月28日 14:06
  • 207

漫谈程序员系列:让程序员蛋疼的那些事儿

也许你和我一样,讨厌这些……
  • foruok
  • foruok
  • 2015年03月30日 07:34
  • 16184

Java程序员,上班那点事儿

清华大学出版社《Java程序员,上班那点事儿》作者:钟声 章节:1.1小节      我们刚刚进入本书的正题就拿出一个俗不可耐“钱”字来和大家大谈特谈,未免不雅。但是,我还是要在一开始就要说这个问题,...
  • jxf111348
  • jxf111348
  • 2009年08月18日 20:01
  • 430

IT外企那点儿事完整版

第一章:外企也就那么回儿事 (http://blog.csdn.net/forfuture1978/article/details/5547537) 1.1 高薪 1.2 人性化 1.3 浮动工...
  • forfuture1978
  • forfuture1978
  • 2013年09月20日 13:55
  • 5081

TCP关闭连接那点事

               Tcp关闭连接问题及注意 最近一段时间一直在学习阅读mina和nio的源码,也发现了一些问题无法解决,然后重读了一下tcp协议,收获颇多。(这就是带着问题去读书的好处)这...
  • retio
  • retio
  • 2009年12月04日 13:27
  • 1136

我与学姐那点事

[ 爱开发]陪伴你一起成长程序员在他乡创业记:我失业了文 | 洪生鹏1独自回到住处,突然有种伤感,不知不觉就在这座城市八年了。 看看银行账户里的数目,我也有些慌,要是项目不充足,会不会几个月我就关门大...
  • X8i0Bev
  • X8i0Bev
  • 2018年01月25日 00:00
  • 154
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于jquery插件的那点事!
举报原因:
原因补充:

(最多只允许输入30个字)