JavaScript基礎篇章(總結2)

前言

前篇文章總結javaScript的基本語法和雜七雜八的練習，既然雜，那麼再雜一篇吧！事不宜遲，接着總結下javaScript其他的知識點，速度速度~~

Ⅰ.簡述

總結之前先貼下昨天的博文JavaScript基礎篇章(總結1) 的地址：

Url: http://blog.csdn.net/yk377657321/article/details/53930922

在上篇博文中，知道了js(javaScript的簡稱)是由三部分組成的，分別是

ECMAScript
Bom(全稱Browser Object Model瀏覽器對象模型)
Dom(全稱Document Object Model文檔對象模型)

經過上篇博文的記錄，已經瞭解ECMAScript的基礎知識點，接着瞭解並總結剩餘兩部分的知識點，瞭解的範圍就只限於基礎的，詳細的可以參考w3c文檔

什麼是Bom編程?

Bom編程的全稱 Browser Object Model，即瀏覽器對象模型； javaScript是由瀏覽器中內置的javascript腳本解釋器程序來執行javascript腳本語言的。爲了便於對瀏覽器的操作，javascript封裝了對瀏覽器的各個對象，使得開發者可以方便操作瀏覽器。那麼也就是說，Bom編程是封裝了瀏覽器相關信息的各個對象，包括瀏覽器信息、Url信息等等，這也可以體現js語法基於對象編程的特點.

什麼是Dom編程?

Dom編程的全稱Document Object Model，即文檔對象模型;DOM描繪了一個層次化的樹，允許開發人員添加、刪除、修改網頁頁面的某一部分;瀏覽器在解析HTML頁面標記的時候，其實不是按照一行一行讀取並解析的，而是將HTML頁面中的每一個標記按照順序在內存中組建一顆DOM樹，組建好之後，按照樹的結構將頁面顯示在瀏覽器的窗口中.Dom的出現主要便於對頁面的系列操作.

Ⅱ.學習Bom編程

上面簡述中說了Bom編程是封裝了瀏覽器的各個對象，包括瀏覽器信息、Url信息等等，那麼瞭解下大致的對象就可以了，等需要用到的時候再查查w3c文檔，下面開始認識Bom常用的對象.

window對象

簡述：window對象javaScript層級中的頂層對象，代表一個瀏覽器窗口或一個框架,遇到body標籤、frameset標籤都會進行重建;
window對象的子對象：大致是location對象、history對象、document對象;
window的主要方法：
- alert() 顯示一個警告框;
- confirm() 確認框;
- prompt() 輸入框;
- open() 打開新窗口顯示指定的URL（有的瀏覽器中是打一個新的選項卡）;
  例如: window.open(“success.html”);
  window.open(“success.html”,”_blank”,”width=600px,height=400px,left=500px,top=500px,fullscreen=no,location=no,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no”);
- close() 關閉窗口.
  注意: 火狐瀏覽器的默認配置.導致close方法無效;
- setTimeout(vCode, iMilliSeconds) 超時後執行代碼;
- setInterval(vCode, iMilliSeconds) 定時執行代碼，第一次也是先等待，到時再執行.
- 關於window 中的事件:
  - onload 頁面加載完畢觸發;
  - onscroll 頁面滾動條觸發;
  - onbeforeunload 頁面卸載觸發(關閉頁面).

navigator對象

簡述：Navigator對象是由 JavaScript runtime engine 自動創建的，代表瀏覽器對象封裝了瀏覽器相關的信息，如瀏覽器名稱、版本等等;
主要屬性：
- appName 獲取瀏覽器名稱;
- appVersion 獲取瀏覽器版本;
- userAgent : 返回由客戶機發送服務器的 user-agent 頭部的值.
other:userAgent 中包含了瀏覽器的類型等，可能需要根據瀏覽器做適配，那麼userAgent就可派上用場.

location對象

簡述：Location對象是由 JavaScript runtime engine 自動創建的，包含有關當前 URL 的信息;
主要屬性：
- href屬性設置或獲取整個 URL 爲字符串;
- host 設置或獲取 location 或 URL 的 hostname 和 port 號碼;
- hostname 設置或獲取 location 或 URL 的主機名稱部分;
- href 設置或獲取整個 URL 爲字符串;
- pathname 設置或獲取對象指定的文件名或路徑;
- port 設置或獲取與 URL 關聯的端口號碼;
- protocol 設置或獲取 URL 的協議部分;
- search 設置或獲取 href 屬性中跟在問號後面的部分;
- reload() 重新加載當前頁面.

history對象

簡述：History對象是由 JavaScript runtime engine 自動創建的，由一系列的URL組成，控制網頁前進後退等作用;
主要方法：
- back() 後退，從歷史列表中裝入前一個 URL;
- forward() 前進，從歷史列表中裝入下一個 URL;
- go() //go(1)是前進，go(-1)是後退，從歷史列表中裝入 URL.

document對象

簡述：document對象代表整個文檔界面，裏面包括標籤、屬性等等;
主要屬性：
- all 獲取頁面所有元素對象, firfox不兼用該屬性;
- forms 獲取頁面所有表單對象;
- images 獲取頁面所有圖片對象;
- links 獲取所有超鏈接或area對象.

上面都是常用的Bom對象，瞭解瞭解，等需要用到時查查文檔，文檔在手，不怕不怕的~~

Ⅲ.學習Dom編程

Dom編程將頁面封裝成了一顆有層次化的Dom樹，可便於對頁面進行修改、增加、刪除、查找頁面的某部分;
Dom定義了訪問和操作HTML文檔的標準方法；而其中的document對象就代表整個頁面的文檔樹,和上面Bom中的document對象是同者,下面總結下常用的api，因爲貼具體的demo會讓文章的篇幅有些長了，所以下篇文章在進行總結.

獲取節點

什麼是節點？這個首先了解下，其實就是平常畫頁面用到的body/form/input這些標籤，只是換個說話而已，就叫節點對象,標籤的屬性也叫節點屬性.

那麼怎麼獲取節點?下面是獲取節點對象的api

document.getElementById(“id”) 返回對擁有指定 id 的第一個節點對象的引用,id是唯一的;
document.getElementsByName(“name”) 返回帶有指定名稱的對象集合;
document.getElementsByTagName(sTagName) 返回帶有指定標籤名的對象集合.

那如何獲取和設置標籤的屬性?

getAttribute(“屬性名”) 返回屬性值;
setAttribute(“屬性名”, “屬性值”); 爲節點對象設置屬性.

查找節點

查找節點主要是通過當前節點尋找父節點、子節點、兄弟節點、文本內容等等.

具體的屬性

parentNode 獲取當前元素的父節點。

childNodes ———-> 獲取當前元素的所有下一級子元素;
firstChild ————–> 獲取當前節點的第一個子節點;
lastChild —————> 獲取當前節點的最後一個子節點;
nextSibling ————-> 獲取當前節點的下一個節點（兄節點）;
previousSibling ——-> 獲取當前節點的上一個節點（弟節點）;
textContent ————> 設置或返回元素及其後代的文本內容;

添加節點

document.createElement(“標籤名”) 創建新元素節點；
document.createTextNode(“文本內容”) 創建新文本節點；
label.appendChild(e) label是節點對象，作用是將e節點添加到label節點力最後的位置,即e是label節點的子節點；
label.insertBefore(“要插入的節點”, “插入的位置”); 添加到label中，位置在第二個參數節點之前.

刪除節點

label.removeChild(child) 刪除label節點中指定的子節點child.

Ⅳ.標籤事件綁定

其實和Android針對控件的事件綁定及監聽是差不多的，那麼瞭解下具體的設置和大致的事件類型;
基本上所有的HTML元素中都可以指定事件屬性，每個元素支持什麼樣的事件應查詢文檔，所有的事件屬性都是以on開頭，後面的是事件的觸發方式.


     <table border="2dp" align="center" width="30%" cellspacing="0px" cellpadding="5px">
            <tr align="center">
               <td>驗證碼</td>
                   <td>
                      <input type="text" id="inputCode" onchange="checkCode()"/>
                      <span id="codeSpan"></span>
                      <a href="#" onclick="createCode()">看不清楚</a>
                      <span id="codeSpan1"></span>
                   </td>

           </tr>
     </table>

上面就是針對在元素中寫相應的事件屬性，而其值指定爲一段JS代碼，input標籤中的onchange、a標籤中的onclick這都是標籤的屬性，那麼其值就是類似Android中的一個方法，假如當點擊a標籤所在的區域，則觸發createCode這個js方法.

鼠標點擊相關的事件

onclick 在用戶用鼠標左鍵單擊對象時觸發;
ondblclick 當用戶雙擊對象時觸發;
onmousedown 當用戶用任何鼠標按鈕單擊對象時觸發;
onmouseup 當用戶在鼠標位於對象之上時釋放鼠標按鈕時觸發.

鼠標移動相關的事件

onmouseover 當用戶將鼠標指針移動到對象內時觸發;
onmouseout 當用戶將鼠標指針移出對象邊界時觸發;
onmousemove 當用戶將鼠標劃過對象時觸發.
onmouseleave 當用戶將鼠標指針移出對象邊界時觸發,和onmouseout作用一致，詳細的暫待;
onmouseenter 當用戶將鼠標指針移動到對象內時觸發，和onmouseover作用一致，詳細的暫待;

按鍵相關的事件

onkeydown 當用戶按下鍵盤按鍵時觸發;
onkeyup 當用戶釋放鍵盤按鍵時觸發;
onkeypress 當用戶按下字面鍵時觸發.

焦點相關的事件

onblur 在對象失去輸入焦點時觸發;
onfocus 當對象獲得焦點時觸發.

other事件

onchange 當對象或選中區的內容改變時觸發;
onload 在瀏覽器完成對象的裝載後立即觸發;
onsubmit 當表單將要被提交時觸發.

Ⅴ.總結

關於Dom編程和Bom編程大致的對象和方法屬性都在上面總結了，那麼下篇文章再總結下練習的小demo，88~~

JavaScript基礎篇章(總結2)

前言

Ⅰ.簡述

Ⅱ.學習Bom編程

上面都是常用的Bom對象，瞭解瞭解，等需要用到時查查文檔，文檔在手，不怕不怕的~~

Ⅲ.學習Dom編程

Ⅳ.標籤事件綁定

Ⅴ.總結

致遠OA及相關OA系統集成與二次開發

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

【面試準備】項目經驗——接口自動化項目

筆記：移動互聯網時代 , 如何優化你的網絡 —— HttpDNS

踮起仰望 HTTPS原理

Android混淆總結篇(二)

MVP內存泄漏全解(筆記)

Retrofit源碼解析(二)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結