基本使用 寫在Script 標簽里 引入外部js文件:\ console.log(" ") 方法用於在控制台輸出信息 註意事項 嚴格區大小寫 每一行完整語句後面加分號 變數名不能使用關鍵字和保留字 代碼要縮進,保持可讀性 修改元素內容 獲取元素 通過id獲取元素:document.getElemen ...
基本使用
- 寫在Script 標簽里
- 引入外部js文件:<script src=" "></script>
- console.log(" ") 方法用於在控制台輸出信息
註意事項
- 嚴格區大小寫
- 每一行完整語句後面加分號
- 變數名不能使用關鍵字和保留字
- 代碼要縮進,保持可讀性
修改元素內容
- 獲取元素
- 通過id獲取元素:document.getElementById(“”);
- 通過class名字獲取元素:document.getElementsByClassName(“”);
- 通過標簽名獲取元素:document.getElementsByTagName(“”);
- 通過 name的屬性獲取元素,一般用於input:document.getElementsByName(“”);
- 通過CSS選擇器獲取一個:document.querySelector (“”);
- 通過CSS選擇器獲取所有:document.querySelectorAll(“”);
- 修改元素內容
- var 是 js 定義變數的關鍵字:var content = document.get....
- innerHTML 和 innerText 可以修改/獲取(HTML內容和文本內容):content.innerHTML="<h1>標題</h1>"
簡單事件
- 單擊事件:onclick
- 雙擊事件:ondblclick
- 滑鼠劃入:onmouseenter
- 滑鼠划出:onmouseleave
- 視窗變化時:onresize
- 改變下拉框時:onchange
修改樣式(通過js修改css)
- 獲取元素:var box = document.getElementById("div1");
- 方法一:box.style.border="1px red solid";
- 方法二:box.style["border"]="1px red solid";
操作標簽屬性
- 自帶屬性
- box.className="d1";
- 自定義屬性
- 設置屬性: box.setAttribute('aaa','bbb');
- 刪除屬性:box.removeAttribute("class");
- 判斷是否存在屬性:box.hasAttribute("aaa")
數據類型
- 字元串:string
- 數字:number
- 布爾:boolean
- 未定義:undefined
- 空:null
- 對象:object
- 查看數據類型:typeof 變數名