在 JavaScript 中能夠經過多種方式建立對象。javascript
var student = { name:"某某某", type:"練習生", like:"唱跳rap籃球", rap:function(){ console.log("X你太美") } } console.log(student) student.rap()
function Student(name,type,like){ return { name:name, type:type, like:like, rap:function(){ console.log("X你太美") } } } var s1 = Student("某某某","籃球運動員",'籃球') console.log(s1)
function Teacher(name,type){ this.name = name; this.type = type; this.rap = function(){ console.log(":)"); } } var t1 = new Teacher('蒼老師','演員'); t1.rap();
若是不用 new 來調用函數,那麼就是一個普通的函數調用,而且 this 的指向是 window 關鍵字
若是用了 new,就會建立一個新的對象,而且將對象給到 t1css
這種方法仍是會生成不少一樣的方法,咱們能夠這樣改進:html
function Teacher(name,type){ this.name = name; this.type = type; /* this.rap = function(){ console.log(":)"); } */ } Teacher.prototype.rap = function () { console.log(':)'); } var t1 = new Teacher('蒼老師','演員'); t1.rap();
這樣就可讓多個 Teacher 的對象共用一個方法,咱們能夠在控制檯中看到,實際上這個方法存在父類(prototype)裏面。java
前面的方法其實邏輯多少都有點怪異,咱們通常採用這種 class 的寫法。只是語法變得更人性化,實際上的底層操做方式,仍是前面三種方法。es6
class Student{ constructor(name,type){ this.name = name; this.type = type; } rap(){ console.log(':('); } } var t2 = new Student('加藤鷹','演員');
經過控制檯能夠看到,底層的處理方式是同樣的,可是這種寫法更易於解讀。數組
這裏直接讓 Student 繼承 Teacherapp
function Teacher(name,type){ this.name = name; this.type = type; /* this.rap = function(){ console.log(":)"); } */ } Teacher.prototype.rap = function () { console.log(':)'); } var t1 = new Teacher('蒼老師','演員'); t1.rap(); class Student extends Teacher{ constructor(name,type){ super(); this.name = name; this.type = type; } rap(){ console.log(':('); } } var t2 = new Student('加藤鷹','演員');
注意,子類的構造器必定要有 super() 語句,調用父類構造器。dom
當咱們用控制檯調用 t2 的 rap 方法,輸出是 「:(」,咱們要經過 t2._proto_._proto_.rap() 才能訪問到父類的同名方法。函數
DOM 對象,就是 HTML 頁面的文檔對象。整個網頁的顯示,都由 Document 對象構成。文檔對象又由許多的元素對象構成,文檔對象就有許多的屬性和方法,用來操縱整個頁面的顯示,以及事件的處理。全部的元素對象最終組成龐大的 DOM 樹。this
在 ES5 之前,咱們能夠經過 ID,class,標籤名查找元素對象。
//經過ID查找元素對象 var d1 = document.getElementById("d1") console.log(d1) //經過class查找元素對象 var abc = document.getElementsByClassName('abc') console.log(abc) //經過標籤名稱查找元素對象 var div = document.getElementsByTagName("div") console.log(div)
經過 class 和 標籤名找出來的是元素數組
ES5 後,能夠用咱們寫 css 時的選擇器的方式查找元素對象,更精確,更方便。
//選擇單個元素,document.querySelector,選擇器的寫法,直接使用css選擇器的寫法,選擇器若是可以匹配過個元素,那麼只選擇第一個元素 var div1 = document.querySelector("div") console.log(div1) var id1 = document.querySelector("#d1") console.log(id1) var abc1 = document.querySelector('body .abc') console.log(abc1) //選擇多個元素,document.querySelectorAll() var abc2 = document.querySelectorAll("#d1") console.log(abc2)
找到了咱們所須要的元素以後,咱們就須要對元素內部的屬性進行修改。
標籤間的內容都存儲在元素的 innerHTML 屬性裏面,例如咱們想對某個 style 標籤的內容進行修改:
s1.innerHTML = 'h1{color: red;}';
咱們也能夠在得到元素對象後,直接設置元素的樣式:
element.style.background = "skyblue"; element.style.Color = "yellow";
咱們能夠在元素(標籤)內再插入元素(標籤)。步驟是先用 creatElement 方法建立子元素,接着設置好子元素的內容後,用父元素的 appendChild 方法將其插入。
//建立元素 var s1 = document.createElement("style") //設置s1的innerHTML的內容 s1.innerHTML = 'h1{color: red;}'; //將style元素插入到HTML頁面的body裏 document.body.appendChild(s1)
元素具備的全部屬性咱們均可以經過控制檯查看並對其進行修改,方法和上述方法都大同小異。
每個事件調用的執行函數,都會默認傳入一個事件對象,這個對象會包含當次事件的相關信息,例如點擊、鼠標的移動、鍵盤的按鍵、手指的觸屏、聚焦等等。事件根據捕獲方式分爲「冒泡事件」、「捕獲事件」。
冒泡事件:事件由最裏面一層一層向上觸發,直到HTML元素,那麼這種事件模式就是冒泡事件。默認狀況下就用冒泡。
捕獲事件:由HTML開始一層一層向下出發,直到最小的子元素,那麼這種事件模式就是捕獲
咱們能夠經過 "on事件名稱 = function(){}" 的方法設置時間,這種方法簡單方便,但缺點也很明顯,一個事件只能調用一個函數,並且只能是「冒泡事件」。
h1.onclick = function(){ h1.style.backgroundColor = "deeppink" }
這種寫法能夠寫在 script 標籤裏,也能夠直接在元素的標籤內做爲屬性寫入,屬性的值爲一個方法,例如
<h1 onclick="abc()">helloworld</h1> <script type="text/javascript"> function abc(){ h1.style.color = "skyblue" } </script>
這種方式是 ES5 以後纔有的,同一事件能夠經過幾個 addEventListener 語句調用多個函數,並且能夠手動設置是捕獲事件仍是冒泡事件。語法:
h1.addEventListener("事件的名稱",事件調用起的函數(),true/false(捕獲/冒泡))
最後一個參數省略就是默認 false
每次事件調用執行函數前,會將對應的事件對象做爲參數傳入,例如對於點擊事件,咱們能夠經過事件得到點擊點的座標,點擊的時間等信息。
<h1>helloworld</h1> <script type="text/javascript"> var h1 = document.querySelector('h1') h1.onclick = function(event){ //事件對象會存放這一次事件的相關信息 console.log(event) } </script>