jQuery扩展插件——$.extend(obj)与$.fn.extend(obj)

最新推荐文章于 2022-04-30 18:11:49 发布

原创最新推荐文章于 2022-04-30 18:11:49 发布 · 989 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #扩展 #插件

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文档详细介绍了如何使用 jQuery 开发插件，包括全局函数的定义方式、对象级别的插件开发方法，以及如何通过参数控制插件行为等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html 
lang="en">
<head>
<meta 
charset="UTF-8">
<meta 
name="viewport" 
content="width=device-width, initial-scale=1.0">
<meta 
http-equiv="X-UA-Compatible" 
content="ie=edge">
<title>Document</title>
<script
src="jquery-1.11.1.min.js"></script>
</head>
<body>
<ul 
id="_ul">
<li>aaa</li>
<li>ccc</li>
<li>bbb</li>
</ul>
<div 
id="test"></div>
<script>
// (function($){
// $.fn.AlertSelf = function(){
// this.click(function(){alert($(this).html())});
// }
// })(jQuery)

// $('#_ul li').AlertSelf();

// var result = $.extend({},{name:'tom',age:21},{name:'jerry',sex:'boy'})
// console.log(result);
// $.extend({
// hello:function(){alert('hello');}
// })
// $.hello()
/* $.entend 是将方法合并到jquery的全局对象中， $.fn.extend 是将方法合并到jquery的实例对象中去 */
// $.fn.extend({
// hello:function(){alert('hello');}
// })
// $.extend({net:{}});
// $.extend($.net,{
// hellp:function(){alert('hello');}
// })
/* 1.定义一个全局函数*/
jQuery.foo =
function(){
alert("全局");
}
jQuery.bar =
function(){
alert("在一个全局");
}
/* 2.使用 extend 定义全局函数*/
jQuery.extend({
foo1:function(){alert("extend全局1");},
bar1:function(){alert("extend全局2");}
});

/* 3. 使用命名空间定义函数*/
jQuery.plugin = {
foo2:function(){
alert("使用namespace定义函数");
}
}
/*$(function(){
$.foo();
$.bar();
$.foo1();
$.bar1();
$.plugin.foo2();
})*/

/* 二、对象级别的插件开发*/

/* 形式一*/
(function($){
$.fn.extend({
foo3:function(){alert('队形级别extend1');},
bar3:function(){alert('对象那个级别extend2');}
})
})(jQuery);

/*形式二*/
(function($){
$.fn.foo4 =
function(){
alert('队形级别fn方法');
}
})(jQuery);

/* 接受参数来控制插件的行为*/
(function($){
$.fn.bar4 =
function(options){
var defaults = {aaa:'1',bbb:'2'};
var opts =
$.extend(defaults,options);
alert('参数值：aaa：'+opts.aaa+';bbb:'+opts.bbb);
}
})(jQuery);

/* 提供公有方法访问插件的配置项值*/
(function($){
$.fn.foo5 =
function(options){
var opts =
$.extend({},$.fn.foo5.defaults,options);
alert('参数值：aaa：'+opts.aaa+';bbb:'+opts.bbb);
}
$.fn.foo5.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

/* 提供公有方法来访访问插件中其他的方法 */
(function($){
$.fn.bar5 =
function(options){
$.fn.bar5.alert(options);
}
$.fn.bar5.alert =
function(params){
alert(params);
}
})(jQuery);

$(function(){
$('#test').foo3();
$('#test').bar3();
$('#test').foo4();
$('#test').bar4();
$('#test').bar4({aaa:'3'});
$('#test').bar4({aaa:'3',bbb:'4'});
$('#test').foo5();
$('#test').foo5({aaa:'5',bbb:'6'});
$('#test').bar5('aaaa');
})

</script>
</body>
</html>