标签:
$.extend()和$.fn.extend()函数用法简单介绍:
标题中的两个方法在jQuery插件开发中非常的重要,下面通过简单的代码实例介绍一下它们的用法。
本章节不会介绍它的原理,而是只给出它们的作用是什么,能够做什么事情。
jQuery.extend()可以为jQuery类添加新的方法,类似于c#或者java中的静态方法。
jQuery.fn.extend()可以为jQuery的对象实例添加新的方法。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.fn.Plugin=function(options){ $options=$.extend({ html:"没有内容", css:{ "color":"red", "font-size":"12px" } }, options); return $(this).css({ "color":$options.css.color, }).html($options.html); } $(‘.antzone‘).Plugin({html:"蚂蚁部落",css:{"color":"green","font-size":"12px"}}); }) </script> </head> <body> <ul> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> </ul> </body> </html>
上面的代码自定义了一个简单插件,这里只介绍了$.fn.extend()的使用,其实$.extend()的使用也是同样的道理,下面介绍一下上面代码的实现过程,更多内容可以参阅相关阅读。
一.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.jQuery.fn.Plugin=function(options){},为jQuery类的对象实例添加新的方法Plugin,参数是一个对象直接量,传递一些相应的参数,如果省略,则使用默认的参数。
3.$options=$.extend({
html:"没有内容",
css:{
"color":"red",
"font-size":"12px"
}
},
options)
合并对象,从这个也可以看出来如果新添加的函数不传递参数,那么就采用默认的参数,否则使用传递的参数。
4.return $(this).css({
"color": $options.css.color,
}).html($options.html)
设置元素的样式和内容,并返回此对象,以便于链式调用。
二.相关阅读:
1.jQuery.fn可以参阅jQuery.fn的作用是什么一章节。
2.jquery.extend()可以参阅jquery.fn.extend()与jquery.extend()函数的作用一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14441
更多内容可以参阅:http://www.softwhy.com/jquery/
$.extend()和$.fn.extend()函数用法简单介绍
标签:
原文地址:http://www.cnblogs.com/come-on/p/5180407.html