jQuery中已经存在很多常用的工具函数,使用这些函数能够在开发中帮助我们解决很多常见的问题,从而提高开发效率,比如常用的有:$.ajax使用ajax调用,$.each用于遍历对象和数组,$.grep用于过滤数组,$.map对于一个数组进行一定程度转换后返回转换后的数组,等等一系列的方法;但是有时候由于业务的需要,我们可能需要在项目中多次使用一些函数,在这种情况下,可以把这些函数封装成jQuery的实用函数,以方便调用和重用
不带参数的jquery插件开发
<!DOCTYPE html>
<html>
<head>
<title>不带参数的jquery插件开发</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
plugName:function(){
$(this).click(function(){
alert($(this).val())
})
}
})
})(jQuery);
</script>
</head>
<body>
<input type="button" value="点击我" id="btn" />
</body>
<script type="text/javascript">
$("#btn").plugName();
</script>
</html>
大概的解释一下,$.fn.extend是一个实例的扩展,但是$.extend是类的扩展
jQuery和$是等价的,你可以认为是别名。plugName这个是插件的名字
<!DOCTYPE html>
<html>
<head>
<title>带参数的jquery插件开发</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.highLight=function(options){
var defaults={"color":"red","background-color":"yellow"};
var opts=$.extend(defaults,options);
$(this).css(opts);
}
})(jQuery)
</script>
</head>
<body>
<div id="myDiv">带参数的jquery插件开发</div>
</body>
<script type="text/javascript">
$("#myDiv").highLight({color:"#fff"});
</script>
</html>
这里和不带参数的jquery插件差不多,但是还有略微的不同,最后$("#myDiv").highLight({color:"#fff"});来给jquery传递参数!如果不写的话,那就用jquery自带的默认的值
var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中