前端三劍客之 JavaScript (BOM操做和DOM操做)

BOM操做

// window 操做
window.innerHeight                            // 瀏覽器窗口的內部高度
window.innerWidth                 // 瀏覽器窗口的內部寬度
window.open()                       // 打開新窗口
window.close( )                     // 關閉當前窗口
window.navigator.appName　　           // Web瀏覽器全稱
window.navigator.appVersion　　    // Web瀏覽器廠商和版本的詳細字符串
window.navigator.userAgent        // 客戶端絕大部分信息
window.navigator.platform　　　        // 瀏覽器運行所在的操做系統
window.history.forward()                // 前進一頁
window.history.back()                       // 後退一頁
window.location.href                        // 當前頁面獲取URL
window.location.href="URL"            // 跳轉到指定頁面
window.location.reload()                    // 從新加載頁面

// 彈窗
alert()                                                   // 警告框
confirm()                                               // 確認框
prompt()                                                    // 提示框

// 定時
setTimeout('須要定時的函數',1000); // 設置單次定時觸發
clearTimeout(t)                                     // 清除
setInterval('須要定時的函數',1000); // 設置循環觸發
clearInterval(t)                                    // 清除

DOM操做

經過JS代碼操做html頁面，實現相應效果

要想操做html頁面，實現相應動態效果，第一步仍是得先解決查找標籤的事情

查找標籤

直接查找

document.getElementById('須要查找的id')                              // 用id查找
document.getElementsByClassName('須要查找的類名')           // 用類名查找
document.getElementsByTagName('須要查找的標籤名')               // 用標籤名查找

間接查找

使用方法：
    var dEle = document.getElementById('p1');
    dEle.parentElement

parentElement            //父節點標籤元素
children                 //全部子標籤
firstElementChild        //第一個子標籤元素
lastElementChild         //最後一個子標籤元素
nextElementSibling       //下一個兄弟標籤元素
previousElementSibling   //上一個兄弟標籤元素

節點操做

• 1.建立節點，2.添加自定義屬性，3.添加固有屬性，4.添加到DOM樹中瀏覽器展現

  // appendChild 直接尾部添加
  
  // 建立標籤
  var imgEle = document.createElement('img');
  // 設置自定義屬性
  imgEle.setAttribute('id','i1')
  // 設置固有的屬性
  imgEle.src = 'longzhu.png'
  // 添加到DOM樹中，讓瀏覽器展現出來
  var d1Ele = document.getElementById('d1')  // d1爲須要插入的位置標籤id
  d1Ele.appendChild(imgEle)

• 1.建立節點，2.添加固有屬性和標籤文本值，3.指定位置添加標籤

  // insertBefore 固定位置添加
  
  // 建立標籤
  var aEle = document.createElement("a")
  aEle.href = 'https:www.baidu.com'
  aEle.innerText = '點我點我'
  // 獲取參考點標籤
  var d3Ele = document.getElementById('d3')
  var s1Ele = document.getElementById('s1')
  // 在d3標籤內部，s1標籤上方添加建立的a標籤
  d3Ele.insertBefore(aEle,s1Ele)

• innerText和innerHTML的區別

  // 獲取一個標籤
  var d2Ele = document.getElementById('d2');
  // 僅僅能獲取到d2標籤的內部文本
  d2Ele.innerText
  // 不只獲取文本，標籤頁所有獲取到
  d2Ele.innerHTML
  
  // 獲取標籤
  var d2Ele = document.getElementById('d2');
  // 設置內部文本
  d2Ele.innerText = '哈哈'
  d2Ele.innerHTML = '呵呵'
  // 設置內部文本(文本中包含標籤)
  d2Ele.innerText = '<h1>我是h1</h1>' // 不認識html標籤
  d2Ele.innerHTML = '<h1>我是h1</h1>' // 可以識別html標籤

• 獲取值操做

  // 用於獲取用戶選擇或輸入的標籤
  input
  select
  textarea
  
  // 獲取值
  demoEle.value
  // 設置值
  demoEle.value = '我改了'

• class操做

  // 注意點：經過class獲取到的數據是一個數組，須要經過索引拿到單個對象
  
  // 根據class找到相應的標籤對象
  var c1Ele = document.getElementsByClassName('c1')[0]
  
  // 獲取該標籤對象的class屬性列表並移除背景紅色
  c1Ele.classList.remove('bg-red')
  
  // 添加屬性
  c1Ele.classList.add('bg-green')
  
  // 判斷是否存在
  c1Ele.classList.contains('bg-green')
  c1Ele.classList.contains('bg-red')
  
  // 有則刪除，無則添加
  c1Ele.classList.toggle('bg-green')

• style樣式操做

  // 修改高度樣式
  d1Ele.style.height = '200px'
  // 修改寬度樣式
  d1Ele.style.width = '200px'
  // 修改背景色樣式
  d1Ele.style.backgroundColor = 'blue'

事件綁定

經常使用事件

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

兩種綁定事件的方法

• 標籤內直接調用相應事件函數
• js代碼自動查找標籤並綁定事件

示例

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>開關1</button>
<button id='b2'>開關2</button>
<script>
    // 標籤直接綁定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 經過JS代碼綁定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

搜索框案例

<input type="text" value="蘋果手機" id="i1">
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也能夠直接用this
        this.value = ''
    };
    i1Ele.onblur = function (ev) {
        i1Ele.value = '蘋果電腦';
        // 也能夠直接用this
        this.value = '蘋果電腦'
    }

計時器案例

// 全局變量
var t;
// 步驟1 
// 將當前時間填寫到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();

// 步驟2(點開始，時間動起來)>>>(每隔一秒執行一次展現時間操做)
    // 將添加時間的功能封裝成一個函數
function showTime(){
    var now = new Date();
    var i1Ele = document.getElementById('i1');
    i1Ele.value = now.toLocalString();
};
    // 頁面一刷新先展現當前時間
showTime()
    // 找到開始按鈕，綁定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
    // 判斷是否已經開啓過定時器了
    if (!t){
        // t指代定時器
        t = setInterval(showTime,1000);
    }
}

// 步驟3(給中止按鈕綁定事件，點擊後清除定時器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
    // 問題來了，清除誰呢？須要有一個變量指代定時器
    clearInterval(t)；
}

// 步驟4(若是點擊屢次開始按鈕，發現沒法清除定時器)
// 判判定時器是否已開啓

省市聯動案例

data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
      // 先提早將兩個標籤對象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展現省份信息
    for (var province in data){
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
      // 綁定變化事件
    pEle.onchange = function () {
        // 獲取對應的省信息
        var currentProvince = pEle.value;
        // 將以前的省對應的市清除
        cEle.innerHTML = '';
      
        // 添加默認的請選擇項
        var newEle = document.createElement('option');
        newEle.innerText = '請選擇';
        cEle.appendChild(newEle);
      
        // 獲取當前省對應的市
        relCity = data[currentProvince];
        // 循環對應的市，添加到市對應的選擇框中
        for(var i=0;i<relCity.length;i++){
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }