對(duì)象是從我們現(xiàn)實(shí)生活中抽象出來(lái)的一個(gè)概念审丘，俗話說(shuō)物以類聚，人以群分勾给，我們也經(jīng)常說(shuō)有一類人滩报，他們專業(yè)給隔壁家制造驚喜，也就是我們說(shuō)的老王播急。
這里面就有兩個(gè)重要概念
類：無(wú)論是物以類聚脓钾，還是有一類人，這里說(shuō)的類并不是實(shí)際存在的事物桩警，是一些特征可训、是一些規(guī)則等。
老王：這是個(gè)實(shí)物，是現(xiàn)實(shí)存在握截，和類的關(guān)系就是符合類的描述
對(duì)應(yīng)到計(jì)算機(jī)術(shù)語(yǔ)飞崖，類就是class，定義了一些特點(diǎn)（屬性 property）和行為（方法 method）谨胞，比如說(shuō)給隔壁制造驚喜的這類人有幾個(gè)特征：
長(zhǎng)相文質(zhì)彬彬固歪，為人和善；
姓王胯努；
同時(shí)這些人還有技能（行為）：
幫隔壁修下水道牢裳；
親切問(wèn)候?qū)Ψ絻鹤樱?br>
符合這些特點(diǎn)并且有上述行為能力的，我們稱之為老王叶沛。從描述我們就可以看出來(lái)LaoWang不是指某個(gè)人蒲讯，而是指一類人，符合上述描述的都可能是老王灰署！用計(jì)算機(jī)術(shù)語(yǔ)說(shuō)就是沒(méi)個(gè)活蹦亂跳的老王都是類LaoWang伶椿。
一、創(chuàng)建對(duì)象
創(chuàng)建方式
1氓侧、使用new方式脊另，使用typeof可以查看數(shù)據(jù)類型。
//創(chuàng)建person對(duì)象
var person = new Object();
//查看數(shù)據(jù)類型
console.log(typeof person);
2约巷、使用{}方式
//創(chuàng)建person對(duì)象
var person = {};
// 創(chuàng)建對(duì)象
var person = {
name: "3D brother",
age: 81,
show: function () {
console.log(this.name, this.age);
}
};
//給person對(duì)象添加gender(性別)屬性
person.gender = "man";
3偎痛、構(gòu)造函數(shù)
構(gòu)造函數(shù)調(diào)用時(shí)和普通函數(shù)不同，需要新建一個(gè)對(duì)象独郎，然后才能調(diào)用踩麦，此特性需要注意。
// 創(chuàng)建Perosn的構(gòu)造函數(shù)
function Person(name, age) {
// 設(shè)置屬性
this.name = name;
this.age = age;
// 設(shè)置方法
this.show = function () {
console.log(this.name, this.age);
};
}
// 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象
var person2 = new Person("laowang", 20);
//使用Person的name屬性
console.log(person2.name);
// 用show()方法展示
person2.show();
此方法將直接創(chuàng)建perosn對(duì)象氓癌，并直接在里面添加屬性和方法谓谦。
4、工廠設(shè)計(jì)模式
所謂工廠設(shè)計(jì)模式贪婉，即在構(gòu)造函數(shù)內(nèi)新建一個(gè)對(duì)象反粥，然后給對(duì)象添加屬性和方法，然后按指定屬性和方法返回一個(gè)新建對(duì)象疲迂。它調(diào)用方法和普通函數(shù)類似才顿。
// 工廠設(shè)計(jì)模式
function people(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.show = function () {
console.log(this.name, this.age);
};
return obj;
}
//工廠設(shè)計(jì)模式和構(gòu)造函數(shù)的區(qū)別就在于new關(guān)鍵字
var p = new Person("name", 17); // 構(gòu)造函數(shù)調(diào)用需要新建對(duì)象
var p2 = people("name", 19);
添加屬性/函數(shù)(即方法，類似于數(shù)組中的arr.length)
注意對(duì)象和JSON的區(qū)別尤蒿。
添加方式：
1郑气、. 的方式添加屬性
//創(chuàng)建person對(duì)象
var person1 = new Object();
// var person2 = {};
// 給person對(duì)象添加屬性
person1.name = 'laowang';
person1.gender = 'men';
person1.age = '20';
console.log(person);
Object即為對(duì)象，name(姓名)腰池，gender(性別)尾组，age(年齡)忙芒，即為person對(duì)象的屬性。
2讳侨、添加函數(shù)（即添加方法）
//創(chuàng)建person對(duì)象
var person = new Object();
// 給person對(duì)象添加屬性
person.name = 'laowang';
person.gender = 'men';
person.age = '20';
// 給對(duì)象添加函數(shù)(方法)匕争，類似于數(shù)組中arr.length
person.sayHello = function () {
// 在函數(shù)內(nèi)部可以使用this，誰(shuí)調(diào)用這個(gè)函數(shù)爷耀，this就代表誰(shuí)
console.log(this.name,this.gender,this.age);
}
person.sayHello();
由上面代碼可以看出我們給person對(duì)象添加sayHello()方法甘桑，然后利用此方法就可以直接打印出隔壁老王的姓名、性別和年齡歹叮。
3跑杭、原型鏈的方式
二、JS的原型鏈
Js所有的函數(shù)都有一個(gè)prototype屬性咆耿，這個(gè)屬性引用了一個(gè)對(duì)象德谅，即原型對(duì)象，也簡(jiǎn)稱原型萨螺。這個(gè)函數(shù)包括構(gòu)造函數(shù)和普通函數(shù)窄做，我們講的更多是構(gòu)造函數(shù)的原型，但是也不能否定普通函數(shù)也有原型慰技。所謂原型鏈椭盏，即原型所有的屬性，其下所有子‘類’也具有相同屬性吻商，由此往下繼承即為原型鏈掏颊。
作用：可以給‘類’添加屬性和方法
1、Array.prototype.index = 10;
2艾帐、Array.prototype.show = function () {};
// 構(gòu)造函數(shù)
function Person(name, age) {
this.name = name;
this.age = age;
this.show = function () {
console.log(this.name, this.age);
}
}
// 創(chuàng)建對(duì)象
var p = new Person('2d', 12);
// Person.prototype拿到原型乌叶，給原型設(shè)置屬性
Person.prototype.gender = "haha";
// 拿到Object原型，設(shè)置屬性柒爸，所有人都有index屬性
Object.prototype.index = 1345;
// 拿到Object原型准浴，設(shè)置屬性，也可以添加方法show()捎稚，誰(shuí)調(diào)用就打印誰(shuí)乐横。
Object.prototype.show = function () {
console.log(this);
};
console.log(p.gender);
console.log(p.index);
// 用Object的show()方法打印flag和數(shù)組
var flag = true;
flag.show();
var arr = [24, 24];
arr.show();
三、繼承
讓一個(gè)‘類’擁有另一個(gè)‘類’的屬性和方法阳藻。
此處有三點(diǎn)需要注意：
1晰奖、call()和apply()方法的用法
語(yǔ)法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象腥泥。
apply方法：
語(yǔ)法：apply([thisObj ，arguments)
定義：應(yīng)用某一對(duì)象的一個(gè)方法啃匿，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象蛔外。
call, apply方法都是用于改變this的指向蛆楞。區(qū)別是,從第二個(gè)參數(shù)起, call方法參數(shù)將依次傳遞給借用的方法作參數(shù), 而apply直接將這些參數(shù)放到一個(gè)數(shù)組中再傳遞, 最后借用方法的參數(shù)列表是一樣的.
// 構(gòu)造函數(shù)
function Person (name,age) {
this.name = name;
this.age = age;
this.show = function () {
console.log(this.name,this.age);
};
};
//讓student繼承Person
function Student(name,age,major) {
// 讓this調(diào)用Person構(gòu)造函數(shù)，name/age作為參數(shù)傳遞夹厌；
// Person.call(this,name,age);
Person.apply(this,arguments);
// 處理自己特殊的屬性和方法
this.major = major;
this.show = function () {
console.log(this.name,this.age,this.major);
};
}
// 新建Student對(duì)象豹爹，傳遞參數(shù)
var stu = new Student('laowang',19,'PS');
console.log(stu.name,stu.age,stu.major);
stu.show();
上述代碼中person對(duì)象的屬性，我們可以通過(guò)call()或者apply()方法改變this的指向矛纹，使Stuend對(duì)象來(lái)繼承person的屬性臂聋。
2、方法調(diào)用的順序
我們構(gòu)造一個(gè)函數(shù)或南，然后給它的原型添加屬性孩等，它的子類會(huì)繼承它本身的屬性而不會(huì)，繼承它原型的屬性采够；如果一定要子類繼承它原型的屬性必須把父類的原型賦給子類的原型肄方。
// 構(gòu)造函數(shù)Person
function Person(name, age){
this.name = name;
this.age = age;
this.show = function () {
console.log(this.name, this.age);
}
}
// 給Person的原型添加gender屬性
Person.prototype.gender = "man";
// 構(gòu)造函數(shù)
function Student(name, age, major) {
// 讓Student繼承Person的屬性，將所有參數(shù)作為集合進(jìn)行傳遞
Person.apply(this,arguments)
// 處理自己特殊的屬性和方法
this.major = major;
this.show = function () {
console.log(this.name, this.age, this.major);
}
}
// 將Person的原型賦給Student的原型
Student.prototype = Person.prototype;
// 調(diào)用Person的屬性
var p = new Person('laowang',20);
console.log(p.gender);
// 調(diào)用Student的屬性
var student = new Student('xiaoming', 18, 'CAD');
student.show()
// 如果未將父級(jí)的原型賦給子級(jí)的原型此處將是undefined
console.log(student.gender);
上述代碼中我們構(gòu)造Person函數(shù)后蹬癌，給它的原型添加gender(性別)屬性权她，它的子級(jí)Student雖然繼承了它的所有屬性，但是卻沒(méi)有繼承g(shù)ender屬性逝薪，為了使Student繼承g(shù)ender屬性隅要，我們需要把Person的原型賦給Student的原型，代碼執(zhí)行效果如下：
當(dāng)父類的原型董济、父類拾徙、子類的原型和子類都具有一個(gè)相同的屬性時(shí)，優(yōu)先調(diào)用子類的屬性感局；調(diào)用屬性是如果子類沒(méi)有該屬性尼啡，會(huì)從其父類中查找，如果父類沒(méi)有询微，就從子類的原型中查找崖瞭，如果子類的原型中也沒(méi)有就從父類的原型中調(diào)用，如果父類的原型中也沒(méi)有（注意：要從父類的原型中查找首先要將父類的原型賦給子類的原型）撑毛，就從Object中查找书聚。
// 給Object的原型添加方法
Object.prototype.show = function () {
console.log("Object");
}
function Obj1(){
this.show = function () {
console.log('Obj1');
}
}
// 給Obj1的原型添加show()方法
Obj1.prototype.show = function () {
console.log('prototype.Obj1')
}
function Obj2() {
// 讓Obj2繼承Obj1的屬性
Obj1.apply(this,arguments)
this.show = function () {
console.log('Obj2');
}
}
// 將Obj1的原型賦給Obj2的原型
Obj2.prototype = Obj1.prototype;
// 給Obj2的原型添加show()方法
Obj2.prototype.show = function () {
console.log('prototype.Obj2');
}
// 調(diào)用Obj2的屬性
var Obj2 = new Obj2();
Obj2.show()
上面的代碼我們可以看出Object、Obj1藻雌、Obj1.prototype雌续、Obj2、Obj2.prototype都擁有show()方法胯杭，我們使Obj2繼承Obj1的所有屬性驯杜，并且將Obj1的原型賦給Obj2的原型，然后我們新建一個(gè)對(duì)象調(diào)用show()方法做个。那么問(wèn)題來(lái)了鸽心，它到底會(huì)調(diào)用誰(shuí)的方法呢滚局？首先肯定是調(diào)用Obj2的方法，但是當(dāng)我們把Obj2的方法注釋掉的時(shí)候它會(huì)調(diào)用誰(shuí)的呢顽频，通過(guò)執(zhí)行代碼我們會(huì)發(fā)先藤肢，它執(zhí)行的是Obj1的方法，如果我們?cè)侔袿bj1的方法注釋掉的時(shí)候它又會(huì)調(diào)用誰(shuí)的呢糯景？通過(guò)執(zhí)行代碼我們會(huì)發(fā)現(xiàn)show()方法調(diào)用的順序是嘁圈，先從Obj2開(kāi)始，依次是Obj1蟀淮，Obj2的原型最住，Obj1的原型，Object灭贷。
為避免發(fā)生以上問(wèn)題温学，我們?cè)诿麑傩悦麜r(shí)應(yīng)盡可能地避免屬性名重復(fù)。
3甚疟、原型賦值會(huì)進(jìn)行完全覆蓋覆蓋
如果將父類的原型賦值給子類的原型會(huì)發(fā)生仗岖，完全覆蓋，如果想避免覆蓋可以用for/in循環(huán)遍歷父類的原型览妖，來(lái)逐個(gè)添加轧拄。
// 構(gòu)造函數(shù)Person
function Person(name, age){
this.name = name;
this.age = age;
this.show = function () {
console.log(this.name, this.age);
}
}
// 給Person的原型添加gender屬性
Person.prototype.gender = "man";
// 構(gòu)造函數(shù)
function Student(name, age, major) {
// 讓Student繼承Person的屬性，將所有參數(shù)作為集合進(jìn)行傳遞
Person.apply(this,arguments)
// 處理自己特殊的屬性和方法
this.major = major;
this.show = function () {
console.log(this.name, this.age, this.major);
}
}
// 給Student的原型添加height(身高)屬性
Student.prototype.height = 180;
// 將Person的原型賦給Student的原型
// Student.prototype = Person.prototype;
// 循環(huán)遍歷Person的原型將其屬性逐個(gè)賦給Student的原型
for ( key in Person.prototype) {
Student.prototype[key] = Person.prototype[key]
}
// 調(diào)用Student的屬性
var student = new Student('xiaoming', 18, 'CAD');
console.log(student.height);
上述帶碼中我們先給Person的原型添加了gender屬性讽膏，之后又給Student的原型添加了height屬性檩电，為了使Student也能繼承g(shù)ender的屬性，我們將Person的原型賦給Student的原型府树。那么問(wèn)題來(lái)了俐末，此時(shí)我們?cè)僬{(diào)用height屬性時(shí)，顯示的是undefined奄侠，為什么會(huì)發(fā)生這種情況呢卓箫？就是因?yàn)镻erson的原型將Student的原型完全覆蓋了，想要解決這個(gè)問(wèn)題很顯然我們只需要改變一下代碼順序即可垄潮，但是如果我們就想要代碼這么排列怎么辦呢烹卒？此時(shí)我們就需要用到for/in循環(huán)，遍歷Person的原型中的所有屬性依次給Student的原型賦值即可解決完全覆蓋的問(wèn)題弯洗。代碼執(zhí)行效果如下：
四旅急、給原始對(duì)象添加方法
1、Array
給數(shù)組添加addOne()方法牡整，讓所有調(diào)用此方法的數(shù)組中所有的元素全部加1藐吮。
// 給數(shù)組添加方法addOne()讓數(shù)組中所有的元素全部加1
// 第一步：給數(shù)組原型添加方法
Array.prototype.addOne = function () {
// 第二步：聲明數(shù)組，遍歷數(shù)組中的元素
var newArray = [];
for (var i = 0; i < this.length; i++) {
newArray[i] = this[i] + 1;
}
// 第三步：返回新數(shù)組
return newArray;
};
var array = [134, 456, 89, 234, 568, 76543, 45678];
var newArray = array.addOne();
console.log(array);
console.log(newArray);
var age = [12, 34, 26, 78, 12];
var newAge = age.addOne();
console.log(age);
console.log(newAge);
// 給數(shù)組添加show()方法，調(diào)用此方法是打印該數(shù)組
Array.prototype.show = function () {
console.log(this);
};
age.show();
newAge.show();
2炎码、String
給字符串添加trim()方法盟迟，使所有調(diào)用此方法的字符串秋泳，去掉首尾空格潦闲，中間多個(gè)空格改為一個(gè)空格。
// trim()首尾空格去掉迫皱，中間多個(gè)空格改為一個(gè)空格
//第一步：給string原型添加方法
String.prototype.trim = function () {
// 第二步：采用正則表達(dá)式進(jìn)行替換
var res = this.replace(/^\s+|\s+$/g, "");
res = res.replace(/\s+/g, " ");
// 返回替換的值
return res;
}
var str = ' hsskfhsfu ewe eworew ';
var res = str.trim();
console.log("(" + str + ")");
console.log('('+res+')');
3歉闰、Date
給日期添加方法getWeek()獲取當(dāng)天是星期幾。
// 給日期添加方法getWeek()獲取當(dāng)天是星期幾
// 第一步：給Date原型添加方法
Date.prototype.getWeek = function () {
// 第二步：聲明數(shù)組卓起，保存所有結(jié)果
var array = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六' ]
// 第三步：獲取星期幾的數(shù)字
var index = this.getDay();
// 第四步：根據(jù)星期幾從數(shù)組中取出內(nèi)容和敬，并返回
return array[index]
}
var nowDate = new Date();
var res = nowDate.getWeek();
console.log(res);
五、instanceof
作用：判斷某個(gè)對(duì)象是不是屬于某個(gè)‘類’戏阅。
var arr = new Array();
var arr2 = [];
console.log(arr instanceof Array); // true
console.log(arr2 instanceof Array); // true
var str = new String();
var str2 = "";
console.log(str instanceof String); // true
console.log(str2 instanceof String); // false
function Person() {
}
var p = new Person();
console.log(p instanceof Person); // true
console.log(p instanceof Object); // true
console.log(Array instanceof Array); // false
console.log(String instanceof String); // false
console.log(Object instanceof Object); // true
console.log(Array instanceof Object); // true
var a = new Array;
console.log(a);
六昼弟、對(duì)象的克隆
1、類型：值類型奕筐、引用類型舱痘。
值類型：string(字符串)，number(數(shù)字)离赫，boolean(布爾值)
引用類型：Array(數(shù)組)芭逝，JSON，Object(對(duì)象)渊胸，Date(時(shí)間日期對(duì)象)………
2旬盯、克隆引用類型
原理：
轉(zhuǎn)為JSON字符串: var jsonStr = JSON.stringify(obj);
再?gòu)腏SON字符串轉(zhuǎn)化為對(duì)象： var obj = JSON.parse(jsonStr);
var a = 10;
var b = a;
b = 13456;
console.log(a);
var arr = [134, 45];
var arr2 = arr;
arr2[0] = 1234567890;
console.log(arr);
從上面的代碼可以看出當(dāng)我們把a(bǔ)賦給b時(shí)，我們改變變量b的值時(shí)翎猛，變量a的值不會(huì)發(fā)生變化胖翰；當(dāng)我們用arr給arr2賦值時(shí)，當(dāng)我們改變arr2的第一個(gè)元素的值時(shí)切厘，數(shù)組arr的值也會(huì)隨之發(fā)生改變萨咳。以下代碼便可幫我們復(fù)制元素。
Object.prototype.copy = function () {
// console.log(this instanceof Array);
// 判斷是否是數(shù)組
if (Array.isArray(this)) {
var jsonStr = JSON.stringify(this);
return JSON.parse(jsonStr);
} else { // other
// 創(chuàng)建新對(duì)象
var newObj = new Object();
// 把this中的每個(gè)屬性和方法都賦值到新對(duì)象中
for (key in this) {
newObj[key] = this[key];
}
return newObj;
}
};
var arr = [134, 4567, 678];
var newArr = arr.copy();
// newArr[0] = 1000;
// console.log(arr);
// console.log(newArr);
var person1 = {
name: "haha",
age: 18,
test: function () {
console.log(this.age);
}
};
var newPerson = person1.copy();
newPerson.name = "heheheh";
newPerson.age = 19;
console.log(person1);
console.log(newPerson);
person1.test();
newPerson.test();
七迂卢、制作JQ插件
此處主要是給JQ原型或者$添加屬性某弦，因此需要用到以下兩個(gè)屬性：
$.extend({
funcName: function () {
}
}); 拓展給$
$.fn.extend({
funcName: function () {
}
}); 拓展給JQ
一般建議給JQ添加。
1而克、封裝圖片放大效果：
我們要做圖片放大插件的效果就是靶壮，用戶下載好插件的文件后，只需引入JQ和我們做好插件员萍，并在html中放一張圖片腾降，然后在js中獲取圖片調(diào)用一個(gè)方法，再提供一大一小兩張相同圖片的路徑作為參數(shù)即可實(shí)現(xiàn)碎绎，圖片放大效果螃壤。
首先我們寫(xiě)一個(gè)模板做好html布局代碼如下：
<body>
<div class="min-wrap">
<img src="images/min.jpg" alt="" />
<div id="slider"></div>
</div>
<div class="max-wrap">
<img src="images/max.jpg" alt="" />
</div>
</body>
布局完成后設(shè)置css樣式抗果，并將其單獨(dú)存放在一個(gè)css文件中：
.min-wrap {
border: 1px solid black;
position: relative;
width: 300px;
left: 10px;
top: 20px;
}
.min-wrap img {
width: 100%;
}
#slider {
background: url(images/dian.png);
width: 150px;
height: 150px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.max-wrap {
border: 1px solid black;
width: 400px;
height: 400px;
overflow: hidden;
position: absolute;
left: 330px;
top: 20px;
display: none;
}
然后我們開(kāi)始寫(xiě)JS文件，我們要先獲取head標(biāo)簽,在其中插入link標(biāo)簽引入我們寫(xiě)好的css文件奸晴，然后將我們寫(xiě)好的結(jié)構(gòu)插入到用戶提供的img標(biāo)簽后冤馏，使用我們寫(xiě)好的結(jié)構(gòu)和樣式，如此布局就算完成寄啼，之后我們按正常實(shí)現(xiàn)圖片放大的效果寫(xiě)JS代碼即可逮光。
$.fn.extend({
fang: function (minImgPath, maxImgPath) {
// 引入樣式文件
$('head').eq(0).append('<link rel="stylesheet" href="fang.css">');
// 新結(jié)構(gòu)
var htmlStr = $('<div class="min-wrap">' +
'<img src="'+ minImgPath +'" alt="" />' +
'<div id="slider"></div>' +
'</div>' +
'<div class="max-wrap">' +
'<img src="'+ maxImgPath +'" alt="" />' +
'</div>');
// 拼接到image后面
this.after(htmlStr);
this.remove();
// 獲取元素
var minWrap = $('.min-wrap');
var slider = $('#slider');
var maxWrap = $('.max-wrap');
var maxImg = $('.max-wrap img');
// 綁定事件
minWrap.on('mousemove', function (e) {
slider.show();
maxWrap.show();
var x = e.clientX - minWrap.offset().left - slider.width() / 2;
var y = e.clientY - minWrap.offset().top - slider.height() / 2;
// 判斷臨界值
if (x < 0) {
x = 0;
} else if (x > minWrap.width() - slider.width()) {
x = minWrap.width() - slider.width();
}
if (y < 0) {
y = 0;
} else if (y > minWrap.height() - slider.height()) {
y = minWrap.height() - slider.height();
}
// 移動(dòng)slider
slider.css({
left: x + "px",
top: y + "px"
});
// 修改maxWrap的滾動(dòng)
var scale = {
x: x / (minWrap.width() - slider.width()),
y: y / (minWrap.height() - slider.height())
};
var maxWrapLeft = (maxImg.width() - maxWrap.width()) * scale.x;
var maxWrapTop = (maxImg.height() - maxWrap.height()) * scale.y;
maxWrap.scrollLeft(maxWrapLeft);
maxWrap.scrollTop(maxWrapTop);
});
minWrap.on('mouseout', function () {
slider.hide();
maxWrap.hide();
});
}
});
用戶使用的時(shí)候只需引入JQuery和我們寫(xiě)好的JS文件，然后使用fang()方法將大小兩張圖片的路徑做為參數(shù)墩划，即可實(shí)現(xiàn)效果涕刚。
八、練習(xí)
1乙帮、Tab切換
原生JS版代碼
普通版Tap切換
// 普通版Tap切換
var inputs = document.getElementsByTagName('input');
var show = document.getElementsByClassName("show");
for (var i = 0; i < inputs.length; i++) {
inputs[i].index = i;
inputs[i].onclick = function () {
for (var j = 0; j < inputs.length; j++) {
show[j].style.display = 'none';
}
show[this.index].style.display = 'block';
}
}
面向?qū)ο蟀?/p>
// 面向?qū)ο蟀郥ab切換
// 構(gòu)造函數(shù)
function Tap () {
// 聲明變量保存所有的div和input
this.inputs = document.getElementsByTagName("input");
this.divs = document.getElementsByClassName("show");
// 聲明變量保存this
var mythis = this;
// 遍歷所有按鈕
for (var i = 0; i < this.inputs.length; i++) {
// 自定義按鈕下標(biāo)
this.inputs[i].index = i;
// 為所有按鈕綁定事件
this.inputs[i].onclick = function () {
// 讓Tab對(duì)象調(diào)用原型的方法將this作為參數(shù)進(jìn)行傳遞
mythis.click(this)
}
}
}
// 為Tab的原型添加方法
Tap.prototype.click = function (obj) {
for (var i = 0; i < this.inputs.length; i++) {
this.divs[i].style.display = 'none';
}
this.divs[obj.index].style.display = 'block';
}
// 調(diào)用函數(shù)
var tab = new Tap();
JQuery版代碼
普通版tab切換
// 普通版tab切換
$('input').click(function () {
$('.show').hide()
$('.show').eq($(this).index()).show()
})
面向?qū)ο蟀?/p>
// 面向?qū)ο蟀郥ab切換
// 構(gòu)造函數(shù)
function Tab() {
// 聲明兩個(gè)屬性杜漠，保存所有的input和div
this.inputs = $('input');
this.divs = $('.show');
// 使第一個(gè)div處于顯示的狀態(tài)
this.divs.eq(0).show();
// 使用變量保存對(duì)象的this
var mythis = this;
// 給所有的按鈕綁定事件，點(diǎn)擊按鈕時(shí)使對(duì)象調(diào)用原型的方法
this.inputs.click(function () {
mythis.myclick(this)
})
}
// 給Tab的原型添加方法
Tab.prototype.myclick = function (obj) {
this.divs.hide();
this.divs.eq($(obj).index()).show();
}
var tab = new Tab();
2察净、躁動(dòng)的小球
原生JS普通版
// 獲取元素
var box = document.getElementsByClassName('box')[0];
// 聲明函數(shù)驾茴，生成隨機(jī)整數(shù)
var randomFun = function (max, min) {
return parseInt(Math.random()*(max - min + 1) + min);
}
// 聲明函數(shù)設(shè)置隨機(jī)顏色
var colorFun = function () {
return 'rgba('+ randomFun(255,0) +','+ randomFun(255,0) +',' + randomFun(255,0)+ ',' + (Math.random() + 0.1) + ')';
}
// 循環(huán)創(chuàng)建小球
for (var i = 0; i < 500; i++) {
// 聲明變量設(shè)置小球?qū)捀? var w = randomFun(80, 20);
// 聲明變量接收臨界值
var maxY = document.body.offsetHeight - w;
var maxX = document.body.offsetWidth - w;
// 聲明變量設(shè)置小球位置
var x = randomFun(maxX, 0);
var y = randomFun(maxY, 0);
// 創(chuàng)建小球并設(shè)置顏色
var ball = document.createElement("div");
ball.id = 'ball';
ball.style.top = y + 'px';
ball.style.left = x + 'px';
ball.style.width = w + 'px';
ball.style.height = w + 'px';
ball.style.backgroundColor = colorFun();
box.appendChild(ball)
}
面向?qū)ο蟀?/p>
// 一、獲取元素
var box = document.getElementsByClassName('box')[0];
// 二塞绿、聲明函數(shù)生成隨機(jī)整數(shù)沟涨，用于設(shè)置小球?qū)捀撸€有top和left值
var randomFun = function (max, min) {
return parseInt(Math.random()*(max - min + 1) + min);
}
// 三异吻、聲明函數(shù)設(shè)置隨機(jī)顏色
var colorFun = function () {
return 'rgba('+ randomFun(255,0) +','+ randomFun(255,0) +',' + randomFun(255,0)+ ',' + (Math.random() + 0.1) + ')';
}
// 四裹赴、獲取屏幕的寬度和高度用于判斷top和left的臨界值
var maxY = document.body.offsetHeight;
var maxX = document.body.offsetWidth;
// 五、構(gòu)造函數(shù)為小球添加寬高诀浪、坐標(biāo)棋返、顏色、父級(jí)等屬性雷猪，并設(shè)置方法睛竣。
var Ball = function(x, y, h, w, color, parent) {
// 聲明變量設(shè)置隨機(jī)寬度
var wAndH = randomFun(80, 20);
// 為構(gòu)造函數(shù)添加屬性，如果有參數(shù)返回參數(shù)求摇，否則返回隨機(jī)x坐標(biāo)射沟。
this.x = x || randomFun(maxX-wAndH,0);
this.y = y || randomFun(maxY-wAndH,0);
this.h = h || wAndH;
this.w = w || wAndH;
this.color = color || colorFun();
this.parent = parent || box;
this.ball = document.createElement("div");
// 設(shè)置方法
this.show = function () {
this.ball.id = 'ball';
this.ball.style.width = this.w + 'px';
this.ball.style.height = this.h + 'px';
this.ball.style.top = this.y + 'px';
this.ball.style.left = this.x + 'px';
this.ball.style.backgroundColor = this.color;
this.parent.appendChild(this.ball);
}
}
// 六、循環(huán)創(chuàng)建對(duì)象与境，并調(diào)用該方法
for (var i = 0; i < 500; i++) {
var ball = new Ball();
ball.show();
}
以上內(nèi)容純屬個(gè)人理解验夯，由于水平有限，若有錯(cuò)漏之處敬請(qǐng)指出斧正摔刁，小弟不勝感激挥转。
