對(duì)象是從我們現(xiàn)實(shí)生活中抽象出來(lái)的一個(gè)概念，俗話(huà)說(shuō)物以類(lèi)聚，人以群分，我們也經(jīng)常說(shuō)有一類(lèi)人，他們專(zhuān)業(yè)給隔壁家制造驚喜，也就是我們說(shuō)的老王。
這里面就有兩個(gè)重要概念
類(lèi)：無(wú)論是物以類(lèi)聚，還是有一類(lèi)人，這里說(shuō)的類(lèi)并不是實(shí)際存在的事物，是一些特征、是一些規(guī)則等。
老王：這是個(gè)實(shí)物，是現(xiàn)實(shí)存在，和類(lèi)的關(guān)系就是符合類(lèi)的描述
對(duì)應(yīng)到計(jì)算機(jī)術(shù)語(yǔ)，類(lèi)就是class，定義了一些特點(diǎn)（屬性 property）和行為（方法 method），比如說(shuō)給隔壁制造驚喜的這類(lèi)人有幾個(gè)特征：
長(zhǎng)相文質(zhì)彬彬，為人和善；
姓王；
同時(shí)這些人還有技能（行為）：
幫隔壁修下水道；
親切問(wèn)候?qū)Ψ絻鹤樱?br>
符合這些特點(diǎn)并且有上述行為能力的，我們稱(chēng)之為老王。從描述我們就可以看出來(lái)LaoWang不是指某個(gè)人，而是指一類(lèi)人，符合上述描述的都可能是老王！用計(jì)算機(jī)術(shù)語(yǔ)說(shuō)就是沒(méi)個(gè)活蹦亂跳的老王都是類(lèi)LaoWang。
一、創(chuàng)建對(duì)象
創(chuàng)建方式
1、使用new方式，使用typeof可以查看數(shù)據(jù)類(lèi)型。
//創(chuàng)建person對(duì)象
var person = new Object();
//查看數(shù)據(jù)類(lèi)型
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ù)類(lèi)似。
// 工廠設(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ù)(即方法，類(lèi)似于數(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ù)(方法)，類(lèi)似于數(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)稱(chēng)原型。這個(gè)函數(shù)包括構(gòu)造函數(shù)和普通函數(shù)，我們講的更多是構(gòu)造函數(shù)的原型，但是也不能否定普通函數(shù)也有原型。所謂原型鏈，即原型所有的屬性，其下所有子‘類(lèi)’也具有相同屬性，由此往下繼承即為原型鏈。
作用：可以給‘類(lèi)’添加屬性和方法
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è)‘類(lèi)’擁有另一個(gè)‘類(lèi)’的屬性和方法。
此處有三點(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ù)，然后給它的原型添加屬性，它的子類(lèi)會(huì)繼承它本身的屬性而不會(huì)，繼承它原型的屬性；如果一定要子類(lèi)繼承它原型的屬性必須把父類(lèi)的原型賦給子類(lèi)的原型。
// 構(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)父類(lèi)的原型、父類(lèi)、子類(lèi)的原型和子類(lèi)都具有一個(gè)相同的屬性時(shí)，優(yōu)先調(diào)用子類(lèi)的屬性；調(diào)用屬性是如果子類(lèi)沒(méi)有該屬性，會(huì)從其父類(lèi)中查找，如果父類(lèi)沒(méi)有，就從子類(lèi)的原型中查找，如果子類(lèi)的原型中也沒(méi)有就從父類(lèi)的原型中調(diào)用，如果父類(lèi)的原型中也沒(méi)有（注意：要從父類(lèi)的原型中查找首先要將父類(lèi)的原型賦給子類(lè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)行完全覆蓋覆蓋
如果將父類(lèi)的原型賦值給子類(lèi)的原型會(huì)發(fā)生，完全覆蓋，如果想避免覆蓋可以用for/in循環(huán)遍歷父類(lèi)的原型，來(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è)‘類(lèi)’。
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、類(lèi)型：值類(lèi)型、引用類(lèi)型。
值類(lèi)型：string(字符串)，number(數(shù)字)，boolean(布爾值)
引用類(lèi)型：Array(數(shù)組)，JSON，Object(對(duì)象)，Date(時(shí)間日期對(duì)象)………
2、克隆引用類(lèi)型
原理：
轉(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、封裝圖片放大效果：
我們要做圖片放大插件的效果就是，用戶(hù)下載好插件的文件后，只需引入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)插入到用戶(hù)提供的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();
});
}
});
用戶(hù)使用的時(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)
}
}
}
// 為T(mén)ab的原型添加方法
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)指出斧正，小弟不勝感激。
