javascript 基礎知識點總結（一）

• JS效果三要素:

1. 時間
2. 事件
3. 運動軌跡(分步驟來實現先死後活法逐步來)

(1)獲取元素 :

• getElementById()----靜態方法,前面只能跟隨document
• document.body,document.title ----頁面上只有一個的元素
• getElementsByTagName()-----動態方法,前面可以是document也可以跟其他元素，返回的是一個類似數組的集合
• (1)有類似數組的length
• (2)有類似數組的應用方式例如:ali[0]
• (3)再用TagName的時候必須要加上[]
• (4)所謂的動態方法,是指通過js動態添加的元素，getElementsByTagName()也可以找到
• 但是document.getElementById是找不到的

(2)事件:

事件:鼠標事件，鍵盤事件,系統事件,表單事件,自定義事件等等

• onclick
• onmouseover
• onmouseleave
• onmousedown
• onmouseout
• onmouseup
• onmousemove
• ......

添加事件

元素.onmouseover

函數

函數可以理解為方法,工具比如

function abc(){
 /*要做的事情*/
}

• 直接調用就是abc()
• 事件調用: 元素.事件 = 函數名
• 匿名函數

 元素.onmouseover = function(){} 

 window.alert(1); window.alert("ok");

變量

變量就是變化的量,由數字，字母，下劃線，美元($)組成.但是開頭不能用數字。定義一個變量必須用var也可以用window["xxx"]

• var li = document.getElementById("list");
• var num = 123;
• var name = "leo";

JS屬性操作(重點)

• 屬性名
• 屬性值
• 屬性的讀取操作:獲取,找到
• 元素.屬性名
• 屬性的寫操作:替換，修改
• 元素.屬性名 = 新的值
• 添加的話需要用+=
• innerHTML讀取元素內所有的HTML代碼

屬性讀寫操作的注意事項

• JS屬性中不允許出現"-",例如font-size改為fontSize
• class在JS裡面是保留字,在JS作用class要用className
• 4個絕對不要判斷
• 1.相對路徑(src ,href)
• 2.顏色值
• 3.innerHTML值也不要(IE678可能有空格)
• 4.type類型也不要判斷.因為IE678下面type更改不了
• []的使用

1. 點"."後面的值無法修改
2. []裡面的值可以修改,JS允許把.替換成[] 例如style[attr]這樣的

條件判斷

• if(){}
• if(){}else{}
• if(){}else if(){}else if(){}

數組

• 放數據的倉庫
• 中括號[],間隔用逗號,最後一個數據不要加逗號
• 數組的length屬性

自定義索引和屬性

自定義屬性 abtn[0].abc = 123; //自定義屬性

自定義屬性賦值 obj.timer = setInterval(function(){},1000); //自定義屬性賦值

數據類型

6大類

• 空
• 對象
• undefined
• Boolean
• String
• number

(1)要是基礎類型可以用typeOf()來判斷

字符串方法charAt(),獲取到字符串第幾個charCodeAt()獲取到UniCode編碼。然後在計算。再利用fromCharCode()換算成字符

(2)要是引用類型可以用instanceOf Array;instanceOf Object 來判斷

Number()方法能轉化字符串數字，空，空數組，要是前面有0比如00100轉化的結果就是100

parseInt()相當於把前面的數字部分轉化為數字，後面的字符直接捨棄.他轉化不了空，真要是轉化空結果就是NaN

parseFloat()同上

isNaN()判斷是不是NaN

作用域重點

• 域：空間，範圍，區域
• 作用:讀，寫

(1)在JS找到變量前，他要做的就是先找到一些關鍵字 var function,參數然後在正是運行代碼之前他把這些都提前付了一個值,undefined

遇到重名的只留一個

(2)逐行解讀代碼。每讀一行就是到庫裡面去看看，要是有值就替換，改變表達式的值

alert(a); //彈出：function a(){alert(4);}
var a=1; //預解析中的a改為了1
alert(a); //彈出1
function a(){alert(2);}//函數聲明，沒有改變a的值。什麼也沒發生。
alert(a); //繼續彈出1，因為a在預處理庫裡面的值沒有被改過。
var a=3; //預處理中a的值變為3
alert(a); //彈出3
function a(){alert(4);} //函數聲明，什麼也沒有發生
alert(a); //繼續彈出3
a(); //報錯 a is not a function
第一步: 

 預編譯他會先找一些關鍵字存儲到內存中。 比如var function 參數等等
 他找到var a 先看左邊，不看右邊.上來都給他一個未定義 var a = undefined;要是function他就直接替換了
 比如上面a從undefined直接變成了方法
 他根本不考慮後面的值
第二步:
 在一步步執行代碼
 要是遇見表達式（表達式就是 var a = xxx）他才會重新替換或者賦值

函數的作用域要區分全局變量和局部變量

在方法內部寫var的都是局部。在方法外面的都是全局變量。要是在方法裡面不加var,那他改變的就是全局的值.

特別注意的就是在JS裡面只有方法有作用域。for和if裡面都沒有作用域

真和假

• 真:非0的數字,字符串,true,函數,object,[],{}都是真的
• 假:就記住6個為假其餘都真 0,NaN,空字符串,null,false,undefined

函數返回值return

這裡特別注意下:

 fn1();
function fn1(){
 return function(){
 alert(1);
 }
}

返回的值就是function(){alert(1)}

 fn1()();
function fn1(){
 return function(){
 alert(1);
 }
}

返回的值就是1

arguments參數合集

arguments表示所有的參數合集

lert(sum(1,2,3));
function sum(){
 var n=0;
 for(var i=0; i n += arguments[i];
 }
 return n;
}

工具類

獲取到樣式

function getStyle(obj,attr)
{
 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
}

兼容IE678 獲取到樣式合集.獲取到元素的屬性值

運動函數
//封裝運動函數
 //既然是運動函數就需要傳遞幾個條件(參數)
 // 1.對象(你得知道讓誰動吧)
 // 2.方向(你得告訴他朝哪邊走吧)
 // 3.速度 (你得告訴他一次走多少吧)
 // 4.終點(你得告訴他什麼時候停止吧)
 // 5.回調函數(到達終點以後乾點什麼吧)
 function Imove(obj,attr,step,target,endfn)
 {
 //防止累加,越來越快。這樣一上來我都從0開始計算
 clearTimeout(obj.timer);
 //主要是判斷速度是正的還是負的，上來先比較。我的思路是要是目標的位置比初始的位置大，則速度肯定是正的，要是小則速度肯定是負的
 step = target>parseInt(getStyle(obj,attr))? step:-step;
 obj.timer = setInterval(function(){
 var dis = parseInt(getStyle(obj,attr))+step; //獲取到每次走了之後距離最開始的位置
 //判斷一下當走的距離要是超過了終點，則必須拉回來。要是沒超過。則繼續走.
 if(dis>=target&&step>0||dis {
 dis = target;
 }
 obj.style[attr] = dis+"px"; //給這個對象賦值，讓他自己慢慢走。
 if(dis==target) //當到達了終點了，就不讓他走了。這個時候你需要清除定時器了。因為沒用了。 

 {
 clearInterval(obj.timer); //清除定時器
 endfn&&endfn(); //執行回調方法
 }
 },100)
 }
 //封裝運動函數結束

下面是抖動函數封裝

抖動函數封裝
function shake(obj,attr,endfn) {
 var arr = [];
 for (var i = 20; i > 0; i -= 2)
 {
 arr.push(i,-i);
 }
 arr.push(0);
 clearInterval(obj.shaker);
 var index = 0 ;
 obj.shaker = setInterval(function(){
 var speed = (parseInt(getStyle(obj,attr))+arr[index]);
 obj.style[attr] = speed +"px";
 ++index;
 if(index==arr.length)
 {
 clearInterval(obj.shaker);
 endfn&&endfn();
 }
 },10)
 }

下面是濾鏡opacity函數封裝

function doopacity(obj,step,target,endfn)
 {
 var first = getStyle(obj,"opacity")*100; //獲取到濾鏡的初始值
 step = target>first?step:-step; //一步走的距離是正的是負的
 clearInterval(obj.opacity); //一上來清除定時器。防止累加
 obj.opacity = setInterval(function(){ 

 var speed = getStyle(obj,"opacity")*100+step; //改變opacity
 if(speed>=target&&step>0&&speed<=target&&step<0)
 {
 speed = target; //變成目標值
 }
 if(speed==target)
 {
 clearInterval(obj.opacity); //要是相當則清空
 endfn&&endfn(); //執行回調函數
 }
 obj.style["opacity"] = speed/100; //DIV濾鏡效果
 obj.style.filter = 'alpha(opacity:' + speed + ')'; //為了兼容性
 },100)
 }

時間函數

• getFullYear() //獲取到年份
• getMonth() //這裡特別注意的一定要+1因為他從0開始
• getDate() //獲取到多少號
• getDay() //獲取到星期幾，得到是一個數值，要是星期天，則得到數字0
• getHours() //獲取到小時
• getMinutes() //獲取到分鐘
• getSeconds() //獲取到秒數

Date對象參數

數字形式:new Date(2014,4,1,9,48,12) //特別注意月份從0開始，所以他實際找的是5月

var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0); //獲取的是11月
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' + Math.floor(t%86400/3600) + '時' + Math.floor(t%86400%3600/60) + '分' + t%60 + '秒';

• 天: Math.floor(t/86400);
• 時: Math.floor(t%86400/3600);
• 分:Math.floor(t%86400%3600/60);
• 秒:Math.floor(t%60);

時間戳

getTime();返回的就是格林威治時間1970年 1月1日0點0分0秒0毫秒到現在的毫秒數

字符串獲取，封裝，截取，查找，檢測

• length 空格也算長度
• charAt()找到子字符串，括號要是什麼也不寫。默認找到第0個
• charCodeAt()得到指定字符串的unicode編碼
• String.fromCharCode():根據字符編碼。返回一個字符。例如:String.fromCharCode(22937);返回的就是妙字
• 要是想獲取到多個，可以String.fromCharCode(22937,22938);

查找indexOf,lastIndexOf

• indexof()返回某個字符或字符串的位置.string.indexOf('m',5)代表從str字符串中的第5位開始以後找到m的位置.
• 如果要是找不到則返回-1
• lastIndexOf()從右邊往前找，也可以帶數字參數，表示從哪裡找

比較類，截取類

• substring(n,m)表示從第n截取，到第m位置結束.如果沒有m默認截取到最後一位,包前不包後.
• slice(n,m),str.slice(0,2)與str.slice(2,0)這樣的結果完全不一樣。後者找不到結果。因為slice()方法不會判斷裡面的參數大小並交換參數位置.
• slice(-2);截取的是從最後一位到倒數第二位,-1表示的最後一位.str.slice(-4,-2);截取的是倒數第四位到倒數第二位

• toUpperCase()轉換為大寫
• toLowerCase()轉換為小寫
• split()講字符串切割成數組

var str = 'www.miaov.com';
str.split('.'); => [“www”, “miaov”, “com”];
var str1 = 'leo'; 
str1.split(); => ['leo'];
str2 = ‘leo’; 
str2.split(‘’); => [“l”, “e”, “o”]；
var str3 = ‘/www.miaov.com/’; 
str3.split(‘/’); => [””, “www.miaov.com”, “”]；
var str4 = ‘2013-11-29-23-07’;
str4.split(‘-‘, 3); => [“2013”, “11”, “29”]

• join方法用來把數組變成字符串

var arr = [‘aa’, ‘bb’, ‘cc]; 
arr.join(); => ‘aa,bb,cc’ .join()括號中什麼也不寫，默認就是用逗號隔開。
arr.join(‘’); => ‘aabbcc’ ；
 arr.join(‘-‘); => ‘aa-bb-cc’

下面是所有的字符串操作總結

var str = '妙味課堂-WWW.miaov.com';
str.charAt(1); //味
str.charCodeAt(1); //21619
String.fromCharCode(22937, 21619); //妙味
str.indexOf('m', 3); //9
str.lastIndexOf('o'); //16
'1000' < '2' //true
'1000' > 2 //true
str.substring(0, 4); //妙味課堂
str.slice(-3); //'com'
str.toUpperCase(); //'妙味課堂-WWW.MIAOV.COM'
str.toLowerCase(); //'妙味課堂-www.miaov.com' 

str.split('.', 2); //['秒微課堂-www', 'miaov']
var arr = ['www', 'miaov', 'com'];
arr.join('.'); //'www.miaov.com'

for-in 循環遍歷json因為json是個對象。沒有長度。類似鍵值對。循環的是屬性

var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端開發'};
for(var attr in json4){
 alert(attr);
 alert(json4[attr]);
}
var json5 = { 
 url: ['img/1.png', 'img/2.png'],
 text: ['圖片一', '圖片二']
};
for(var attr in json5) {
 for(var i=0; i alert(json5[attr][i]);
 }
}

數組

• 可以通過修改數組的length屬性來清空數組。
• 從後面添加數組push() arr.push()往數組最後一位加內容..push()方法是有返回值得。返回是數組的新長度
• 前面添加數組unshift() arr.unshift()往數組的最前面添加內容，返回值為數組的新長度(IE6,7不支持)
• 刪除pop() arr.pop()表示從後面刪除一個數組元素。返回值就是要刪除的數組
• 刪除shift() arr.shift()刪除數組的第一個返回值是被扔掉的值

var arr = ['TM', '鍾毅', '張森', '杜鵬', 'Leo'];
arr.unshift(arr.pop()); //數組變為：['Leo', '鍾毅', '張森', '杜鵬', 'TM']
或
arr.push(arr.shift()); //數組變為：['鍾毅', '張森', '杜鵬', 'Leo', 'TM']

• splice()方法
• splice(a,b,c) a表示起始位置,b表示個數,c表示要替換的值
• b要是為0表示插入，c要是什麼也不寫表示刪除。

代碼見下

var arr = ['TM', '鍾毅', '張森', '杜鵬', 'Leo'];
//刪除
//arr.splice(0, 1); //刪掉第0位，刪1個。兩個參數第一個是從第幾位開始，第二個是刪掉幾個。splice刪除的時候有返回值，返回的是被刪除的內容
//替換
//arr.splice(0, 1, '莫濤'); //替換第0位，替換1個，替換為'莫濤'。返回的還是刪除的東西
//添加
arr.splice(1, 0, '李賢'); //在第1位那裡，刪除0個，添加了一個'李賢'到了第1位，'鍾毅'就變成了arr[2]了。後面也可以添加多個。如果splice刪除了0個，那麼就沒有返回值。 

數組去重

var arr = [1, 2, 2, 4, 2];
for ( var i=0; i for ( var j = i+1; j if( arr[i]==arr[j] ){
 arr.splice( j, 1 );
 j--;
 }
 }
}
也可以使用indexOf

Sort排序

var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode編碼排序
var arr2 = [4, 3, 5, 76, 2, 0, 8];
// arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默認是將數組中的每一個按照字符串來排序的，因此出現了76排在8前面的情況
// arr2. sort(function( a, b ){
 return a - b; //如果a-b返回正數，就a、b兩個數字換個序。如果a-b是負數，就不換序
}) //返回數字從小到大 0, 2, 3, 4, 5, 8, 76
// arr2. sort(function( a, b ){
 return b - a;
}) //返回數字從大到小 76,, 8, 5, 4, 3, 2, 0

隨機數

Math.round( Math.random()*80 + 20 ); //返回20~100之間的隨機整數

concat連接,表示把2個數組拼接起來

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新數組與原來數組沒什麼關係。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

reverse反轉

var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]

閱讀更多 南京菜菜工作室 的文章

關鍵字: 屬性 元素 JavaScript