提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery$.extend()用法总结

jQuery 用法 总结 extend
2023-06-13 09:15:28 时间
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend(object);

jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。
复制代码代码如下:

<spanstyle="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<h3class="ye">newsoul</h3>
<h3class="ye">newsoul</h3>
<h3class="ye">newsoul</h3>
<h3class="ye">newsoul</h3>
<scripttype="text/javascript"src="jquery.2.0.3.js"></script>
<scripttype="text/javascript">
jQuery.fn.myPlugin=function(options){
$options=$.extend({
html:"nomessages",
css:{
"color":"red",
"font-size":"14px"
}},
options);
return$(this).css({
"color":$options.css.color,

}).html($options.html);
}


$(".ye").myPlugin({html:"Soeasy,yes?",css:{"color":"green","font-size":"20px"}});
</script>
</body>
</html>
</span>

好的，上面你也看到了一点点$.extend()的用法。

1.合并多个对象。

这里使用的就是$.extend()的嵌套多个对象的功能。

所谓嵌套多个对象，有点类似于数组的合并的操作。

但是这里是对象。举例说明。
复制代码代码如下:

<spanstyle="font-size:18px;">//用法:jQuery.extend(obj1,obj2,obj3,..)
varCss1={size:"10px",style:"oblique"}
varCss2={size:"12px",style:"oblique",weight:"bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
//Css1={size:"12px",style:"oblique",weight:"bolder"}
</span>

2.深度嵌套对象。
复制代码代码如下:
<spanstyle="font-size:18px;">jQuery.extend(
{name:“John”,location:{city:“Boston”}},
{last:“Resig”,location:{state:“MA”}}
);
//结果:
//=>{name:“John”,last:“Resig”,location:{state:“MA”}}
//新的更深入的.extend()
jQuery.extend(true,
{name:“John”,location:{city:“Boston”}},
{last:“Resig”,location:{state:“MA”}}
);
//结果
//=>{name:“John”,last:“Resig”,
//location:{city:“Boston”,state:“MA”}}
</span>

3.可以给jQuery添加静态方法。
复制代码代码如下:
<spanstyle="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<scripttype="text/javascript"src="jquery.2.0.3.js"></script>
<scripttype="text/javascript">
$.extend({
add:function(a,b){returna+b;},
minus:function(a,b){returna-b},
multiply:function(a,b){returna*b;},
divide:function(a,b){returnMath.floor(a/b);}
});

varsum=$.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7);
console.log(sum);
</script>
</body>
</html></span>

相关文章