day48

DAY48

BOM

window.close() //window可不寫

計時器

function func() {
        alert(123)
    }
    function show() {
        var t = setInterval(func,3000);  // 每隔三秒鐘執行一次
        function inner() {
            clearInterval(t)    //清除計時器對象
        }
        setTimeout(inner,9000)  //設定事件後執行，只執行一次，能夠用clearTimeout取消
    }
    show()

DOM

### 查找標籤

#### 直接查找

document.getElementById 根據ID獲取一個標籤
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName 根據標籤名獲取標籤合集

#### 間接查找

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

### 節點操做

#### 建立節點

​```js
var divEle = document.createElement("div");

添加節點

somenode.appendChild(newnode)；追加一個子節點（做爲最後的子節點）
somenode.insertBefore(newnode,某個節點);把增長的節點放到某個節點的前邊。
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

刪除節點

//得到要刪除的元素，經過父元素調用該方法刪除。

somenode.removeChild(要刪除的節點)

替換節點

somenode.replaceChild(newnode, 某個節點);

屬性節點

獲取文本節點的值

var divEle = document.getElementById("d1")
divEle.innerText；//只是文本
divEle.innerHTML；//包括標籤

設置文本節點的值

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操做

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

獲取值操做

//elementNode.value
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操做

//經過對象.的方式操做
className  獲取全部樣式類名(字符串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

指定css操做

1. 對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可

   obj.style.margin
   obj.style.width
   obj.style.left
   obj.style.position

2. 對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可

   obj.style.marginTop
   obj.style.borderLeftWidth
   obj.style.zIndex
   obj.style.fontFamily

事件

當符合某個條件下，自動觸發的動做或響應

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

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

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

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。
document.addEventListener("keydown",keydown);
//鍵盤監聽，注意：在非ie瀏覽器和非ie內核的瀏覽器
//參數1：表示事件，keydown:鍵盤向下按；參數2：表示要觸發的事件
function keydown(event){
//表示鍵盤監聽所觸發的事件，同時傳遞傳遞參數event
    console.log(event.keyCode);//keyCode表示鍵盤編碼
}

綁定方式

1. 做爲標籤的屬性，寫在標籤內（不推薦）

   <div id="d1" onclick="changeColor(this);">點我</div>
   <script>
     function changeColor(ths) {
       ths.style.backgroundColor="green";
     }
   </script>

2. 寫在script內，經過查找綁定（推薦使用）

   <div id="d2">點我</div>
   <script>
     var divEle2 = document.getElementById("d2");
     divEle2.onclick=function () {
       this.innerText="嘻嘻嘻";
     }
   </script>

js代碼運行報錯

代碼自上而下加載，下面的代碼還未加載就已經在上面調用了

1. 利用onload，等待某個對象加載完畢以後再執行

   JQuery有點相似於python後端的模塊 幫你封裝了一些簡易的操做

2. 將js代碼寫在body最下方

JQuery

須要導入才能使用

/*jQuery('選擇器').action('屬性')*/
/*$('選擇器').action('屬性')*/