<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>给jquery绑定方法</title>
</head>
<body>
</body>
<script src="../../jquery.js"></script>
<script>
/***
* 1.文件命名
* jquery.banner.1.0.0.js
* jquery.banner.js
* 2、添加匿名函数
* (function(){})()
* 3、给插件前后添加;
* ;(function(){})();
* 4、开启严格模式 --- 代码的严谨性 ----- 但不是必须
* 'use strict';
* 5、给匿名函数传入jQuery
* ;(function($){})(jQuery);
* 6、给插件中jQuery绑定适用的方法
*
* 7、开发功能
* */
// 1、使用对象形式，给jQuery绑定了一个 全局 的方法 如:$.cookie()
jQuery.test = function () {
console.log('测试')
}
$.test();
// 2、使用对象形式，给jQuery绑定一个 局部 (DOM) 的方法 如:$('form').validate()
// jQuery.fn 局部
jQuery.fn.test = function () {
console.log('局部测试')
};
$().test();
// $.extend() 的第一个参数是目标 对象，会将后面的对象或者方法合并到第一个中
// https://www.runoob.com/jquery/misc-extend.html
var data1 = { a: 1 };
var data2 = { b: 2 };
var data3 = $.extend(data1, data2)
var data4 = $.extend({}, data1, data2)
console.log(data1) // { a: 1, b: 2}
console.log(data2) // { b: 2 }
console.log(data3) // { a: 1, b: 2}
console.log(data4)
// 3、使用jq中的$.extend() 扩展自己的函数 --- 全局的方法 -- 2个参数
$.extend($, {
test: function () {
console.log('$.extend() 扩展自己的函数')
}
})
$.test()
// 4、使用jq中的$.extend() 扩展自己的函数 --- 局部的方法 - DOM -- 2个参数
$.extend($.fn, {
test: function () {
console.log('$.extend() 扩展自己的函数')
}
})
$().test()
// $.extend(target, obj1, obj2...)
// 如果只为$.extend()指定了一个参数，则意味着参数target被省略。
// 此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
// 5、使用jq中的$.extend() 扩展自己的函数 -- 全局
$.extend({
test () {
console.log('test')
}
})
$.test();
// $.fn.extend({}) 如果只有一个参数，会把该对象合并到 $.fn中
// 6、使用jq中的$.extend() 扩展自己的函数 -- 局部
$.fn.extend({
test () {
console.log('fn-test')
}
});
$().test()
/***
* 总结
* 最常见的给jquery绑定方法的是
* 第 5 + 6 种
*
* 全局
* $.extend({})
* 局部
* $.fn.extend({})
* */
</script>
</html>
