js的頁面交互

與html標簽建立關系

//獲取標簽，js如何與html標簽建立聯系  兩種方式
//1、
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);
//2、同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標簽的內容改成輸入的內容
};