基礎(chǔ)復(fù)習(xí)筆記

• JS效果三要素:

  1. 時(shí)間

  2. 事件

  3. 運(yùn)動(dòng)軌跡(分步驟來(lái)實(shí)現(xiàn)先死后活法逐步來(lái))

(1)獲取元素 :

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

(2)事件:

事件:鼠標(biāo)事件疚膊，鍵盤事件,系統(tǒng)事件,表單事件,自定義事件等等

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

添加事件

元素.onmouseover

函數(shù)

函數(shù)可以理解為方法,工具比如

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

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

  元素.onmouseover = function(){}
  window.alert(1);  window.alert("ok");

變量

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

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

JS屬性操作(重點(diǎn))

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

屬性讀寫操作的注意事項(xiàng)

• JS屬性中不允許出現(xiàn)"-",例如font-size改為fontSize

• class在JS里面是保留字,在JS作用class要用className

• 4個(gè)絕對(duì)不要判斷
  1.相對(duì)路徑(src ,href)
  2.顏色值
  3.innerHTML值也不要(IE678可能有空格)
  4.type類型也不要判斷.因?yàn)镮E678下面type更改不了

• []的使用

  1. 點(diǎn)"."后面的值無(wú)法修改
  2. []里面的值可以修改,JS允許把.替換成[] 例如style[attr]這樣的

條件判斷

• if(){}

• if(){}else{}

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

數(shù)組

• 放數(shù)據(jù)的倉(cāng)庫(kù)
• 中括號(hào)[],間隔用逗號(hào),最后一個(gè)數(shù)據(jù)不要加逗號(hào)
• 數(shù)組的length屬性

自定義索引和屬性

自定義屬性 abtn[0].abc = 123; //自定義屬性
自定義屬性賦值 obj.timer = setInterval(function(){},1000); //自定義屬性賦值

數(shù)據(jù)類型

6大類

• 空
• 對(duì)象
• undefined
• Boolean
• String
• number

(1)要是基礎(chǔ)類型可以用typeOf()來(lái)判斷
字符串方法charAt(),獲取到字符串第幾個(gè)charCodeAt()獲取到UniCode編碼。然后在計(jì)算基显。再利用fromCharCode()換算成字符
(2)要是引用類型可以用instanceOf Array;instanceOf Object 來(lái)判斷
Number()方法能轉(zhuǎn)化字符串?dāng)?shù)字蘸吓，空，空數(shù)組撩幽，要是前面有0比如00100轉(zhuǎn)化的結(jié)果就是100
parseInt()相當(dāng)于把前面的數(shù)字部分轉(zhuǎn)化為數(shù)字库继，后面的字符直接舍棄.他轉(zhuǎn)化不了空，真要是轉(zhuǎn)化空結(jié)果就是NaN
parseFloat()同上
isNaN()判斷是不是NaN

作用域重點(diǎn)

• 域：空間窜醉，范圍宪萄，區(qū)域
• 作用:讀，寫

(1)在JS找到變量前酱虎，他要做的就是先找到一些關(guān)鍵字 var function,參數(shù)然后在正是運(yùn)行代碼之前他把這些都提前付了一個(gè)值,undefined
遇到重名的只留一個(gè)
(2)逐行解讀代碼雨膨。每讀一行就是到庫(kù)里面去看看，要是有值就替換读串，改變表達(dá)式的值

alert(a); //彈出：function a(){alert(4);}
var a=1; //預(yù)解析中的a改為了1
alert(a);  //彈出1
function a(){alert(2);}//函數(shù)聲明聊记，沒(méi)有改變a的值。什么也沒(méi)發(fā)生恢暖。
alert(a); //繼續(xù)彈出1排监，因?yàn)閍在預(yù)處理庫(kù)里面的值沒(méi)有被改過(guò)。
var a=3; //預(yù)處理中a的值變?yōu)?
alert(a); //彈出3
function a(){alert(4);} //函數(shù)聲明杰捂，什么也沒(méi)有發(fā)生
alert(a); //繼續(xù)彈出3
a(); //報(bào)錯(cuò) a is not a function
第一步:
       預(yù)編譯他會(huì)先找一些關(guān)鍵字存儲(chǔ)到內(nèi)存中舆床。 比如var function 參數(shù)等等
       他找到var a 先看左邊，不看右邊.上來(lái)都給他一個(gè)未定義 var a = undefined;要是function他就直接替換了
       比如上面a從undefined直接變成了方法
       他根本不考慮后面的值
第二步:
        在一步步執(zhí)行代碼
        要是遇見(jiàn)表達(dá)式（表達(dá)式就是 var a = xxx）他才會(huì)重新替換或者賦值

函數(shù)的作用域要區(qū)分全局變量和局部變量

在方法內(nèi)部寫var的都是局部嫁佳。在方法外面的都是全局變量挨队。要是在方法里面不加var,那他改變的就是全局的值.

特別注意的就是在JS里面只有方法有作用域。for和if里面都沒(méi)有作用域

真和假

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

函數(shù)返回值return

這里特別注意下:

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

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

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

返回的值就是1

arguments參數(shù)合集

arguments表示所有的參數(shù)合集

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

工具類

獲取到樣式

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

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

運(yùn)動(dòng)函數(shù)
//封裝運(yùn)動(dòng)函數(shù)
    //既然是運(yùn)動(dòng)函數(shù)就需要傳遞幾個(gè)條件(參數(shù))
    // 1.對(duì)象(你得知道讓誰(shuí)動(dòng)吧)
    // 2.方向(你得告訴他朝哪邊走吧)
    // 3.速度 (你得告訴他一次走多少吧)
    // 4.終點(diǎn)(你得告訴他什么時(shí)候停止吧)
    // 5.回調(diào)函數(shù)(到達(dá)終點(diǎn)以后干點(diǎn)什么吧)
    function Imove(obj,attr,step,target,endfn)
    {
        //防止累加,越來(lái)越快蒿往。這樣一上來(lái)我都從0開始計(jì)算
        clearTimeout(obj.timer);
        //主要是判斷速度是正的還是負(fù)的盛垦，上來(lái)先比較。我的思路是要是目標(biāo)的位置比初始的位置大瓤漏，則速度肯定是正的腾夯，要是小則速度肯定是負(fù)的
        step =  target>parseInt(getStyle(obj,attr))? step:-step;
        obj.timer = setInterval(function(){
            var dis = parseInt(getStyle(obj,attr))+step;   //獲取到每次走了之后距離最開始的位置
            //判斷一下當(dāng)走的距離要是超過(guò)了終點(diǎn)，則必須拉回來(lái)蔬充。要是沒(méi)超過(guò)蝶俱。則繼續(xù)走.
            if(dis>=target&&step>0||dis<target&&step<0)
            {
                dis = target;
            }
            obj.style[attr] = dis+"px";   //給這個(gè)對(duì)象賦值，讓他自己慢慢走饥漫。
            if(dis==target)               //當(dāng)?shù)竭_(dá)了終點(diǎn)了榨呆，就不讓他走了。這個(gè)時(shí)候你需要清除定時(shí)器了趾浅。因?yàn)闆](méi)用了愕提。
            {
                clearInterval(obj.timer);   //清除定時(shí)器
                endfn&&endfn();           //執(zhí)行回調(diào)方法
            }
        },100)
    }
    //封裝運(yùn)動(dòng)函數(shù)結(jié)束

下面是抖動(dòng)函數(shù)封裝

抖動(dòng)函數(shù)封裝
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函數(shù)封裝

function doopacity(obj,step,target,endfn)
    {
      var first = getStyle(obj,"opacity")*100;  //獲取到濾鏡的初始值
       step = target>first?step:-step;    //一步走的距離是正的是負(fù)的
        clearInterval(obj.opacity);       //一上來(lái)清除定時(shí)器馒稍。防止累加
         obj.opacity = setInterval(function(){
           var speed = getStyle(obj,"opacity")*100+step;     //改變opacity
           if(speed>=target&&step>0&&speed<=target&&step<0)
           {
               speed = target;        //變成目標(biāo)值
           }
           if(speed==target)
           {
               clearInterval(obj.opacity);   //要是相當(dāng)則清空
               endfn&&endfn();                //執(zhí)行回調(diào)函數(shù)
           }
             obj.style["opacity"] = speed/100;   //DIV濾鏡效果
             obj.style.filter = 'alpha(opacity:' + speed + ')';  //為了兼容性
        },100)
    }

時(shí)間函數(shù)

• getFullYear() //獲取到年份
• getMonth() //這里特別注意的一定要+1因?yàn)樗麖?開始
• getDate() //獲取到多少號(hào)
• getDay() //獲取到星期幾皿哨，得到是一個(gè)數(shù)值浅侨，要是星期天，則得到數(shù)字0
• getHours() //獲取到小時(shí)
• getMinutes() //獲取到分鐘
• getSeconds() //獲取到秒數(shù)

Date對(duì)象參數(shù)

數(shù)字形式:new Date(2014,4,1,9,48,12) //特別注意月份從0開始证膨，所以他實(shí)際找的是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) + '時(shí)' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';

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

時(shí)間戳

getTime();返回的就是格林威治時(shí)間1970年 1月1日0點(diǎn)0分0秒0毫秒到現(xiàn)在的毫秒數(shù)

字符串獲取如输，封裝，截取央勒，查找不见，檢測(cè)

• length 空格也算長(zhǎng)度
• charAt()找到子字符串，括號(hào)要是什么也不寫崔步。默認(rèn)找到第0個(gè)
• charCodeAt()得到指定字符串的unicode編碼
• String.fromCharCode():根據(jù)字符編碼稳吮。返回一個(gè)字符。例如:String.fromCharCode(22937);返回的就是妙字
  要是想獲取到多個(gè)井濒，可以String.fromCharCode(22937,22938);

查找indexOf,lastIndexOf

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

比較類瑞你，截取類

• substring(n,m)表示從第n截取酪惭，到第m位置結(jié)束.如果沒(méi)有m默認(rèn)截取到最后一位,包前不包后.
• slice(n,m),str.slice(0,2)與str.slice(2,0)這樣的結(jié)果完全不一樣。后者找不到結(jié)果者甲。因?yàn)閟lice()方法不會(huì)判斷里面的參數(shù)大小并交換參數(shù)位置.
• slice(-2);截取的是從最后一位到倒數(shù)第二位,-1表示的最后一位.str.slice(-4,-2);截取的是倒數(shù)第四位到倒數(shù)第二位

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

var str = 'www.miaov.com';
str.split('.'); => [“www”, “miaov”, “com”];
var str1 = 'leo'; 
str1.split(); => ['leo'];
str2 = ‘leo’; 
str2.split(‘’); => [“l(fā)”, “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方法用來(lái)把數(shù)組變成字符串

var arr = [‘a(chǎn)a’, ‘bb’, ‘cc]; 
arr.join(); => ‘a(chǎn)a,bb,cc’ .join()括號(hào)中什么也不寫虏缸，默認(rèn)就是用逗號(hào)隔開鲫懒。
arr.join(‘’); => ‘a(chǎn)abbcc’ ；
 arr.join(‘-‘); => ‘a(chǎn)a-bb-cc’

下面是所有的字符串操作總結(jié)

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 循環(huán)遍歷json因?yàn)閖son是個(gè)對(duì)象刽辙。沒(méi)有長(zhǎng)度窥岩。類似鍵值對(duì)。循環(huán)的是屬性

var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端開發(fā)'};
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<json5[attr].length; i++){
        alert(json5[attr][i]);
    }
}

數(shù)組

• 可以通過(guò)修改數(shù)組的length屬性來(lái)清空數(shù)組扫倡。
• 從后面添加數(shù)組push() arr.push()往數(shù)組最后一位加內(nèi)容..push()方法是有返回值得谦秧。返回是數(shù)組的新長(zhǎng)度
• 前面添加數(shù)組unshift() arr.unshift()往數(shù)組的最前面添加內(nèi)容，返回值為數(shù)組的新長(zhǎng)度(IE6,7不支持)
• 刪除pop() arr.pop()表示從后面刪除一個(gè)數(shù)組元素撵溃。返回值就是要?jiǎng)h除的數(shù)組
• 刪除shift() arr.shift()刪除數(shù)組的第一個(gè)返回值是被扔掉的值

var arr = ['TM', '鐘毅', '張森', '杜鵬', 'Leo'];
arr.unshift(arr.pop()); //數(shù)組變?yōu)椋篬'Leo', '鐘毅', '張森', '杜鵬', 'TM']
或
arr.push(arr.shift()); //數(shù)組變?yōu)椋篬'鐘毅', '張森', '杜鵬', 'Leo', 'TM']

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

代碼見(jiàn)下

var arr = ['TM', '鐘毅', '張森', '杜鵬', 'Leo'];
//刪除
//arr.splice(0, 1); //刪掉第0位缘挑，刪1個(gè)集歇。兩個(gè)參數(shù)第一個(gè)是從第幾位開始，第二個(gè)是刪掉幾個(gè)语淘。splice刪除的時(shí)候有返回值诲宇，返回的是被刪除的內(nèi)容
//替換
//arr.splice(0, 1, '莫濤'); //替換第0位际歼，替換1個(gè)，替換為'莫濤'姑蓝。返回的還是刪除的東西
//添加
arr.splice(1, 0, '李賢'); //在第1位那里鹅心，刪除0個(gè)，添加了一個(gè)'李賢'到了第1位纺荧，'鐘毅'就變成了arr[2]了旭愧。后面也可以添加多個(gè)。如果splice刪除了0個(gè)宙暇，那么就沒(méi)有返回值输枯。

數(shù)組去重

var arr = [1, 2, 2, 4, 2];
for ( var i=0; i<arr.length; i++ ) {
    for ( var j = i+1; j<arr.length; 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默認(rèn)是將數(shù)組中的每一個(gè)按照字符串來(lái)排序的，因此出現(xiàn)了76排在8前面的情況

// arr2. sort(function( a, b ){
    return a - b; //如果a-b返回正數(shù)占贫，就a桃熄、b兩個(gè)數(shù)字換個(gè)序。如果a-b是負(fù)數(shù)型奥，就不換序
}) //返回?cái)?shù)字從小到大 0, 2, 3, 4, 5, 8, 76

// arr2. sort(function( a, b ){
    return b - a;
}) //返回?cái)?shù)字從大到小 76,, 8, 5, 4, 3, 2, 0

隨機(jī)數(shù)

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

concat連接,表示把2個(gè)數(shù)組拼接起來(lái)

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];

arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新數(shù)組與原來(lái)數(shù)組沒(méi)什么關(guān)系瞳收。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

reverse反轉(zhuǎn)

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

以上JS基礎(chǔ)全部基礎(chǔ)點(diǎn)

對(duì)應(yīng)的鏈接是:

基礎(chǔ)知識(shí)點(diǎn)所有效果點(diǎn)擊這里