初識JavaScript
- JavaScript 一種腳本語言，是一種動態類型、弱類型（弱類型可以自動轉換，不需要手工。動態類型python可以做任何類型的變量）
- JavaScript通常用來操作HTML頁面的
- html骨架(頁面結構)，css是樣式(元素大小、顏色、位置、隱藏或顯示等)，js是行為(部分動畫效果、頁面與用戶交互等)
js代碼位置
JavaScript代碼可以寫在頁面的script標簽里面，或者單獨的js文件里面，或者標簽屬性里面（不推薦）
- 寫在頁面的script標簽里面
<script>
alert(2);//彈窗 用來調試代碼
console.log(888);//打印到控制臺 用來調試代碼
</script>
- 寫在外部.js后綴文件里面，通過script標簽引入
<script src="5-js02.js">/*引入外部js文件*/</script>
# 注意：在引入js文件的script標簽里面，一定不能再寫js代碼
#外部js文件5-js02.js
alert("我是外部6-js02.js文件");
script標簽的位置：
- 一般script標簽會被放在頭部或尾部。頭部就是<head>里面，尾部一般指<body>里。不同位置要注意加載順序，如果沒有什么特殊要求，通常放在body 結束之前。
- 如果script里面涉及到操作后面的元素，而script又非得放在前面的話，需要加上window.onload（一個頁面中只能出現一次window.onload）
<head>
<meta charset="UTF-8">
<title>初識JavaScript</title>
<script>
alert("script寫在head里面");
//如果script里面涉及到操作后面的元素，而又非得把script放在前面的話，需要加上window.onload：
window.onload = function(){
alert("我是加上window.onload里面的"); //這里再寫代碼（意思是：當整個頁面加載完成之后，再執行這里的代碼）
}//一個頁面中只能出現一次window.onload
</script>
</head>
html文件是自上而下的執行方式，但引入的css和javascript的順序有所不同，css引入執行加載時，程序仍然往下執行，而執行到<script>腳本是則中斷線程，待該script腳本執行結束之后程序才繼續往下執行。所以，一般將script放在body之后是因為避免長時間執行script腳本而延遲阻塞。而有一些頁面的效果的實現，是需要預先動態的加載一些js腳本，所以這些腳本應該放在<body>之前。其次，不能將需要訪問dom元素的js放在body之前，因為此時還沒有開始生成dom，所以在body之前的訪問dom元素的js會出錯，或者無效。就是因為這個，在dom沒生成好時我就給它添加了方法，才導致這樣。
寫js代碼需要注意什么？
- 注釋里面是沒有要求的
- 嚴格區分大小寫
- 語句字符都是半角字符（字符串里面可以使用任意字符）
- 某些完整語句后面要寫分號
- 代碼要縮進，縮進要對齊
- 引號里面代表字符串，字符串是沒有代碼的功能的，所以不需要滿足上述要求。
注釋
- 多行注釋 /* */
- 單行注釋 //
js里的系統彈窗代碼
alert("內容");
js里的打印
console.log(1);
js獲取元素及修改內容
其實，要操作頁面，就是操作標簽，JS要操作標簽，就要先獲取標簽
獨有標簽的獲取：
document.title document.title
document.body document.body.innerHTML(會解析標簽)
document.body.innerText(不會會解析標簽)
document.head document.head.innerHTML
其他標簽的獲取
- 通過id獲取元素，document.getElementById("box");
//獲取的是確切的某個元素，可以直接操作這個元素
var oBox = document.getElementById('box');
console.log(oBox)
oBox.innerHTML +="我是通過id獲取來改變的"
- 通過class獲取getElementsByClassName()（不兼容IE8及以下）
#獲取的是一堆元素的集合，設置操作的時候要通過下標（索引、序號）拿到對應的某一個
var oBox = document.getElementsByClassName("box");
console.log(oBox);
console.log(oBox.length);//長度
oBox[0].innerHTML += "我是通過ClassName獲取來改變的"; //即便長度為1也要用索引
- 通過標簽名獲取，getElementsByTagName()
var oP = document.getElementsByTagName("p");
console.log(oP.length);
oP[1].innerHTML += "我我我";
- 通過選擇器的寫法獲取元素：（不兼容IE7及以下）
.querySelector();
.querySelectorAll();
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。
//獲取第一個對應的元素
var oI = document.querySelector("#box1");
oI.innerHTML +="ahhh"; //獲取是第一個元素，只是一個而已，不需要用索引引用
var oI2 = document.querySelectorAll("#box1");
console.log(oI2.length); //2;
oI2[1].innerHTML +="哈哈";
- 通過name獲取
.getElementsByName(); #可返回帶有指定名稱的對象的集合。
注意： 除了ID獲取前面必須是document之外，其他的方式，前面可以是某個元素，但不能是集合。
<script>
//注意： 除了ID獲取前面必須是document之外，其他的方式，前面可以是某個元素（不能是集合)
var oP = document.getElementsByTagName("p");
console.log(oP);
var oBox = document.getElementById("box");
console.log(oBox);
var oP1 = oBox.getElementsByTagName("p");//獲取box下的元素
console.log(oP1);
</script>
元素內容修改
- 修改頁面title信息
document.title = "我要把標題改成666";
- 修改別的標簽的內容，得用innerHTML或者innerText
innerHTML 可以識別標簽
innerText 不能識別標簽
- 獲取某個確切的元素,可以直接操作這個元素
document.getElementById("box").innerHTML = "吃驚！";
- 獲取的是一堆元素的集合，設置操作時要通過下標（索引、序號）拿到對應的某一個再用
document.getElementsByClassName("box")[0].innerHTML = "美女";
- 對于form元素獲取值
var text = document.getElementsByTagName("textarea");
console.log(text.value);
- document.write()
在文檔流關閉之前，給body部分新增內容,在文檔流關閉之后，修改整個HTML的內容。
<script>
/*
document.write()
在文檔流關閉之前，給body部分新增內容
在文檔流關閉之后，修改整個html的內容
*/
document.write("<em>在文檔流關閉之前，給body部分新增內容</em>");
window.onload = function () {
document.write("<em>在文檔流關閉之后，修改整個html的內容</em>"); //文檔流關閉可以理解為body結束
}
</script>
事件
- 用戶的操作 元素.事件 = 函數；
- 鼠標事件
onclick 左鍵單擊
ondblclick 左鍵雙擊
onmouseenter 鼠標移入
onmouseleave 鼠標移出
<body>
<div>hahah</div>
<script>
/*
所謂事件，是指 JavaScript 捕獲到用戶的操作，并做出正確的響應。
在事件函數里面，有一個關鍵字this，代表當前觸發事件的這個元素
事件：用戶的操作
元素.事件 = 函數；
鼠標事件：
左鍵單擊 onclick
左鍵雙擊 ondblclick
鼠標移入 onmouseover/ onmouseenter ***
鼠標移出 onmouseout/ onmouseleave ***
*/
var oBox = document.getElementsByTagName("div");
oBox[0].onclick = function () {
console.log("我被點擊了");
this.innerHTML = "我被點擊了";
};
oBox[0].onmouseenter = function(){
console.log("我被移入了");
this.innerHTML = "我被移入了";
};
oBox[0].onmouseleave = function() {
console.log("我被移出了");
this.innerHTML = "我被移出了";
};
</script>
</body>
js操作元素的標簽屬性
- 規范的標簽屬性：
. 符號直接操作(可讀可寫) - 不規范（自定義）的標簽屬性：
- 獲取 getAttribute
- 設置 setAttribute
- 移除 removeAttribute
<body>
<a href="5-js事件05.html" id="box" class="box" target="_blank" tz="llp182">百度下</a>
<script>
/*
js操作元素的標簽屬性：
規范的標簽屬性：
. 符號直接操作（可讀可寫）
不規范（自定義）的標簽屬性：
獲取：.getAttribute
設置：.setAttribute
移除：.removeAttribute
注意：
所有的 路徑、顏色 獲取的結果不一定是你寫的內容
通過id獲取的元素賦值給變量后，假設修改了id，這個變量還是表示這個元素
自定義標簽屬性的操作方式，同樣可以操作符合規范的標簽屬性
*/
var oA = document.getElementById("box");
// alert(oA.id); //可讀
// alert(oA.target);
// alert(oA.className); //class屬性 要用className
// alert(oA.tz); //undefined 自定義標簽直接.獲取不到
oA.id = "wrap";
oA.target = "_self"; //可寫
oA.className = "";
alert(oA.getAttribute("id"));
alert(oA.getAttribute("tz"));
oA.setAttribute("tz","py");
oA.setAttribute("web","pc");
oA.removeAttribute("target"); //自定義標簽屬性的操作方式，同樣可以操作符合規范的標簽屬性
oA.removeAttribute("class");
alert(oA.href);
/*添加，刪除類名，也可一次性添加多個*/
sliderLi[index].classList.add("show");
sliderLi[index].classList.add("show","show1","show2");
cycleLi[index].classList.remove("on");
cycleLi[index].classList.remove("on","on1","on2");
</script>
</body>
注意：所有的 路徑/顏色 獲取的結果不一定就是你寫的內容
通過ID獲取的元素賦值給變量后，假設修改了ID，這個變量還是表示這個元素
自定義標簽屬性的操作方式，同樣可以操作符合規范的標簽屬性
控制元素的樣式
- 行內樣式標簽屬性：大部分情況下，js都是通過操作行內樣式達到修改樣式的目的， 當我需要單個屬性去修改的時候,我們一般都是直接 . 操作去修改元素的行內樣式
- 操作復合屬性時，要注意用駝峰寫法（去掉-號，-號后面的第一個單詞大寫）
<body>
<div id="box" class="box"></div>
<script>
//行內樣式標簽屬性：大部分情況下，js都是通過行內樣式來達到修改樣式的目的
// <div id="box" class="box" style="width: 100px;height: 100px;background: red;"> 類似用js操作這種形式；
//當我們需要修改單個屬性的時候，我們一般都是直接.操作去修改元素的行內樣式
var oBox = document.getElementById("box")
// oBox.style.width = "300px";
// oBox.style.height = "300px"
// oBox.style.background = "red";
//樣式一多，代碼就很多；而且通過JS來覆寫對象的樣式是比較典型的一種銷毀原樣式并重建的過程，這種銷毀和重建，都會增加瀏覽器的開銷。
oBox.style.cssText = "width:200px;height:200px;background:red"; //cssText 的本質就是設置 HTML 元素的 style 屬性值。這樣會有一個問題，會把原有的cssText清掉，比如原來的style中有’display:none;’，那么執行完上面的JS后，display就被刪掉了。
//可以利用累加，在前面添加一個分號（同樣屬性利用后來居上覆蓋）來解決這個問題
oBox.style.cssText += ";width:200px;height:200px;background:red";
// 操作復合屬性時，要注意用駝峰寫法（去掉-號，-號后面的第一個單詞大寫）
oBox.style.marginLeft = "10px"; //margin-left
oBox.style["margin-top"] = "50px";
</script>
</body>
案例
-
需求：
①打開時
image.png
②點擊時
image.png
image.png 代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業6</title>
<style>
div{
width: 200px;
height: 50px;
background: yellow;
border-radius:20px 20px 20px 20px;/*左上角，右上角，右下角，左下角*/
margin: 50px auto; /*上下50px 左右auto*/
text-align: center; /*水平居中*/
line-height: 50px; /*行高使字垂直居中*/
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
var oDiv = document.getElementsByTagName("div");
oDiv[0].onclick = function(){
this.innerHTML = "我被點擊了";
this.style.color = "red";
oDiv[1].innerHTML = "老大被點擊了";
oDiv[1].style.color = "blue";
oDiv[2].innerHTML = "老大被點擊了+1";
oDiv[2].style.color = "blue";
};
oDiv[2].onclick = function(){
this.innerHTML = "我被點擊了";
this.style.color = "red";
oDiv[0].innerHTML = "小弟被點擊了";
oDiv[0].style.color = "blue";
oDiv[1].innerHTML = "小弟被點擊了+1";
oDiv[1].style.color = "blue";
oDiv[3].innerHTML = "<a ;
};
</script>
</body>
</html>
