jquery自定义插件开发总结

来源：互联网发布：上古卷轴5原版捏脸数据编辑：程序博客网时间：2024/05/01 17:58

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