javascript

javascript 瀏覽器腳本語言
1) 基本數據類型：數字，字符串， 布爾值， null， undefined
2) 複雜數據類型：
數組
var array = new Array();
var array = [1,2,3,4];
訪問元素 array[下標]
for(var i = 0; i < array.length; i++) {
array[i]
}
.push(值); .pop();
.unshift(值); .shift();
.splice(下標, 個數);
.sort(); // 對數組進行排序，但會把元素視爲字符串類型
.sort( (a,b)=>{ a - b } );

對象
var obj = new Object();
var obj = {name:"值", age:17};
obj.sex = "男";
delete obj.sex;

函數
function 函數名(形參名1, 形參名2, ... 形參名n) {
return
}

函數名(實參1, ... 實參 n)

js中函數沒有重載特性，同名函數只能有一個，後定義的會覆蓋前面定義的

日期
var date = new Date();
var date = new Date(毫秒值);
.getFullYear();
.getMonth();
..

正則表達式
var reg = /正則表達式/;

[0-9] [a-zA-Z]
? , +, *, {m,n}

reg.test("目標字符串"); // true, false

字符串對象.replace(reg , "替換內容");

3) html網頁中使用js
<script>
js代碼
</script>
F12 控制檯窗口

1.js配合html實現網頁編程

DOM API (用js來操作html的一套api)
document 文檔 Object 對象 Model 模型
可以把整個html視爲一個樹狀結構，html中的每個標籤都是樹上的一個節點
document
|- html
|-head
|-meta
|-title
|-style
|-script
|-body
|-p
|-form
|-table
|-ul

1.1 查找元素

document.getElementById(標籤id值); // 在設計id時要避免重複，id的取值應當唯一
document.getElementsByTagName(標籤名字); // 根據標籤的名字查找多個元素
父元素.getElementsByTagName(標籤名字); // 查找從屬於此父元素的所有與標籤名稱符合的子標籤, 縮小了查找範圍

通過選擇器語法進行查找
#id， .class值, 元素

document.querySelector("選擇器"); // 查找與選擇器匹配的標籤， 匹配第一個
document.querySelectorAll("選擇器"); // 查找與選擇器匹配的標籤, 匹配所有

1.2 修改

修改內容
.innerText 在賦值時，把字符串當做普通文本處理，如果字符串中包含了html標籤，那麼這些標籤會照原樣輸出
.innerHTML 在賦值時，把字符串當做html代碼處理，會解析html標籤再顯示
修改屬性
.屬性名 = "新值";
修改樣式
.className="新class" // 對應訪問class屬性 (推薦使用class屬性修改樣式)
.style.具體樣式名="新值"; // 注意style 優先級較高，會覆蓋其它樣式

1.3 刪除

父元素.removeChild(子元素);

1.4 新增

父元素.appendChild(子元素); // 建立父子元素關係
document.createElement("標籤"); // 創建新的標籤元素

2. DOM事件

2. 事件類型

鼠標單擊事件 onclick
鼠標雙擊事件 ondblclick
鼠標移入事件 onmouseover
鼠標移出事件 onmouseout
光標移入事件(獲得焦點) onfocus
失去焦點事件 onblur
值改變事件 onchange
鍵盤 onkeydown 按下按鍵時
onkeypress 按下按鍵時
onkeyup 鬆開按鍵時