js的頁面交互

與html標籤創建關係

//獲取標籤，js如何與html標籤創建聯繫  兩種方式
//一、
let num = document.getElementsByClassName('d1');
console.log(num[0]);
let n = document.getElementById('aa');
console.log(n);
let c = document.getElementsByTagName('div');
console.log(c);
//二、同css選擇器  querySelector querySelectorAll
let p1 = document.querySelector(".d2");
// querySelector 是選一個
// querySelectorAll 是選多個，放在數組裏面
console.log(p1);

創建聯繫的兩種方式

獲取並修改html標籤的內容及屬性

//修改樣式
//1.找到修改目標
let d1 = document.querySelector('.d1');
//2.獲取樣式
console.log(d1.style.color);
// getAttribute 也是獲取標籤屬性，也是隻能獲取行間式的屬性
console.log(d1.getAttribute("background"));
//前兩種獲取方式只能獲取行間式的屬性
//想要獲取內聯外聯的屬性，須要getComputedStyle
let d4 = getComputedStyle(d1,null).background;
console.log(d4);
//3.修改樣式
d1.style.color = "black";
console.log(d1.style.color);
//修改內容
d1.innerText = "大沙地";
d1.innerHTML = "<b>哈哈</b>";
//修改屬性 setAttribute(屬性key  屬性value)
d1.setAttribute("title","別點我");

獲取及修改樣式內容

事件

鼠標事件

//鼠標事件
// onclick ondblclick onmouseover onmouseleave onmousedown onmouseup
// onclick 單擊觸發(只是鼠標左鍵)
// ondblclick 雙擊觸發(也是鼠標左鍵)
// onmouseover 鼠標移到上面就觸發
// onmouseleave 鼠標移開觸發
// onmousedown 鼠標處於點下狀態觸發，因此單擊也會觸發(時間短)，不區分左右鍵
// onmouseup 鼠標鬆開觸發，不區分左右鍵
// 在鼠標事件綁定的函數中，咱們能夠修改任意標籤的屬性，沒有了css以前的限制
// 自身的屬性頁能夠修改，this就是表明自身標籤
//eg:
let ms = document.querySelector('.d1');
ms.ondblclick = function (ev) {
    //鼠標事件綁定函數這裏傳入的參數就是鼠標的一些相關信息
    //咱們比較關心的幾個參數是：clientX clientY altKey ctrlKey shiftKey
    console.log(ev.clientX, ev.clientY);
    console.log(ev.altKey, ev.ctrlKey , ev.shiftKey);
    // this.setAttribute("background-color","blue"); 這樣只會給標籤
    // 添加一個background-color屬性，而不會添加到他的樣式中
    // this.setAttribute('style',"background-color:blue;");
    //修改是直接在行間式裏修改
};
ms.onmousedown = function (ev) {
    this.setAttribute('style',"background-color:blue;");
};
ms.onmouseup = function (ev) {
    this.setAttribute('style',"background-color:black;");
};

鼠標事件

鍵盤事件

// 鍵盤事件
// 鍵盤事件的話須要鼠標點一下才會觸發（至關於選擇你這個程序開始輸入鍵盤的值了）
//onkeydown onkeyup onkeypress
// onkeydown 鍵盤按下去就會觸發,而且不鬆開的話會一直觸發
// onkeyup 鍵盤松開就會觸發
// onkeypress 也是鍵盤按下去就會觸發，可是不鬆開的話只會觸發一次
// ev 裏面重要的幾個參數，也有altKey ctrlKey altKey
// 還有一個keyCode  表示的是每一個鍵的鍵盤編碼
document.onkeypress = function (ev) {
    console.log(ev);
};
document.onkeydown = function (ev) {
    console.log(1111111,ev);
};

鍵盤事件

表單事件　

`
表單事件 onchange oninput
onchange：當input輸入框失去焦點時才觸發綁定的函數
oninput：內容改變就會觸發綁定的函數
`;
let t = document.querySelector('.t1');  // 獲取須要綁定事件的標籤
let h = document.querySelector('.h1');  // 獲取要操做的標籤
t.oninput = function () {
    h.innerText = this.value;   // 把h標籤的內容改爲輸入的內容
};

表單事件