jquery插件学习1

最新推荐文章于 2024-08-24 00:47:34 发布

BeautyMyth

最新推荐文章于 2024-08-24 00:47:34 发布

阅读量532

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/cjsyr_cjsyr/article/details/25832593

版权

Jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

插件的一些基本要求。

(function($){
	/*
	1.插件的参数配置,可以将外面传进来的配置与内部默认配置进行合并
	2.插件的公有方法与私有方法
	*/
	$.fn.bmplugtest=function(options){
		//方法1:将传进来的参与与默认的参数进行合并，后面的覆盖前面的
		var setting1=$.extend({
				"name":"beautymyth",
				"old":"23",
				"sex":"man"	
			},options);

		//方法2;指定默认配置与options合并
		var setting2=$.extend({},$.fn.bmplugtest.defaults,options);
		
		fnPrivate($(this));
		//外面调用$.fn.bmplugtest时this就为当前选择器
	};
	
	//指定默认配置
	$.fn.bmplugtest.defaults={
		"name":"beautymyth",
		"old":"23",
		"sex":"man"	
	};

	//私有方法，外部不能直接访问，但是可以在公有方法里面调用
	function fnPrivate(obj){
		alert('我是私有方法，通过公有方法访问了我');
	}

	//公有方法，在外面可以$("#ff").bmplugtest.fnPublic()调用
	$.fn.bmplugtest.fnPublic=function(){
		alert("我是公有方法，我等会会访问私有方法");
		fnPrivate();
	};
	
})(jQuery);

<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.bmplugtest.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //fnPrivate();//测试这个是没有定义的
            $("#ff").bmplugtest.fnPublic(); //可以通过插件里面的公有方法来间接访问插件的私有方法            
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="ff" data-type="11">
    
    </div>
    </form>
</body>
</html>