jquery05 继承

简介:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>

<script>

//$.extend()
//$.fn.extend()

//当只写一个对象自变量的时候,JQ中扩展插件的形式
$.extend({     //给jQuery类加静态方法
    aaa : function(){
        alert(1);
    },
    bbb : function(){
        alert(2);
    }
});

$.fn.extend({     //给jQuery对象加方法
    aaa : function(){
        alert(3);
    },
    bbb : function(){
        alert(4);
    }
});
$.aaa();//1
$.bbb();//2
$().aaa();//3
$().bbb();//4

$.extend();  -> this -> $(jQuery类)  -> this.aaa  ->  $.aaa()
$.fn.extend(); -> this -> $.fn(jQuery原型对象) -> this.aaa ->  $().aaa()*/


//当写多个对象自变量的时候 , 后面的对象都是扩展到第一个对象身上
var a = {};
$.extend( a , { name : 'hello' } , { age : 30 } );
console.log( a );//  { name : 'hello'  ,  age : 30 }


//浅拷贝:2个对象有一个改变另一个也改变,浅拷贝
var a = {};
var b = {  name : 'hello' };
$.extend( a , b );
a.name = 'hi';
alert(b.name);//hello

var a = {};
var b = {  name : { age : 30 } };
$.extend( a , b );
a.name.age = 20;
alert( b.name.age );//20

//深拷贝:2个对象互不影响
var a = {};
var b = {  name : { age : 30 } };
$.extend( true,a , b );
a.name.age = 20;
alert( b.name.age );//30


/*jQuery.extend = jQuery.fn.extend = function(){
    
    定义一些变量
    
    if(){}   看是不是深拷贝情况
    
    if(){}   看参数正确不
    
    if(){}   看是不是插件情况
    
    for(){   可能有多个对象情况
        
        if(){}  防止循环引用
        
        if(){}   深拷贝
        else if(){}   浅拷贝
        
    }
    
};*/


var a = {};
console.log( $.extend( a , { name : a } ) );
----------------------------------------------------------------------
var a = { name : { job : 'it' } };
var b = { name : {age : 30} };

$.extend( true , a  , b );

console.log( a );//{ name : { job : 'it' ,age : 30} };  


JQ中 : 拷贝继承 : 构造函数的原型

JS : 类式继承 / 原型继承

new 构造函数   /  {}

</script>
</head>

<body>
</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/6906725.html,如需转载请自行联系原作者

相关文章
|
4天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
39 21
|
5天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
36 16
|
3天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
5天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
4天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
1天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
14 2
|
1天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
5天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件