JavaScript（JS）（一）
阿新 • • 發佈：2018-12-30
基礎知識
- JavaScript和Java沒有任何關係，最多語法看起來有點像
- JavaScript原名ivescript，是一門動態型別，弱型別基於原型的指令碼語言
- 和HTML複合使用，不能單獨使用
JavaScript作用：
- 頁面特效
- 前後互動
- 後臺開發（node）
JavaScript寫在哪裡
script標籤裡
1. <head> <meta charset="UTF-8"> <title>try</title> <script> alert("wer"); </script> </head> <body> <div> <input type="button" value="點我" onclick="alert('bug')"> </div> 2. <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div> <input type="button" value="點我" onclick="alert('bug')"> </div> <script> alert("wer"); </script>
外部的js檔案內，然後引入
<head>
<meta charset="UTF-8">
<title>try</title>
<script src="js/a.js"></script>
</head>
<body>
<div>
<input type="button" value="點我" onclick="alert('bug')">
</div>
a.js:
alert("wer");
JS一些注意事項
- 嚴格區分大小寫
- 每一行完整語句後面加分號
- 變數名不能使用關鍵字和保留字
- 程式碼要縮排，保持可讀性
- 註釋用//
JS修改元素內容
- 首先獲取id為xxx的元素 document.getElementByld(" ");
- var 是js定義變數的關鍵字,建立（宣告變數），如果不加為全域性變數
- innerHTML和innerText可以修改/獲取
JS獲取元素
- 通過id獲取元素:id - document.getElementById(" "); - 通過class名字獲取元素:class - document getElementsByClassName(" "); - 通過標籤名獲取元素:tagName - document.getElementsByTagName(" "); - 通過name的屬性獲取元素，一般用於input:name - document.getElementsByTagName(" "); - 通過css選擇器獲取一個 - document.querySelector(" "); - 通過css選擇器獲取所有 - document.querySelectorAll(" "); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div id="div1"> <input type="button" value="點我" onclick="alert('bug')"> <p id="p1">我是一句話</p> <span class="s1">我也是一句話1</span> <span class="s1">我也是一句話2</span> <span>我也是一句話3</span> </div> <div> <p name="xg">p1</p> <span name="xg">我也是一句話4</span> <span>我也是一句話5</span> <span>我也是一句話6</span> </div> <script type="text/javascript"> alert("werfd"); // 通過ｉｄ獲取元素 var a = document.getElementById("p1"); a.onclick = function () { alert("通過ｉｄ"); } // 通過標籤名獲取元素 var b = document.getElementsByTagName("span")[0]; b.onclick = function () { alert("通過標籤名"); } // 通過ｃｌａｓｓ獲取元素 var c = document.getElementsByClassName("s1")[1]; c.onclick = function () { alert("通過class") } // 通過name屬性獲取元素 var d = document.getElementsByName("xg")[1]; d.onclick = function () { alert("通過ｎａｍｅ") } // 通過class選擇器獲取 var e = document.querySelector("span"); #此處也可以索引 e.onclick = function () { alert("ｃｌａｓｓ選擇器選一個") } var f = document.querySelectorAll("#div1 span"); #此處也可以索引 #此時獲取的是ｉｄ為ｄｉｖ１下的所有的ｓｐａｎ標籤 console.log(f); ＃ｃｏｎｓｏｌｅ：控制檯 f.onclick = function () { alert("3245") } </script> </body> </html>
簡單事件()
JS的基礎事件
- 單擊事件：onclick
- 雙擊事件:ondblclick
- 滑鼠劃入:onmouseenter
- 滑鼠劃出:onmouseleave
- 視窗變化:onresize
window.onresize = function () {
alert("3245")
}
- 改變下拉框:onchange
操作標籤屬性
1.合法屬性的增刪改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div>
<p id="p1" class="s1">我是一句話</p>
</div>
<script type="text/javascript">
var a = document.getElementById("p1");
// 增/改：無則增，有則改
a.className="hahaha";
// 查
console.log(a.className);
// 刪除
a.removeAttribute("class");
console.log(a);
</script>
</body>
</html>
２．自定義屬性的增刪改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<di
<p id="p1" class="s1">我是一句話</p>
</div>
<script type="text/javascript">
var a = document.getElementById("p1");
// 增/改 無則增，有則改
a.setAttribute("age","m");
// 查，查到返回ｔｒｕｅ，沒查到返回ｆａｌｓｅ
console.log(a.hasAttribute("age"));
// 刪除
a.removeAttribute("age");
console.log(a);
</script>
</body>
</html>
ＪＳ修改樣式
Obj.style[變數]=變數值
1.
我是一句話
# 資料型別 ## JS的資料型別 五種基本型別＋ｏｂｊｅｃｔ（複雜型） - 字串：string，要用引號 var a = "123"; console.log(typeof a); - 數字:number var a = 123; console.log(typeof a); - 布林:boolean var a = true; console.log(typeof a); - 未定義:undefined var a ; console.log(typeof a); - 空:null var a = null; #object console.log(typeof a); - 物件:object（複雜型） null型別進行typeof操作符後，結果是object，原因在於null型別被當做一個空物件引用練習
屬性名：
屬性值：
我就是我
