jquery带参插件函数的编写

时间:2023-07-21 08:33:56
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery带参函数的编写</title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<ul>
<li>
<a href="http://www.webo.com/liuwayong">我的微博</a>
</li>
<li>
<a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
</li>
<li>
<a href="http://wayouliu.duapp.com/">我的小站</a>
</li>
</ul>
<p>这是p标签不是a标签,我不会受影响</p>
<button id="btn">调用插件</button>
<script>
//编写插件
$.fn.myPlugin=function(options){
//定义默认的风格(不传入参数情况下)
var defaults={
"color":"red",
"fontSize":"14px"
}
//定义合并后的风格(传入的参数和默认的合并后)
var settings= $.extend({},defaults,options);
this.css({
"color":settings.color,
"fontSize":settings.fontSize
});
this.each(function(){
$(this).append($(this).attr("href"));
});
}
//调用插件
$(function(){
$("#btn").click(function(){
$("a").myPlugin({"color":"green"});
});
});
</script>
</body>
</html>