3）js能夠改變頁(yè)面中的所有CSS樣式

document.getElementById("pid").style.backgrouneColor="red";

4）js能夠?qū)?yè)面中所有事件做出反應(yīng)

5）DOM對(duì)象控制HTML

六、事件句柄EventListener
事件句柄就是觸發(fā)事件發(fā)生的一個(gè)動(dòng)作。例如onclick就是當(dāng)被點(diǎn)擊的時(shí)候的句柄。
在js中可以添加事件句柄，這樣可以減少很多代碼量，
例如下面是傳統(tǒng)的事件觸發(fā)方式
按鈕
在js代碼中添加的事件句柄就如下:處理函數(shù)不能加（）括號(hào)符！
var x=document.getElementById("btn");
x.addEventListener("click",demo);//這里有兩個(gè)參數(shù)，一個(gè)是事件的句柄，后面的是處理事件的函數(shù)

刪除句柄用removeEventListener();

七，事件
1.事件流：頁(yè)面中接受事件的順序，有兩個(gè)順序，分別是事件冒泡（從里到外），事件捕獲（從外到里）。

2.事件處理：
1）HTML事件處理：直接添加到HTML結(jié)構(gòu)中

2）dom 0級(jí)事件處理：把一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?/p>

//0級(jí)事件處理清除事件處理很簡(jiǎn)單只要把onclick賦值為空即可。設(shè)置的時(shí)候是對(duì)象的時(shí)間設(shè)置為null而不是對(duì)象設(shè)置為null！
btn1.onclick=null;

//當(dāng)有多個(gè)同個(gè)事件的處理程序的時(shí)候，前面的會(huì)被后面的事件處理程序清理掉。

btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";//被覆蓋
};
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="blue";
};

3）dom 2級(jí)事件處理：

 addEventListener("事件名"，“事件處理函數(shù)”，“true/false”)；

true:事件捕獲
false：事件冒泡
清除事件處理要使用removeEventListener();

//dom 2級(jí)事件處理程序不會(huì)被覆蓋而是會(huì)一步一步的解析執(zhí)行。

4）IE事件處理程序。（小于等于IE8的版本中使用，跟addEventListener的使用方法相似。）

添加一個(gè)事件attachEvent
刪除一個(gè)事件detachEvent

5）可以根據(jù)瀏覽器的版本不一樣寫不同的代碼

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3.事件對(duì)象：在觸發(fā)dom事件的時(shí)候都會(huì)產(chǎn)生一個(gè)對(duì)象。

事件對(duì)象的屬性：
1）type：獲取事件類型

document.getElementById("btn").addEventListener("click",showType);
function showType(e){
     alert(e.type);
}

2）target：獲取事件目標(biāo)：哪里觸發(fā)的這個(gè)事件，就是這個(gè)事件的對(duì)象是html元素中的什么元素。

document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
     alert(e.target);
}

3）stopPropagation（）：阻止事件冒泡：觸發(fā)了最里面的元素事件的發(fā)生，但是這個(gè)事件發(fā)生之后包含此元素的上層元素的事件也會(huì)被觸發(fā)！所以有的時(shí)候我們不希望這種情況的發(fā)生就會(huì)阻止事件冒泡的發(fā)生了。
event.stopPropagation();

4）preventDefault（）：阻止事件默認(rèn)行為
event.preventDefault();

//dom 0級(jí)事件處理
// var btn1=document.getElementById("btn");
// btn1.onclick= function () {
// document.getElementById("pid").style.backgroundColor="red";
// };
//
// btn1.onclick=null;
////dom 2級(jí)事件處理,處理函數(shù)不能加（）括號(hào)符！
//

//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2級(jí)事件處理！");
//
// document.getElementById("pid").innerHTML="dom 2級(jí)事件處理！";
//}

//事件對(duì)象

//1.獲取事件對(duì)象的類型

//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
// alert(e.type);
//}

//2.獲取事件對(duì)象的目標(biāo)

//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
// alert(e.target);
//}

八，內(nèi)置對(duì)象
1.什么是對(duì)象：js中所有事物都是對(duì)象，例如字符串，數(shù)組，時(shí)間，數(shù)值，函數(shù)等，每個(gè)對(duì)象都會(huì)帶有屬性和方法；
2.創(chuàng)建對(duì)象：
1）使用new object創(chuàng)建
people=new objet();
people.name="krys";
people.age=20;
2）直接創(chuàng)建：
people={name:"krys",age:20,addres:"guangdong"};
3）使用函數(shù)創(chuàng)建

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后創(chuàng)建一個(gè)對(duì)象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

3.字符串對(duì)象：String：字符串可以使用雙引號(hào)也可以使用單引號(hào)！

屬性：length：str.length可得到字符串的長(zhǎng)度、
indexOf(),在字符串中查找字符串，并返回字符串所在的位置。

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert("r所在的位置是"+name.indexOf("r"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

match(),在字符串中匹配字符串，如果字符串1在字符串中存在，則將字符串1打印出來(lái)，如果沒(méi)有就返回NULL

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){
              alert(name);
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

replace(a,b) a是要替換掉的原來(lái)的字符或字符串，b是新的字符或字符串

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert(name.replace("krys","krys小仙女"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

toUpperCase()轉(zhuǎn)換成大寫
toLowerCase()轉(zhuǎn)換成小寫
split()分隔線，將一個(gè)字符串分隔成若干部分，如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";

4.Date對(duì)象
1）創(chuàng)建Date對(duì)象：
var date=new Date();
alert(date);
var h=date.getHours();//時(shí)
var m=date.getMinutes();//分
var s=date.getSeconds();//秒

2)獲取具體年份：getFullYear（）；
3）獲取毫秒數(shù)：getTime();
4)設(shè)置具體的日期：setFullYear();
5)獲取星期：getDay();

6）設(shè)置每秒更新一次
setTimeout(function(){

 showTime();},1000);

//每秒調(diào)用一次showTime函數(shù)

5.數(shù)組對(duì)象：
1)數(shù)組的創(chuàng)建：var a=["1","krys","ok"];
var a=new Array(); a[0]="hell0"; a[1]="world";
var a=new Array("hello","world","welcome");
2)數(shù)組常用的方法：
concat()合并數(shù)組如 a=["krys"];b=["tal"];a.concat(b)=krystal;
sort()排序數(shù)組 var a=["a","c","b"];a.sort();->a b c (默認(rèn)從低到高排序)
設(shè)置為降序：a.sort(funtion(a,b){return a-b;})
push()在數(shù)組末尾添加一個(gè)元素var a=["a","c","b"]; a.push("d");
reverse()翻轉(zhuǎn)，對(duì)稱中心點(diǎn)相互交換：a.reverse()= c b a ;

6.math對(duì)象
1）常用函數(shù)
round()四舍五入 Math.round(2.5)=3;
random()返回0~1之間的隨機(jī)數(shù) Math.random();
可以轉(zhuǎn)換成整數(shù)：parseInt(Matn.random()*10);
max()返回最大值
min()返回最小值
abs()返回絕對(duì)值

九，瀏覽器的內(nèi)置對(duì)象BOM（browser object model）
1，window對(duì)象：大部分對(duì)象的祖先，最高級(jí)別對(duì)象之一。

1）簡(jiǎn)介：Window對(duì)象是指當(dāng)前的瀏覽器窗口，所有的js全局變量函數(shù)以及變量都是Window對(duì)象的成員。
其中，全局變量是window對(duì)象的屬性，全局函數(shù)是window對(duì)象的方法。

2）獲得瀏覽器內(nèi)部窗口的尺寸（即內(nèi)容區(qū)域的尺寸，不包括滾動(dòng)條工具欄等）：
window.innerHeight瀏覽器窗口的內(nèi)部高度,window.innerWidth，瀏覽器的內(nèi)部寬度。

3）使用window.open(url)可以打開(kāi)一個(gè)窗口，使用window.close()可以關(guān)閉當(dāng)前窗口。

2,history對(duì)象
window.history()對(duì)象包含瀏覽器的歷史（url）的集合
有三個(gè)方法：
1）history.back()后退，返回到前一頁(yè)
2）history.forward()，前進(jìn)，進(jìn)入到下一頁(yè)
3)history.go()，帶參數(shù)，參數(shù)就是要進(jìn)入的頁(yè)數(shù)，-1是前一頁(yè)，-2是前兩頁(yè)，依次類推，當(dāng)前頁(yè)是0.

3，計(jì)時(shí)器
通過(guò)使用js，在一個(gè)設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行
有兩個(gè)函數(shù)
一個(gè)是setInterval()-間隔指定的毫秒數(shù)持續(xù)的執(zhí)行指定的代碼
一個(gè)是setTimeout()-暫停指定的毫秒數(shù)后執(zhí)行指定的代碼。
可以使用setTimeout來(lái)實(shí)現(xiàn)setInterval()的功能：就是在調(diào)用的函數(shù)代碼里調(diào)用自己！
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

可以使用clearInterval（），clearTimeout()來(lái)清楚這個(gè)調(diào)用，

4，Location對(duì)象
用于獲得當(dāng)前頁(yè)面的地址，并把瀏覽器重定向到新的頁(yè)面（其實(shí)我的理解就是解析當(dāng)前地址）

Location對(duì)象的屬性：
location.hostname:返回web主機(jī)的域名
location.pathname:返回當(dāng)前頁(yè)面的路徑和文件名
location.port:返回web主機(jī)的端口
location.protocol:返回所使用的web協(xié)議
location.href:返回當(dāng)前頁(yè)面的url
location.assign()加載新的文檔，參數(shù)是所要加載文檔的路徑。

window.location.hostname;

5，screen對(duì)象
window.screen對(duì)象包含有關(guān)用戶屏幕的信息
screen.avaiilWidth;//可用的屏幕高度
screen.availHeight;//可用的屏幕寬度
screen.height;//屏幕高度
screen.width;//屏幕寬度

6，navigation對(duì)象
7，彈出窗口，cookie

十，js面向?qū)ο笏枷?/p>