JavaScript基本語法03

時間  2019-12-13
標籤 javascript 基本 語法 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript

  • 原文博客地址: JavaScript基本語法03
  • 書接上文JavaScript基本語法, 記錄了JavaScript的記錄了相關數據類型和函數等相關語法
  • 這裏主要記錄瀏覽器對象模型(BOM), window對象和文檔對象模型(DOM)

BOM

  • BOM:瀏覽器對象模型（Browser Object Model)，是一個用於訪問瀏覽器和計算機屏幕的對象集合。咱們能夠經過全局對象window來訪問這些對象。
  • 全部瀏覽器都支持window對象, 它表示瀏覽器窗口
  • 全部JavaScript全局對象、函數以及變量均自動成爲window對象的成員
  • 全局變量是window對象的屬性
  • 全局函數是window對象的方法

Window

  • window.document: 是一個BOM對象，表示的是當前所載入的文檔(即頁面)，但它的方法和屬性同時也屬於DOM對象所涵蓋的範圍
  • window.frames: 是當前頁面中全部框架的集合
  • window.navigator: 用於反應瀏覽器及其功能信息的對象
  • window.screen: 提供瀏覽器之外的環境信息
  • window.location: 用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面
  • window.history: 獲取瀏覽器的歷史記錄
  • 以上對象在編寫時能夠通常不使用window這個前綴

Screen

Screen中的相關屬性的使用以下javascript

// 提供瀏覽器之外的環境信息
console.log(window.screen)
// 輸出: Screen { availWidth: 2560, availHeight: 1417, width: 2560, height: 1440, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 23, availLeft: 0 }

// 返回屏幕的寬度，以像素計，減去界面特性，好比窗口任務欄
console.log(screen.availWidth)
// 輸出: 2560

// 返回訪問者屏幕的高度，以像素計，減去界面特性，好比窗口任務欄
console.log(screen.availHeight)
// 輸出: 1417

// 返回總寬度 * 高度
console.log(screen.width + "*" + screen.height)
// 輸出: 2560*1440

// 返回色彩深度
console.log(screen.colorDepth)
// 輸出: 24

// 返回色彩分辨率
console.log(screen.pixelDepth)
// 輸出: 24
複製代碼

Location

  • 用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面
  • 經常使用的屬性使用和介紹
console.log(window.location)

// 返回web主機的域名和端口號
console.log(location.host)
// localhost:63342

// 返回 web 主機的域名
console.log(location.hostname)
// localhost

// 返回當前頁面的路徑和文件名
console.log(location.pathname)

// 返回 web 主機的端口 （80 或 443）
console.log(location.port)

// 返回所使用的 web 協議（http:// 或 https://）
console.log(location.protocol)

// 返回當前頁面的 URL
console.log(location.href)

// 設置須要跳轉的頁面的URL
window.location.href = "https://www.titanjun.top/"
複製代碼

經常使用的相關方法介紹css

// 在瀏覽器中默認是會緩存瀏覽記錄的
// 刷新當前頁面, 會緩存
window.location.reload()

// 刷新當前頁面, 不帶緩存
window.location.reload(true)

// 加載新的頁面
window.location.assign("greenWindow.html")
window.location.assign("https:www.titanjun.top")

// 替換當前頁面(注意：不會再瀏覽器的歷史記錄表中留下記錄)
window.location.replace("greenWindow.html")
window.location.replace("https:www.titanjun.top")
複製代碼

History

包含瀏覽器的歷史記錄html

// 獲取歷史記錄的長度
console.log(history.length)

// 回到上一頁面
window.history.back()

// 進入到下一頁面
window.history.forward()

// go() 裏面的參數表示跳轉頁面的個數 
// 例如 history.go(2) 表示前進一個頁面
window.history.go(2)
// history.go(-1) 表示後退一個頁面
window.history.go(-1)
複製代碼

Window相關方法

open&close

window.close(): 關閉窗口java

// 用於打開一個新的瀏覽器窗口或查找一個已命名的窗口
open(url?: string, target?: string, features?: string, replace?: boolean)
複製代碼
參數 描述
url 一個可選的字符串，聲明瞭要在新窗口中顯示的文檔的 URL。若是省略了這個參數，或者它的值是空字符串，那麼新窗口就不會顯示任何文檔
target 一個可選的字符串，該字符串是一個由逗號分隔的特徵列表，其中包括數字、字母和下劃線，該字符聲明瞭新窗口的名稱。這個名稱能夠用做標記 <a> 和 <form> 的屬性 target 的值。若是該參數指定了一個已經存在的窗口，那麼open() 方法就再也不建立一個新窗口，而只是返回對指定窗口的引用。在這種狀況下，features將被忽略。
features 一個可選的字符串，聲明瞭新窗口要顯示的標準瀏覽器的特徵。若是省略該參數，新窗口將具備全部標準特徵。在窗口特徵這個表格中，咱們對該字符串的格式進行了詳細的說明
replace 一個可選的布爾值。true裝載到窗口的URL在窗口的瀏覽歷史中建立一個新條目，false替換瀏覽歷史中的當前條目

window中方法open()經常使用的特性node

屬性 值 描述
width 數值 新窗口的寬度, 不能超過100
height 數值 新窗口的高度, 不能超過100
top 數值 距離屏幕上方的像素
left 數值 距離屏幕左側像素
toolbar yes/no 是否顯示工具欄, IE瀏覽器有效
location yes/no 是否顯示地址欄, IE瀏覽器有效
fullscreen yes/no 全屏顯示

onload/onunload

onload加載事件和onunload卸載事件web

<body>
	<button onclick="func()">跳轉</button>
	<script type="text/javascript"> //onunload事件 //當頁面徹底卸載再觸發，只有IE支持 window.onunload = function() { alert("肯定關閉"); }; function func() { window.location.href = "red.html"; } //load事件 //當頁面加載完成的時候會觸發該事件  window.onload = function() { alert("我在界面加載完後才顯示"); }; alert("頁面加載中"); </script>
</body>
複製代碼

onscroll

當窗口發生滾動會觸發該事件編程

<body style="height:3000px">
	<h1>我是頂部</h1>
	<button onclick="goOn()" style="position: fixed;right: 50px;bottom: 50px">返回頂部</button>

	<script type="text/javascript"> //當窗口發生滾動會觸發該事件 window.onscroll = function() { console.log("滾動"); //打印滾動高度 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; console.log(scrollTop); }; //返回頂部 function goOn() { document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } </script>
</body>
複製代碼

onresize

當瀏覽器發生縮放的時候就會反覆觸發resize事件數組

<body>
	<script type="text/javascript"> //當瀏覽器發生縮放的時候就會反覆觸發resize事件  window.onresize = function() { var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; console.log(document.documentElement.clientWidth, document.body.clientWidth, window.innerWidth, w); console.log(document.documentElement.clientHeight, document.body.clientHeight, window.innerHeight, h); }; </script>
</body>

複製代碼

JS彈窗

在JavaScript中建立三種消息框：警告框、確認框、提示框瀏覽器

警告框

  • 警告框常常用於確保用戶能夠獲得某些信息。
  • 當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做

Alert 

<body>
    <button onclick="showAlert()">點擊顯示警告框</button>

    <script type="text/javascript"> function showAlert() { alert('你好, 這是一個警告框!') } </script>
</body>

複製代碼

確認框

  • 確認框一般用於驗證是否接受用戶操做。
  • 當確認卡彈出時，用戶能夠點擊 "確認" 或者 "取消" 來肯定用戶操做。
  • 當你點擊 "確認", 確認框返回true， 若是點擊 "取消", 確認框返回false

confirm 

<body>
    <button onclick="showConfirm()">點擊顯示確認框</button>

    <script type="text/javascript"> function showConfirm() { var action = '' var con = confirm('你好, 這是一個警告框!') if (con == true) { action = '選擇了確認' } else { action = '選擇了取消' } console.log(action) } </script>
</body>
複製代碼

提示框

  • 提示框常常用於提示用戶在進入頁面前輸入某個值。
  • 當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。
  • 若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲null

image 

<body>
    <button onclick="showPrompt()">點擊顯示提示框</button>

    <script type="text/javascript"> function showPrompt() { var action = '' var person = prompt('請輸入你的名字', 'titanjun') if (person != null && person != "") { action = "你好: " + person } console.log(action) } </script>
</body>
複製代碼

JS計時器

  • 在JavaScript中有兩種計時方式, 間歇性計時器和延遲性定時器
  • setInterval()和setTimeout()是HTML DOM Window對象的兩個方法
  • 兩個方法能夠不使用window前綴，直接使用函數

setInterval

  • 間隔指定的毫秒數不停地執行指定的代碼
  • 第一個參數是函數, 第二個參數間隔的毫秒數, 1000 毫秒是一秒
// time不是定時器的名字, 只是定時器的編號, 是一個number類型
var time = window.setInterval(function () {
    console.log("titanjun.top")
}, 1000)
console.log(typeof time)
複製代碼
  • 在開啓定時器後, 如何讓定時器中止工做?
  • clearInterval()方法用於中止setInterval()方法執行的函數代碼
  • 一旦定時器中止工做後, 就必須從新啓動定時器, 且定時器不能暫停, 只能中止和重啓
  • 要使用clearInterval()方法, 在建立計時方法時你必須使用全局變量
<body>
    <button onclick="closeInterver()">關閉定時器</button>

    <script type="text/javascript"> //setInterval(函數名,時間) // 功能：建立一個間歇性定時器，每間隔參數二時間執行一次參數一函數 // 返回值：定時器的id，能夠經過該id關閉定時器 // time不是定時器的名字, 只是定時器的編號, 是一個number類型 var time = window.setInterval(function () { console.log("titanjun.top") }, 1000) console.log(typeof time) // 關閉定時器 function closeInterver() { //注：js中沒有恢復定時器一說，當你中止定時器以後，定時器就會被刪掉，想要繼續的話，直接新建一個定時器。 window.clearInterval(time) } </script>
</body>
複製代碼

setTimeout

在指定的毫秒數後執行指定代碼, 且只執行一次緩存

<body>
    <script type="text/javascript"> //setTimeout(函數名，時間) //功能：參數2時間之後再執行參數1函數 //返回值：定時器的id alert("建立定時器，3秒後執行名爲func的函數"); var timer = setTimeout(function () { console.log("titanjun.top") }, 3000) // 關閉定時器 function closeTimer() { window.clearTimeout(timer) } </script>
</body>
複製代碼

DOM

  • 當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）
  • DOM是訪問HTML和操做HTML的標準
  • 經過可編程的對象模型，JavaScript得到了足夠的能力來建立動態的HTML
    • JavaScript可以改變頁面中的全部HTML元素
    • JavaScript可以改變頁面中的全部HTML屬性
    • JavaScript可以改變頁面中的全部CSS樣式
    • JavaScript可以對頁面中的全部事件作出反應
  • HTML DOM模型被構造爲對象的樹

domlisten

  • DOM節點層級關係(DOM樹)
    • 一、父節點(parent node)：父節點擁有任意數量的子節點
    • 二、子節點(child node)：子節點只能擁有一個父節點
    • 三、兄弟節點(sibling node)：擁有相同父節點的同級節點
    • 四、根節點(root node)：一個HTML文檔通常只有一個根節點，根節點沒有父親節點，是最上層的節點
    • 祖先節點：包含子節點的節點均可以叫作祖先節點，其中包括了父節點
    • 後代節點：一個節點內包含的全部節點，叫作後代節點，其中包括了子節點
  • DOM節點的分類
    • 一、文檔節點
    • 二、標籤(元素)節點
    • 三、屬性節點
    • 四、文本節點
    • 五、註釋節點

domcategory

獲取HTML標籤

在JavaScript中須要操做HTML標籤, 首先要獲取該標籤, 這裏介紹三種方法

  • 經過id找到HTML元素
  • 經過標籤名找到HTML元素
  • 經過類名找到HTML元素
  • 經過name屬性找到HTML元素
<body>
    <!--id div-->
    <div id="idDiv"></div>

    <!--classs div-->
    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class1"></div>

    <!--input-->
    <input type="text" name="inputText">
    <input type="text" name="inputText">
    <input type="text" name="inputText">

    <!--JavaScript-->
    <script type="text/javascript"> // 1. 根據元素id獲取元素節點 console.log('-------getElementById--------') var idDiv = document.getElementById('idDiv') console.log(idDiv) console.log(typeof idDiv) // 2. 根據元素class屬性獲取元素節點, 返回數組 // 獲取相同class屬性的元素節點列表, 注意：此方法不支持IE8如下 console.log('-----------getElementsByClassName------------------') var classDivs = document.getElementsByClassName('class1') for (var i = 0; i < classDivs.length; i++) { console.log(classDivs[i]) } // 3.根據標籤名來獲取元素節點的結合, 返回數組 console.log('-----------getElementsByTagName------------------') var tagNameDics = document.getElementsByTagName('div') for (var i = 0; i < tagNameDics.length; i++) { console.log(tagNameDics[i]) } // 4. 根據name屬性值來獲取元素節點的集合, 返回數組 console.log('------------getElementsByName--------------------') var nameDivs = document.getElementsByName('inputText') for (var i = 0; i < nameDivs.length; i++) { console.log(nameDivs[i]) } </script>
</body>
複製代碼

獲取屬性節點

  • 標籤的屬性分官方定義的屬性和自定義屬性
  • 官方定義的屬性可用點語法獲取屬性值
  • 自定義屬性只能經過getAttribute方法
<body>
    <input type="text" id="in" placeholder="titanjun.top" blog="titanjun">

    <script type="text/javascript"> var input = document.getElementById('in') console.log(input) // 1. 獲取官方定義的屬性節點能夠直接使用點語法, 用法: 元素節點.屬性名 // 獲得元素對應的屬性值 var inType = input.type console.log(inType) console.log(input.placeholder) // 修改元素對應的屬性值 input.placeholder = "https://www.titanjun.top" console.log('-----------getAttribute-----------') // 2. getAttribute方法, 可獲取官方定義的屬性和自定義的屬性 console.log(input.getAttribute('placeholder')) var blog = input.getAttribute('blog') console.log(blog) console.log('-----------setAttribute-----------') // 修改元素對應的屬性名 input.setAttribute('blog', 'titan') console.log(input) console.log('-----------removeEventListener-----------') // 移除元素節點中的某個屬性節點, 某些低版本瀏覽器不支持 input.removeAttribute('blog') console.log(input) </script>
</body>
複製代碼

獲取文本節點

  • innerHTML: 從對象的開始標籤到結束標籤的所有內容,不包括自己Html標籤
  • outerHTML: 除了包含innerHTML的所有內容外, 還包含對象標籤自己
  • innerText: 從對象的開始標籤到結束標籤的所有的文本內容
<body>
    <div id="box">
        這是一個div盒子
    </div>

    <script type="text/javascript"> var jsDiv = document.getElementById('box') // 1. 元素節點.innerHTML //從對象的開始標籤到結束標籤的所有內容,不包括自己Html標籤 console.log('--------innerHTML--------') var inner = jsDiv.innerHTML console.log(jsDiv) console.log(typeof jsDiv) // 2. 元素節點.outerHTML //除了包含innerHTML的所有內容外, 還包含對象標籤自己 console.log('--------innerHTML--------') var outer = jsDiv.outerHTML console.log(outer) console.log(typeof outer) // 3. 元素節點.innerText //從對象的開始標籤到結束標籤的所有的文本內容 console.log('--------innerHTML--------') var text = jsDiv.innerText console.log(text) console.log(typeof text) // 修改 jsDiv.innerText = "https://www.titanjun.top" jsDiv.innerHTML = "<h2>https://www.titanjun.top</h2>" </script>
</body>
複製代碼

讀寫行間樣式表

獲取像是表中的樣式屬性的屬性值, 經常使用有兩種方式

  • 方法一: 元素節點.style.樣式屬性名
  • 方法二: 元素節點.style["樣式屬性名"]
<body>
    <div id="box" style="width: 100px; height: 100px; background-color: red"></div>
    <button onclick="changeColor()">換顏色</button>

    <script type="text/javascript"> // 獲取元素節點 var jsDiv = document.getElementById('box') // 獲取style屬性節點 var divStyle = jsDiv.style // console.log(divStyle) // 獲取像是表中的樣式屬性的屬性值 console.log(divStyle.width) console.log(jsDiv.style["height"]) // 設置樣式表中樣式屬性的屬性值 // 元素節點.style.樣式屬性名 = 樣式屬性值 // background-color --- backgroundColor jsDiv.style.backgroundColor = 'green' function changeColor() { var r = parseInt(Math.random() * 256); var g = parseInt(Math.random() * 256); var b = parseInt(Math.random() * 256); var colorStr = "rgb(" + r + ", " + g + ", " + b + ")"; jsDiv.style.backgroundColor = colorStr } </script>
</body>
複製代碼
  • 設置樣式表中樣式屬性的屬性值時, 樣式屬性名遵循駝峯命名規則
  • HTML中的-號去掉，-號後面的單詞首字母大寫
  • 通常狀況下, css的樣式屬性中出現"-"好, 則對應的style屬性是: 去掉"-"號後面單詞的第一個字母大寫. 若是沒有"-"號, 則二者同樣
CSS樣式屬性 Style對象屬性
color color
font-size fontSize
font-family fontFamily
background-color backgroundColor
background-image backgroundImage
display display

節點經常使用屬性

  • 在DOM中，每一個節點都是一個對象
  • 對象擁有方法和屬性，並可經過JavaScript進行訪問和操做
  • 三個重要的節點屬性是：nodeName, nodeValue, nodeType
節點類型 nodeName nodeType nodeValue
元素節點 元素名稱 1 null
屬性節點 屬性名稱 2 屬性值
文本節點 #text 3 文本內容不包括html
註釋節點 #comment 8 註釋內容
文檔節點 #document 9 null 
<body>
    <div id="box1">
        <p>我是第一個P</p>
        <p>我是第二個P</p>
        <p>我是第三個P</p>
        <p>我是第四個P</p>
    </div>
    <div id="box2"></div>
    <div id="box3"></div>
    <input id="put" type="text" name="in" placeholder="https://www.titanjun.top">

    <script type="text/javascript"> // 節點共有的屬性：nodeName、nodeType、nodeValue var div1 = document.getElementById('box1') console.log(div1) console.log(div1.nodeName, div1.nodeType, div1.nodeValue) // 1. 獲取當前元素節點的全部的子節點 var childNodesArr = div1.childNodes console.log(childNodesArr) // 2. 獲取當前元素節點的第一個子節點 var firstChildNode = div1.firstChild console.log(firstChildNode) // 3. 獲取當前節點的最後一個節點 var lastChhildNode = div1.lastChild console.log(lastChhildNode) // 4. 獲取該節點文檔的根節點, 至關於document var rootNode = div1.ownerDocument console.log(rootNode) // 5. 獲取當前節點的父節點 var parentNode = div1.parentNode console.log(parentNode) // 6. 獲取當前節點的前一個同級節點 var div2 = document.getElementById('box2') var previousNode = div2.previousSibling console.log(previousNode) // 7. 獲取當前節點的後一個同級節點 var nextNode = div2.nextSibling console.log(nextNode) // 8. 獲取當前節點的全部屬性節點 var jsInput = document.getElementById('put') console.log(jsInput.attributes) </script>
</body>
複製代碼

節點動態操做

<body>
    <div id="box">
        <p>titanjun</p>
        <p>titanking</p>
    </div>

    <script type="text/javascript"> // 建立元素節點 var div1 = document.createElement('div') div1.id = 'box1' console.log(div1) // 將一個新節點添加到某個節點的子節點列表的末尾上 //父節點.appendChild(子節點) document.body.appendChild(div1) // 將新節點添加到父節點的某個子節點的前面 var jsP = document.createElement('p') jsP.innerHTML = "https://www.titanjun.top" //父節點.insertBefore(新節點, 子節點) var jsD = document.getElementById('box') jsD.insertBefore(jsP, jsD.childNodes[3]) console.log(jsD) // 建立文本節點 var jsStr = document.createTextNode('/titanjun.top') // 添加文本節點 var jsP2 = jsD.childNodes[1] jsP2.appendChild(jsStr) // 替換節點, 將父節點中的某個子節點替換成新的節點 var replaceDiv = document.createElement('div') replaceDiv.id = 'box2' //父節點.replaceChild(新節點, 子節點) div1.parentNode.replaceChild(replaceDiv, div1) // 複製節點 // 只複製自己 var copyDiv1 = jsD.cloneNode() console.log(copyDiv1) // 複製自己和子節點 console.log(jsD.cloneNode(true)) // 刪除節點, 刪除父節點下對應的子節點 //父節點.removeChild(子節點) replaceDiv.parentNode.removeChild(replaceDiv) // 參照物父元素 //當某個元素的父元素或以上元素都未進行CSS定位時，則返回body元素，也就是說元素的偏移量（offsetTop、offsetLeft）等屬性是以body爲參照物的 //當某個元素的父元素進行了CSS定位時（absolute或者relative），則返回父元素，也就是說元素的偏移量是以父元素爲參照物的 //當某個元素及其父元素都進行CSS定位時，則返回距離最近的使用了CSS定位的元素 var temp = jsD.childNodes[1].offsetParent console.log(temp) </script>
</body>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程