知识铺垫
插件分为三种：方法类插件（.extend)、选择器插件
选择器插件，很少有人会去开发使用，因为 jQuery 内置的选择器足够完善，大多用方法插件或函数类插件开发
$.fn.extend()
基本概念
- $.fn.extend( )是在所获取的 jQuery 对象下定义一个方法
- 使用 jQuery 选择器来获取一个 jQuery 对象，针对你获取的这个 jQuery 对象添加一个方法。
- 调用方式一般是
$(选择器).插件名()
语法
第一种定义方式：
$.fn.extend({
"插件名": function(参数){
……
}
}));
示列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- jquery脚本 -->
<script src="./lib/jquery.js"></script>
</head>
<body>
<h1>新建个插件</h1>
<div>哈哈哈哈</div>
<script>
// 定义插件
;(function ($) {
$.fn.extend({
// 插件名为bgColor
bgColor: function (fgcolor, bgcolor) {
$(this)
.mousemove(function () {
$(this).css({ color: fgcolor, background: bgcolor })
})
.mousedown(function () {
$(this).css({ color: 'black', background: 'skyblue' })
})
return $(this)
},
})
})(jQuery)
$(function () {
//调用插件
$('h1').bgColor('red', 'pink')
})
</script>
</body>
</html>
第二种定义方式
$.fn.插件名 = function(参数){
……
}
示列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<h3 >newnewnew </h3>
<script>
// 定义插件
jQuery.fn.myPlugin = function (options) {
$options = $.extend(
{ html: 'new messages', css: { color: 'red', 'font-size': '14px' } },
options
)
return $(this).css({ color: $options.css.color }).html($options.html)
}
// 调用插件
$('h3').myPlugin({
html: ' Oh,YYDS?',
css: { color: 'green', 'font-size': '30px' },
})
</script>
</body>
</html>
立即执行函数
（function(){}）（）
避免受Javascrip库变量只属于这个立即执行函数的作用域
(function($){
$.fn.extend({
"插件名": function(参数){
……
}
});
})(jQuery);
优化参数
参数较少
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- jquery脚本 -->
<script src="./lib/jquery.js"></script>
</head>
<body>
<h1>新建个插件</h1>
<div>哈哈哈哈</div>
<script>
// 定义插件
(function ($) {
$.fn.extend({
//参数
"color": function (option) {
$(this).mouseover(function () {
$(this).css({"color":option.fgcolor,"background":option.bgcolor})
})
return $(this)
},
})
})(jQuery)
$(function () {
//调用插件
$("h1").color({ fgcolor: "red", bgcolor: "blue" });
})
</script>
</body>
</html>
默认参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- jquery脚本 -->
<script src="./lib/jquery.js"></script>
</head>
<body>
<h1>新建个插件</h1>
<div>哈哈哈哈</div>
<script>
// 设置参数默认值
(function ($) {
$.fn.extend({
"color": function (options) {
// 设置参数默认值
var defaults = {
fgcolor: 'hotpink',
bgcolor: 'lightskyblue',
}
// $.extend()方法将参数对象 options 和选项对象 defaults 合并成一个对象
//$.extend()方法允许使用一个或多个对象来扩展一个基准对象，扩展的方式是依序将右边的对象合并到基准对象（也就是左边第一个对象）。
var options = $.extend( defaults, options )
$(this).mouseover(function () {
$(this).css({ "color":options.fgcolor,"background":options.bgcolor})
}).mousedown(function () {
$(this).css({"color":"black","background":"white"});
})
return $(this)
},
})
})(jQuery)
$(function () {
//调用插件
$('h1').color()
})
</script>
</body>
</html>
封装多个 jQuery 插件
语法
(function($){
$.fn.extend({
"插件1": function(参数){
……
},
"插件2": function(参数){
……
},
"插件3": function(参数){
……
}
});
})(jQuery);
示列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<h1>新建个插件</h1>
<div>哈哈哈哈</div>
<script>
// 定义插件
;(function ($) {
$.fn.extend({
// 插件名为bgColor
bgColor: function (fgcolor, bgcolor) {
$(this)
.mousemove(function () {
$(this).css({ color: fgcolor, background: bgcolor })
})
.mousedown(function () {
$(this).css({ color: 'black', background: 'skyblue' })
})
return $(this)
},
bgsize: function (fontsize, lgcolor) {
$(this).mousemove(function () {
$(this).css({ fontSize: fontsize, color: lgcolor })
})
// //返回jQuery对象，以便链式调用
return $(this)
},
})
})(jQuery)
$(function () {
// //调用插件
$('h1').bgColor('red', 'pink')
$('div').bgsize('20px', 'blue')
})
</script>
</body>
</html>
$.extend()
基本概念
- 函数类插件的语法与方法类插件的语法差不多，仅仅是把
$.fn.extend()换成了$.extend()。 - 函数类插件是在全局对象下定义一个方法
- 调用方式一般是
$.函数名()
语法
(function($){
$.extend({
"插件名": function(){
……
}
});
})(jQuery)
示列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<h1>新建个插件</h1>
<div>哈哈哈哈</div>
<script>
;(function ($) {
$.extend({
maxum: function (m, n) {
return m > n ? m : n
},
})
})(jQuery)
$(function () {
var result = $.maxum(0, 5)
console.log('最大值是' + result)
})
</script>
</body>
</html>
