jQuery $.extend()用法总结

2019-03-2209:51:53WEB前端开发Comments2,087 views字数 1874阅读模式

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

这篇文章主要介绍了jQuery $.extend()用法,需要的朋友可以参考下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

jQuery.extend(object);
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

复制代码 代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

<span><html>
<head>
<title></title>
</head>
<body>
<h3>new soul</h3>
<h3>new soul</h3>
<h3>new soul</h3>
<h3>new soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery.fn.myPlugin = function(options) {
$options = $.extend( {
html: "no messages",
css: {
"color": "red",
"font-size":"14px"
}},
options);
return $(this).css({
"color": $options.css.color,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

}).html($options.html);
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

$('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}});
</script>
</body>
</html>
</span>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

好的,上面你也看到了一点点$.extend()的用法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

1.合并多个对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

这里使用的就是$.extend()的嵌套多个对象的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

所谓嵌套多个对象,有点类似于数组的合并的操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

但是这里是对象。举例说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

复制代码 代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

<span>//用法: jQuery.extend(obj1,obj2,obj3,..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
</span>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

2.深度嵌套对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

复制代码 代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

<span> 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>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

3.可以给jQuery添加静态方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

复制代码 代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

<span><html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
$.extend({
add:function(a,b){return a+b;},
minus:function(a,b){return a-b},
multiply:function(a,b){return a*b;},
divide:function(a,b){return Math.floor(a/b);}
});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7);
console.log(sum);
</script>
</body>
</html></span>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10315.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/10315.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定