jQuery中$.extend(),$.fn.extend()与$.fn.方法名小结

 

            1.=============== $.extend() --- 该方法可以合并对象，并返回一个新的对象==================

 　　　var obj1 = {

                 name: 'jack',

                 age: 15

             }

             var obj2 = {

                 hobby: ['吃饭', '睡觉']

             }

             var obj3 = $.extend(obj1, obj2)

             console.log(obj3);

 

 

　　　　

 　　    2.============== $.fn.extend()  -- 该方法可以在jq的原型对象上定义方法，从而其它的jquery对象统统可以使用新方法。

            $.fn.extend({

　　　　　 change(color) {

                        return this.css('color', color)

                         })

                    },

                    check(bool) {

                        return this.prop('checked', bool)

                    }

                }

            )

　　　　以上我们同过 $.fn.extend(）方法重新编写了俩个方法change()和check()

            $('p').change('red') —— 获取到的段落标签可以直接使用该方法改变css中的颜色样式

            $('input[type=checkbox]').check(true/false) —— 获取到的复选框可以利用check()方法改变状态

 

 

　　　3.=============$.fn.函数名 -- 该形式可以利用jQuery开发插件

            // 1.创建一个立即执行函数  (function( ){ })( )  或者 （function( ){ }( )）

            // 2.$.fn.函数名 = function(){}

            // 3.给创建的函数中传入参数 -- 并定义函数的功能。

            (function () {

                $.fn.change = function (color) {

                    $(this).css('color', color)

                    console.log('方法执行成功');

                }，

　　　　$.fn.fn1 = function () {

                    ....

                },

　　　　$.fn.fn2 = function () {

                    ....

                }......

            })()

            $('p').change('pink')

　　　这样我们可以将一些常用js的功能代码，封装成一个单独的js文件（类似于插件），例如轮播图/定时器/css样式变换。。。