jQuery的链式调用是那几个好用,
比如$(“.class”).addClass(“.abc”).siblings().removeClass(“.abc”);
以此写法在导航中点击某个tab修改样式卓殊广阔,链式调用也是jQuery很要紧的特性,话扯得有点远。

jQuery这么热门还有一个重大的原因——可扩充性,它同意大家通过措施来扩展jQuery。

咱俩该怎么样增添jQuery呢?主要可以通过上边2个来伸张:

  • jQuery.extend
  • jQuery.fn

理所当然上边的也等价于:

  • $.extend
  • $.fn

为什么呢?看过jQuery源码的人都知道,在jQuery中这么一种写法:
window.$ = window.jQuery = jQuery;
这里就不详细描述了,想深究的人可以查阅其他的资料
上面开首介绍咋样通过上面的三种艺术已毕大家想要的功力:
  • $.extend
    如若把jQuery当成一个类,$.extend相当于为此类添加了静态方法extend。

我们可以通过$符号调用($.functionName())而不需要选中DOM元素($('.className').functionName())。

万一现在有个要求,大家要求增加一个写日记的函数——日期+错误音讯,我们得以如此写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <script src="jquery.js"></script>
    <script>
        $.extend({
            log: function(message) {
                var now = new Date(),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate(),
                    h = now.getHours(),
                    min = now.getMinutes(),
                    s = now.getSeconds(),
                    time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
                    console.log(time + ' My App: ' + message);
            }
        });
        $.log("出错啦!");
    </script>
</body>
</html>

Chrome浏览器f12,发现输出了:

2016/1/28 15:35:16 My App: 出错啦!

是或不是很不难,再来看看 $.fn.extend。

  • $.fn、
    $.fn等于$.prototype
    宗旨的书写格式如下:

$.fn.pluginName = function(options) {
  //这里写我们想要的效果
}

调用时和上面的不一样,需要操作具体的对象:
$(".ele").pluginName(options);

平等,假使大家想修改某个元素的颜料(颜色不稳定),大家能够这么写:

$.fn.changeColor = function(colorName){
      this.css("color":colorName? colorName : '#000'); 
}

通过上面的写法,提高了代码的复用性,可扩展性也高:
$("span").changeColor();--span标签颜色变为默认的:#000
$("span").changeColor("#f06");--span标签颜色变为默认的:#f06
$("p").changeColor("#f06");--p标签颜色变为默认的:#f06
备考:this指代的是大家在调用该插件时,jQuery采纳器选中的元素。this和prototype 都是js中国和北美洲常主要的定义,希望我们都能多驾驭那样面的学问。

如果我们有如此一个须要,一遍性修改两个样式,且每个样式存在一个对应的默许值。

  • 首先先看这一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <p class="text1">测试文字</p>
    <p class="text2">测试文字</p>
    <script src="jquery.js"></script>
    <script>
        $.fn.changeColor = function(options){
            this.defaults = {
                'color': '#000',
                'fontSize': '14px',
                'fontWeight': 'normal'
            };
            this.opt = $.extend(this.defaults, options);
            console.log(this.defaults);
            this.css({
                'color': this.opt.color,
                'font-size': this.opt.fontSize,
                'font-weight': this.opt.fontWeight
            });
        }
        $(".text1").changeColor();
        $(".text2").changeColor({'color': '#f06','fontSize': '18px','fontWeight': 'bold'});
    </script>
</body>
</html>

执行结果:

pic1.png

界面上的体制结果是大家所要的,可是大家意外的发现第二次打印
console.log(this.defaults);时,defaults的值被大家所传的options覆盖了。
致使这些结果的缘故是:

this.opt = $.extend(this.defaults, options);
使用jQuery的extend方法,
extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,
而当用extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里,
同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。
解决办法就是使用上边的那句话代表上面的:
this.opt = $.extend({}, this.defaults, options);

您看实践结果正常了,上边写的其实没有须要用extend就足以兑现五回性修改多少个样式,且每个样式存在一个相应的默许值。之所以例子中用到这一个,就是想表达extend的这一个注意点。

pic2.png

唯独这么写依旧可能会油可是生难点,更好的写法是:

;(function($,window,document,undefined){
           $.fn.changeColor = function(options){
                this.defaults = {
                    'color': '#000',
                    'fontSize': '14px',
                    'fontWeight': 'normal'
                };
                this.opt = $.extend({}, this.defaults, options);
                console.log(this.defaults);
                this.css({
                    'color': this.opt.color,
                    'font-size': this.opt.fontSize,
                    'font-weight': this.opt.fontWeight
                });
            }
})(jQuery,window,document);

将大家要促成的代码封装在

;(function($,window,document,undefined){
    //想要实现的功能的代码
})(jQuery,window,document);
那边的”;”最好添加上,可以幸免代码压缩时出现难题

这种将系统变量以变量方式传递到插件内部*的措施可以幸免别人写的代码将window,
undefined等这几个系统变量或者重大字修改掉了,而我辈又在融洽的代码里面举办了应用。
看过一篇文章,里面有对那一个undefined使用的牵线我那就一直复制过来了。

为了得到没有被修改的undefined,
我们并没有传递这个参数,但却在接收时接收了它,因为实际并没有传,
所以‘undefined’那个位置接收到的就是真实的'undefined'了。

中间精华,大家细细体会~

相关文章

网站地图xml地图