HTML 學習筆記 May 12，2017 JS 面向對象三大特征（封裝瓣窄、繼承笛厦、多態(tài)）纳鼎、多態(tài)經典案例俺夕、補講閉包細節(jié)、js內部類贱鄙、js系統(tǒng)函數劝贸、js事件驅動機制、js事件分類逗宁、js訪問css技術
js 面向對象編程的三大特性映九，
① 封裝
通過prototype 給所有的對象和方法，但是這種方式瞎颗，不能訪問類的私有變量和方法件甥。
② 繼承
解決代碼冗余問題
function Stu (name,age) {
this.name = name;
this.age = age;
this.show = function() {
window.alert(this.name + " " + this.age);
}
}
function MidStu (name,age) {
this.stu = Stu;
this.stu(name,age); // js 中實際上是通過對象冒充,來實現繼承,這句話不能少
}
function Pupil (name,age) {
this.stu = Stu;
this.stu(name,age);
}
var midStu = new MidStu("doudou",20);
midStu.show();
現在來看一個多態(tài)的栗子??
function Master () {
// 給動物喂食
this.feed = function (animal,food) {
document.write("主人給" + animal.name + "喂" + food.name);
}
}
// 寫食物
function Food(name) {
this.name = name;
// ...
}
// 魚
function Fish(name) {
this.food = Food;
this.food(name);
}
// 骨頭
function Bone(name) {
this.food = Food;
this.food(name);
}
// 動物
function Animal(name) {
this.name = name;
// ...
}
// 貓
function Cat(name) {
this.animal = Animal; // 對象冒充
this.animal(name);
}
// 狗
function Dog(name) {
this.animal = Animal;
this.animal(name);
}
var cat = new Cat("小貓咪");
var dog = new Dog("小狗");
var fish = new Fish("小魚");
var bone = new Bone("骨頭");
var master = new Master();
master.feed(cat,fish); // 主人給小貓咪喂小魚
master.feed(dog,bone); // 主人給小狗喂骨頭
閉包
// 閉包
function A() {
var i = 0;
function b() {
window.alert(i++);
}
return b;
}
// 閉包<--->gc 是個垃圾回收機制相關聯(lián)的一個概念
A(); // 調用完之后 i 會被回收
A(); //
var c = A(); // 調用完之后 i 不會被回收
c(); // 0
c(); // 1
① 閉包和 gc（垃圾回收機制） 是相關聯(lián)的
② 閉包實際上是涉及到一個對象的屬性，何時被 gc 處理問題
③ 怎樣才能對對象的屬性形成一個閉包
內部類的分類：
從使用的方式看：分為靜態(tài)類和動態(tài)類哼拔。
靜態(tài)類的使用：類名.屬性/方法
動態(tài)類：var 對象 = new 動態(tài)類（）對象 屬性/方法
Math 類
① abs（x） 返回數的絕對值
② ceil（x） 對一個數進行上舍入
③ floor（x） 對一個數進行下舍入
④ max（x引有，y） 求 x，y 中較大的數
⑤ min（x倦逐，y） 求 x譬正，y 中較小的數
⑥ round（x） 對 x 進行四舍五入
⑦ random（） 一個大于0 小于1 的16位小數位的數字
var date = new Date();
window.alert(new Date()); // Fri May 12 2017 15:06:45 GMT+0800 (CST)
window.alert(new Date().toLocaleString()); // 5/12/2017, 3:07:50 PM
window.alert(date);
window.alert(date.getYear() + " " + date.getMonth()); // 117 04 //這個時間有點奇怪,不知道是哪里出問題了
Date類
**********這里是截取字符串*********
var str = "abcd12345";
window.alert(str.length);
var str2 = "abc def oop";
var arr = str2.split(" "); // 如果("")就是一個一個分
window.alert(arr);
var str3 = "abcdef";
window.alert(str3.substr(1,3)); // bcd 從坐標 1 開始 截取 3 個數
window.alert(str3.substring(1,3)); // bc 從坐標 1 到 3
String 類
var str = "abcd12345";
window.alert(str.length);
var str2 = "abc def oop";
var arr = str2.split(" "); // 如果("")就是一個一個分
window.alert(arr);
var str3 = "abcdef";
window.alert(str3.substr(1,3)); // bcd 從坐標 1 開始 截取 3 個數
window.alert(str3.substring(1,3)); // bc 從坐標 1 到 3
var str4 = "abcd";
window.alert("chart" + str4.charAt(3)); // chartd
var str5 = "ab 123 56 ab";
window.alert("indexof" + str5.indexOf("ab",1)); // indexof10
Array 類
var myarr = new Array();
// 動態(tài)的添加數據
myarr[0] = "sp";
myarr[1] = 90;
window.alert(myarr.length + " " + myarr); // 2 sp 90
myarr.pop(); // 出棧
window.alert(myarr.length + " " + myarr); // 1 sp
myarr.push("abcd");
window.alert(myarr.length + " " + myarr); // 2 sp abcd
Number 類
① toString （） 把一個Number 對象轉換為一個字符串，并返回結果檬姥。
② toFixed（） 把數字轉換為字符串曾我，結果的小數點后有指定位數的數字。// 這個是四舍五入的
js 系統(tǒng)函數-- 常用系統(tǒng)函數
1健民、eval（） // 可以把一個字符串當作腳本來運行抒巢，用處很大；
2秉犹、isNaN（） // 判斷某個值是不是數（該函數不是特別完美） 蛉谜；
鼠標事件：
當用戶在頁面上用鼠標點擊頁面元素時平酿，對應的 dom 節(jié)點會觸發(fā)鼠標事件。主要有 click 悦陋、dblclick蜈彼、mousedown沸手、mouseout卷雕、mouseover、mouseover闰渔、mouseup暮现、mousemove等
鍵盤事件：
當用戶用鍵盤輸入信息時还绘，會觸發(fā)鍵盤操作事件。主要包括keydown栖袋、keypress拍顷、keyup三個。
HTML 事件：
在 html 節(jié)點加載變更等相關的事件塘幅，比如window的onload昔案、unload、abort电媳、error踏揣，文本框的select、change等等匾乓。
其他事件：
頁面中的一些特殊對象運行過程中產生的事件捞稿，比如xmlhttp request 對象的相關事件。
這個包括ajax事件拼缝，O(∩_∩)O哈哈~
