jquery自定义插件开发总结

最新推荐文章于 2020-06-27 22:02:22 发布

爱代码也爱生活

最新推荐文章于 2020-06-27 22:02:22 发布

阅读量5.8k

点赞数 1

分类专栏： web前端文章标签： jquery插件 jquery 插件开发

本文链接：https://blog.csdn.net/nuli888/article/details/51860397

版权

web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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这个是插件的名字

带参数的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.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中

爱代码也爱生活

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery自定义插件开发总结

jQuery中已经存在很多常用的工具函数，使用这些函数能够在开发中帮助我们解决很多常见的问题，从而提高开发效率，比如常用的有：$.ajax使用ajax调用，$.each用于遍历对象和数组，$.grep用于过滤数组，$.map对于一个数组进行一定程度转换后返回转换后的数组，等等一系列的方法；但是有时候由于业务的需要，我们可能需要在项目中多次使用一些函数，在这种情况下，可以把这些函数封装成jQuery
复制链接

扫一扫

专栏目录