<!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 (fgcolor, bgcolor) {
$(this).mouseover(function () {
$(this).css({"color":fgcolor,"background":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("red","#f1f1f1");
});
</script>
</head>
<body>
<h1>虾米大王</h1>
</body>
</html>
jQuery练习t314,从0到1
猜你喜欢
转载自blog.csdn.net/modern358/article/details/113823150
今日推荐
周排行