关于jquery插件的那点事！

;(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代码片段