前几天在玩jquery,今天就把这几天的学习做一个总结。
首先jquery开发自定义的控件分两大类(我自己这么分的),第一就是不带参数的插件,还有一类就是带参数的jquery插件了。
先从简单的开始。首先我们要了解一下什么叫jquery,jquery是对js的一系列的分装,说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery,然后再我们的网页的head下面引用一下就好了。例如:
这里有一点需要确定,就是jquery的引用的地方一定在你自己插件的地方前面,因为浏览器在解析你的html的时候,是从上到下的,也就是说如果你先写插件后引用jquery,那么浏览器根本就不认识你的插件中的标示符。
无参jquery插件的模板:
无参的格式为:
这里大概的解释一下,$.fn.extend是一个实例的扩展,但是$.extend是类的扩展,如果不明白多看一下解释,或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的,你可以认为是别名。myPlugName这个是插件的名字,根据自己的情况来命名自己的拆建吧!接着就是写一些你想要做的事情了!很简单吧!哈哈
带参数的jquery插件
首先看一下代码:
这里和不带参数的jquery插件差不多,但是还有略微的不同,最后$("#myDiv").hilight({foreground:'blue'});来给jquery传递参数!如果不写的话,那就用jquery自带的默认的值。jquery插件其中的一个标准模板为:
这里需要注意一句话,var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中。不懂的话参考:http://api.jquery.com/jQuery.extend/
这里当然标准的模板不是单单上面这么一种还有很多种,我只是整理了一种为初学者学习!
最后请允许我拷贝一段话,希望对你有用:
jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。
首先jquery开发自定义的控件分两大类(我自己这么分的),第一就是不带参数的插件,还有一类就是带参数的jquery插件了。
先从简单的开始。首先我们要了解一下什么叫jquery,jquery是对js的一系列的分装,说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery,然后再我们的网页的head下面引用一下就好了。例如:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery引用放的位子</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--这里写自己插件的地方-->
</script>
</head>
这里有一点需要确定,就是jquery的引用的地方一定在你自己插件的地方前面,因为浏览器在解析你的html的时候,是从上到下的,也就是说如果你先写插件后引用jquery,那么浏览器根本就不认识你的插件中的标示符。
无参jquery插件的模板:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不带参数的jquery插件开发</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
myPlugName:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
})(jQuery);
</script>
</head>
<body>
<input type="button" value="点击我" id="btn" />
</body>
<script type="text/javascript">
$("#btn").myPlugName();
</script>
</html
无参的格式为:
(function($){
$.fn.extend({
myPlugName:function(){<!--myPlugName你的插件的名字,根据自己的情况来命名-->
//dosomethings
});
}
});
})(jQuery);
这里大概的解释一下,$.fn.extend是一个实例的扩展,但是$.extend是类的扩展,如果不明白多看一下解释,或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的,你可以认为是别名。myPlugName这个是插件的名字,根据自己的情况来命名自己的拆建吧!接着就是写一些你想要做的事情了!很简单吧!哈哈
带参数的jquery插件
首先看一下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.hilight=function(options){
var defaults={
foreground:'red',
background:'yellow'
};
var opts = $.extend(defaults,options);
$(this).css("background-color",opts.background);
$(this).css("color",opts.foreground);
};
})(jQuery);
</script>
</head>
<body>
<div id="myDiv">This is a Params JQuery!</div>
</body>
<script type="text/javascript">
$("#myDiv").hilight({foreground:'blue'});
</script>
</html>
这里和不带参数的jquery插件差不多,但是还有略微的不同,最后$("#myDiv").hilight({foreground:'blue'});来给jquery传递参数!如果不写的话,那就用jquery自带的默认的值。jquery插件其中的一个标准模板为:
(function($){
$.fn.hilight=function(options){
var defaults={
foreground:'red',
background:'yellow'
};
var opts = $.extend(defaults,options);
//dosomethings
};
})(jQuery);
这里需要注意一句话,var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中。不懂的话参考:http://api.jquery.com/jQuery.extend/
这里当然标准的模板不是单单上面这么一种还有很多种,我只是整理了一种为初学者学习!
最后请允许我拷贝一段话,希望对你有用:
jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。
Stallman 先生认为最大的快乐是让自己发展的软件让大家来使用了!
/*******************part 2*****************************/
方法一:
1 //name : 插件名
2 (function(){
3 $.fn.name = function(options){
4 //自定义参数对象(插件自带) for example
5 var defaults = {
6 value1 : 'a',
7 value2 : 'b'
8 };
9 var opts = $.extend(defaults,options); //此处options为用户设置的参数对象(用户传参)
10 //实现插件的代码 bla bla bla
11 }
12 })(jQuery);
方法二:
1 (function(){
2 $.fn.extend({
3 //name1,name2 对象名
4 name1 : function(){
5 //功能代码
6 },
7 name2 : function(){
8 //功能代码
9 },
10 //其他功能
11 });
12 })(jQuery);
二、具体实例:
q: 加减法功能
方法一:
1 (function(){
2 $.fn.add = function(options){
3 var defaults = {a:0,b:0};
4 var opts = $.extend(defaults,options);
5 return opts.a + opts.b;
6 }
7 $.fn.dev = function(options){
8 var defaults = {a:0,b:0};
9 var opts = $.extend(defaults,options);
10 return opts.a - opts.b;
11 }
12 })(jQuery);
方法二:
1 (function(){
2 $.fn.extend({
3 add : function(a,b){
4 var n = a + b;
5 return n;
6 },
7 dev : function(a,b){
8 var n = a - b;
9 return n;
10 }
11 });
12 })(jQuery);
调用代码:
1 var n = $(this).add(3,2);
2 alert(n); //5
3 var m = $(this).dev(3,2);
4 alert(m);//1
/*****************part3********************/
jQuery编写插件的两种方法
1.添加jQuery对象级的插件,是给jQuery类添加方法
写法:
调用方法:$("#id").函数名(参数);
2.jQuery类级别的插件,相当于添加静态方法
调用方法:$.函数名(参数);