<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//jQuery插件
//定义插件 优化传参为多参数
(function () {
$.fn.extend({
"changeColor":function (options) {
$(this).mouseover(function () {
$(this).css({"color":options.fgcolor,"background":options.bgcolor});
}).mouseout(function () {
$(this).css({"color":"black","background":"white"});
});
return $(this);
}
});
})(jQuery);
/*
jQuery插件可以分为以下3种，
方法类插件
函数类插件
选择器插件
其中选择器插件，很少有人会去开发使用，因为jQuery内置的选择器
已经足够完善了。
方法类插件，我们可以使用$.fn.extend(）方法来定义。
语法
(function($){
$.fn.extend({
"插件名":function(参数){
......
}
});
})(jQuery);
这里(function(){})()是JavaScript立即执行函数，在高级开发中经常
使用。
*/
</script>
<script>
$(function () {
$("h1").changeColor({
fgcolor:"red",
bgcolor:"#f1f1f1"
});
});
</script>
</head>
<body>
<h1>虾米大王</h1>
</body>
</html>
扫一扫
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
