一、JavaScript 和 html 代碼的結合方式
1. 第一種方式
只需要在 head 標簽中，或者在 body 標簽中， 使用 script 標簽 來書寫 JavaScript 代碼
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// alert 是 JavaScript 語 言 提 供 的 一 個 警 告 框 函 數 ，
// 它 可 以 接 收 任 意 類 型 的 參 數 ， 這 個 參 數 就 是 警 告 框 的 提 示 信 息 alert("hello javaScript!");
</script>
</head>
<body>
</body>
</html>
2. 第二種方式
使用 script 標簽引入 單獨的 JavaScript 代碼檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!- 現在需要使用 script 引入外部的 js 檔案來執行 src 屬性專門用來引入 js 檔案路徑（可以是相對路徑，也可以是絕對路徑）
script 標簽可以用來定義 js 代碼，也可以用來引入 js 檔案 但是，兩個功能二選一使用，不能同時使用兩個功能
--> <script type="text/javascript" src="https://www.cnblogs.com/mengd/p/1.js">
</script>
<script type="text/javascript">
alert("國哥現在可以帥了");
</script> </head> <body>
</body>
</html>
二、變數
什么是變數？變數是可以存放某些值的記憶體的命名，
JavaScript 的變數型別：
- 數值型別： number
- 字串型別： string
- 物件型別： object
- 布爾型別： boolean
- 函式型別： function
JavaScript 里特殊的值： undefined 未定義，所有 js 變數未賦于初始值的時候，默認值都是 undefined. null 空值 NaN 全稱是：NotaNumber，非數字，非數值
JS 中的定義變數格式： var 變數名; var 變數名 = 值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
// alert(i);
// undefined i = 12;
// typeof() 是 JavaScript 語 言 提 供 的 一 個 函 數 ，
// alert( typeof(i) ); // number
i = "abc";
// 它 可 以 取 變 量 的 數 據 類 型 返 回 // alert( typeof(i) );
// String
var a = 12; var b = "abc";
alert( a * b ); // NaN是 非 數 字 ， 非 數 值 ，
</script>
</head>
<body>
</body>
</html>
三、常見運算
1. 關系（比較）運算
- 等于： == 等于是簡單的做字面值的比較
- 全等于： === 除了做字面值的比較之外，還會比較兩個變數的資料型別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
</script> </head> <body>
</body> </html>
2. 邏輯運算
- 且運算： &&、
- 或運算：|| 、
- 取反運算： !
在 JavaScript 語言中，所有的變數，都可以做為一個 boolean 型別的變數去使用，
0 、null、 undefined、””(空串) 都認為是 false；
注意：
- && 且運算， 有兩種情況： 第一種：當運算式全為真的時候，回傳最后一個運算式的值， 第二種：當運算式中，有一個為假的時候，回傳第一個為假的運算式的值
- || 或運算 第一種情況：當運算式全為假時，回傳最后一個運算式的值 第二種情況：只要有一個運算式為真，就會把回第一個為真的運算式的值
- 并且 && 與運算 和 ||或運算 有短路， 短路就是說，當這個&&或||運算有結果了之后 ，后面的運算式不再執行 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = 0;
if (a) {
alert(" 零 為 真 ");
} else {
alert(" 零 為 假 ");
}
var b = null;
if (b) {
alert("null為 真 ");
} else {
alert("null為 假 ");
}
var c = undefined;
if (c) {
alert("undefined為 真 ");
} else {
alert("undefined為 假 ");
}
var d = "";
if (d) {
alert(" 空 串 為 真 ");
} else {
alert(" 空 串 為 假 ");
}
var a = "abc";
var b = true;
var d = false;
var c = null;
alert( a && b );//true
alert( b && a );//true
alert( a && d ); // false
alert( a && c ); // null
alert( d || c ); // null
alert( c|| d ); //false
alert( a || c ); //abc
alert( b || c ); //true
</script>
</head>
<body>
</body>
</html>
四、陣列
1. 陣列定義方式
- var 陣列名 =[]; //空陣列
- var 陣列名 =[1,’abc’,true]; // 定義陣列同時賦值元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [true,1]; //定 義 數 組
// alert( arr.length ); // 2
arr[0] = 12;
// alert( arr[0] );//12
// javaScript語 言 中 的 數 組 ， 只 要 我 們 通 過 數 組 下 標 賦 值 ， 那 么 最 大 的 下 標 值 ， 就 會 自 動 的 給 數 組 做 擴 容 操 作 ，
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 數 組 的 遍 歷
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</script> </head>
<body>
</body> </html>
五、函式
函式的二種定義方式
1. 第一種定義方式
可以使用 function 關鍵字來定義函式
function 函式名(形參串列){
函式體
}
在 JavaScript 語言中，如何定義帶有回傳值的函式？ 只需要在函式體內直接使用 return 陳述句回傳值即可！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 定 義 一 個 無 參 函 數
function fun(){
alert("無參函式 fun()被呼叫了");
}
// 函 數 調 用 === 才 會 執 行
fun();
function fun2(a ,b) {
alert("有參函式 fun2()被呼叫了 a=>" + a + ",b=>"+b);
}
fun2(12,"abc");
//定 義 帶 有 返 回 值 的 函 數
function sum(num1,num2) {
var result = num1 + num2;
return result;
}
alert( sum(100,50) );
</script> </head> <body>
</body> </html>
2. 第二種定義方式
var 函式名 =function(形參串列){
函式體
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun = function () {
alert("無參函式");
}
fun();
var fun2 = function (a,b) {
alert("有參函式 a=" + a + ",b=" + b);
}
fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</script>
</head>
<body>
</body>
</html>
注意：在 Java 中函式允許多載，但是在 JS 中函式的多載會直接覆寫掉上一次的定義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun() {
alert("無參函式 fun()");
}
function fun(a,b) {
alert("有參函式 fun(a,b)");
}
fun();
</script>
</head>
<body>
</body>
</html>
3. 函式的 arguments 隱形引數
只在 function 函式內,就是在 function 函式中不需要定義，但卻可以直接用來獲取所有引數的變數，我們管它叫隱形引數
隱形引數特別像 java 基礎的可變長引數一樣，
public void fun(Object...args); ,可變長引數其他是一個陣列
那么 js 中的隱形引數也跟 java 的可變長引數一樣,操作類似陣列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun(a) {
alert( arguments.length );// 可 看 參 數 個 數
alert( arguments[0] );
alert( arguments[1] );
alert( arguments[2] );
alert("a = " + a);
for (var i = 0; i < arguments.length; i++){
alert( arguments[i] );
}
alert("無參函式 fun()");
}
fun(1,"ad",true);
//需 求 ： 要 求 編 寫 一 個 函 數 ， 用 于 計 算 所 有 參 數 相 加 的 和 并 返 回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i]; }
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
</script>
</head>
<body>
</body>
</html>
六、JS 中的自定義物件
1. Object 形式的自定義物件
物件的定義：
? var 變數名 =newObject(); // 物件實體（空物件）
? 變數名.屬性名 = 值; // 定義一個屬性
變數名.函式名 =function(){} // 定義一個函式
物件的訪問：
? 變數名.屬性 / 函式名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "馬達";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + " , 年齡：" + this.age);
}
// 物件的訪問
// alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>
2. {}花括號形式的自定義物件
物件的定義：
? var 變數名 ={ // 空物件
? 屬性名：值, // 定義一個屬性
? 屬性名：值, // 定義一個屬性
? 函式名：function(){} // 定義一個函式
};
物件的訪問：
? 變數名.屬性 / 函式名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = {
name: "馬達",
age: 18,
fun: function () {
alert("姓名：" + this.name + " , 年齡：" + this.age);
}
};
// alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>
七、JS中的事件
什么是事件？事件是電腦輸入設備與頁面進行互動的回應，稱之為事件
1. 常用的事件
- onload 加載完成事件： 頁面加載完成之后，常用于做頁面 js 代碼初始化操作
- onclick 單擊事件： 常用于按鈕的點擊回應操作
- onblur失去焦點事件： 常用用于輸入框失去焦點后驗證其輸入內容是否合法
- onchange內容發生改變事件： 常用于下拉串列和輸入框內容發生改變后操作
- onsubmit 表單提交事件： 常用于表單提交前，驗證所有表單項是否合法
事件的注冊又分為靜態注冊和動態注冊兩種
什么是事件的注冊（系結）？
其實就是告訴瀏覽器，當事件回應后要執行哪些操作代碼，叫事件注冊或事件系結，
2. 靜態注冊事件
通過 html 標簽的事件屬性直接賦于事件回應后的代碼，這種方式我們叫靜態注冊
3. 動態注冊事件
是指先通過 js 代碼得到標簽的 dom 物件，然后再通過 dom物件.事件名 =function(){} 這種形式賦于事件
回應后的代碼，叫動態注冊
動態注冊基本步驟：
- 獲取標簽物件
- 標簽物件.事件名 =fucntion(){}
4. onl oad 加載完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// function onl oadFun() {
// alert("靜態注冊onload事件");
// }
// 這個是動態注冊，固定的寫法
window.onload = function () {
alert("動態注冊onload事件");
}
</script>
</head>
<!--靜態注冊onload事件，這個事件是在瀏覽器決議完頁面之后自動觸發的事件，里面自定義的函式
<body onl oad="onLoadFun()">
-->
</body>
</html>
5. onclick 單擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// function onclickFun() {
// alert("靜態注冊onclick事件");
// }
// 動態注冊
window.onload = function () {
// 1. 獲取標簽物件
// document是JS語言提供的一個物件
// 通過屬性的id來獲取標簽物件
var b = document.getElementById("b01");
// alert(b);
// 2. 通過標簽物件.事件名 = function (){}
b.onclick = function () {
alert("動態注冊onclick事件");
}
}
</script>
</head>
<body>
<!-- 靜態注冊onclick-->
<button onclick="onclickFun();">按鈕1</button>
<button id="b01">按鈕2</button>
</body>
</html>
6. onblur失去焦點事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 靜 態 注 冊 失 去 焦 點 事 件
function onblurFun() {
// console 是 控 制 臺 對 象 ， 是 由 JavaScript語 言 提 供 ， 專 門 用 來 向 瀏 覽 器 的 控 制 器 打 印 輸 出 ， 用 于 測 試 使 用
// log()
console.log("靜態注冊失去焦點事件");
}
// 動態注冊
window.onload = function () {
//1 獲 取 標 簽 對 象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
// 2 通 過 標 簽 對 象 . 事 件 名 = function(){};
passwordObj.onblur = function () {
console.log("動態注冊失去焦點事件");
}
}
</script>
</head>
<body>
用戶名:<input type="text" onblur="onblurFun();"><br/>
密碼:<input id="password" type="text"><br/>
</body>
</html>
7. onchange內容發生改變事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("電影改變");
}
window.onload = function () {
var sObj = document.getElementById("s01");
sObj.onchange = function () {
alert("書籍已經改變");
}
}
</script>
</head>
<body>
<!--靜態注冊事件-->
請選擇你喜歡看的電影
<select onchange="onchangeFun();">
<option>--電影--</option>
<option>盜墓筆記</option>
<option>黑客帝國</option>
<option>千與千尋</option>
</select>
<br>
請選擇你喜歡看的書籍
<select id="s01">
<option>--書籍--</option>
<option>平凡的世界</option>
<option>小王子</option>
<option>解憂雜貨店</option>
</select>
</body>
</html>
8. onsubmit 表單提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 靜態注冊表單提交事務
function onsubmitFun() {
alert("提交不合法");
return false;
}
// 動態注冊表單提交事務
window.onload = function () {
var formObj = document.getElementById("form01");
formObj.onsubmit = function () {
alert("動態注冊提交不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可 以 阻 止 表 單 提 交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="https://www.cnblogs.com/mengd/p/靜態注冊"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="https://www.cnblogs.com/mengd/p/動態注冊"/>
</form>
</body>
</html>
八、DOM模型
DOM 全稱是 DocumentObjectModel 檔案物件模型
就是把檔案中的標簽，屬性，文本，轉換成為物件來管理， 那么 它們是如何實作把標簽，屬性，文本轉換成為物件來管理呢
1. Document 物件
Document 物件的理解：
- Document 它管理了所有的 HTML 檔案內容
- document 它是一種樹結構的檔案，有層級關系
- 它讓我們把所有的標簽 都 物件化
- 我們可以通過 document 訪問所有的標簽物件
2. Document 物件中的方法介紹
- document.getElementById(elementId) 通過標簽的 id 屬性查找標簽 dom 物件，elementId 是標簽的 id 屬性值
- document.getElementsByName(elementName) 通過標簽的 name 屬性查找標簽 dom 物件，elementName 標簽的 name 屬性值
- document.getElementsByTagName(tagname) 通過標簽名查找標簽 dom 物件，tagname 是標簽名
- document.createElement( tagName) 方法，通過給定的標簽名，創建一個標簽物件，tagName 是要創建的標簽名
注意：
document 物件的三個查詢方法，如果有 id 屬性，
優先使用 getElementById 方法來進行查詢 如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢 如果 id 屬性和 name 屬性都沒有最后再按標簽名查 getElementsByTagName
以上三個方法，一定要在頁面加載完成之后執行，才能查詢到標簽物件
3. getElementById 方法
需 求 ： 當用戶點擊了校驗按 鈕 ， 要 獲 取 輸 出 框 中 的 內 容 ， 然 后 驗 證 其 是 否 合 法 ，
驗 證 的 規 則 是 ： 必 須 由 字 母、數 字、下 劃 線 組 成 ， 并 且 長 度 是 5 到 12 位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onClick() {
// 1 當我們要 操 作 一 個 標 簽 的 時 候 ， 一 定 要 先 獲 取 這 個 標 簽 對 象 ，
var usernameObj = document.getElementById("username");
// [object HTMLInputElement] 就是dom物件
var usernameText = usernameObj.value;
//如 何 驗 證 字 符 串 ， 符 合 某 個 規 則 ， 需 要 使 用 正 則 表 達 式 技 術
var patt = /^\w{5,12}$/;
/*
test() 方 法 用 于 測 試 某 個 字 符 串 ， 是 不 是 匹 配 我 的 規 則 ，
匹配就回傳true，否則回傳false
*/
var usernameSpanObj = document.getElementById("usernameSpan");
// innerHTML表 示 起 始 標 簽 和 結 束 標 簽 中 的 內 容
// innerHTML 這個屬性可讀，可寫
usernameSpanObj.innerHTML = "你好！";
if (patt.test(usernameText)) {
alert("用戶名合法");
usernameSpanObj.innerHTML = "用戶名合法！";
}else{
alert("用戶名不合法");
usernameSpanObj.innerHTML = "用戶名不合法！";
}
}
</script>
</head>
<body>
用戶名：<input type="text" id="username" value="https://www.cnblogs.com/mengd/p/md">
<span id="usernameSpan" style="color: red;">
</span>
<button onclick="onClick()">校驗</button>
</body>
</html>
4. getElementsByName 方法
讓 所 有 復 選 框 都 選 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
// document.getElementsByName("hobby"),是根據指定的name來查詢回傳多個標簽物件集合
// 這個集合的操作和陣列一樣，集合中每個元素都是dom物件
// 這個集合中元素的順序是按照html頁面的上下順序
var hobbies = document.getElementsByName("hobby");
// checked表示復選框的選中狀態，選中是true
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
// 全不選
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
}
// 反選
// 這里用的取反操作
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" name="hobby" value="https://www.cnblogs.com/mengd/p/c" checked="checked"> C
<input type="checkbox" name="hobby" value="https://www.cnblogs.com/mengd/p/java"> Java
<input type="checkbox" name="hobby" value="https://www.cnblogs.com/mengd/p/python"> Python
<br>
<button onclick="checkAll()">全選</button>
<button onclick="checkNo()">全部選</button>
<button onclick="checkReverse()">反選</button>
</body>
</html>
5. getElementsByTagName 方法
也是全選操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
// document.getElementsByTagName("input"),
// 是根據指定標簽名來查詢回傳多個標簽物件集合
// 這個集合的操作和陣列一樣，集合中每個元素都是dom物件
// 這個集合中元素的順序是按照html頁面的上下順序
var hobbies = document.getElementsByTagName("input");
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" name="hobby" value="https://www.cnblogs.com/mengd/p/c" checked="checked"> C
<input type="checkbox" name="hobby" value="https://www.cnblogs.com/mengd/p/java"> Java
<input type="checkbox" name="hobby" value="https://www.cnblogs.com/mengd/p/python"> Python
<br>
<button onclick="checkAll()">全選</button>
</body>
</html>
6. createElement 方法
使用js代碼來創建html標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 在記憶體中有<div> </div>
var divObj = document.createElement("div");
// 有一個文本節點物件 你好，山丘
var textNodeObj = document.createTextNode("你好，山丘");
// <div>你好，山丘 </div>
divObj.appendChild(textNodeObj);
// 添加子元素，在body里
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>
7. 節點常用的屬性和方法
方法：
- 通過具體的元素節點呼叫 getElementsByTagName() 方法，獲取當前節點的指定標簽名孩子節點
- appendChild(ChildNode) 方法，可以添加一個子節點，ChildNode 是要添加的孩子節點
屬性：
- childNodes 屬性，獲取當前節點的所有子節點
- firstChild 屬性，獲取當前節點的第一個子節點 ，會匹配換行和空格資訊 ，使用firstElementChild 則不會匹配換行和空格資訊，其他的類似
- lastChild 屬性，獲取當前節點的最后一個子節點
- parentNode 屬性，獲取當前節點的父節點
- nextSibling 屬性，獲取當前節點的下一個節點
- previousSibling 屬性，獲取當前節點的上一個節點，previousElementSibling這個不包括換行和空格
- className 用于獲取或設定標簽的 class 屬性值
- innerHTML 屬性，表示獲取/設定起始標簽和結束標簽中的內容
- innerText 屬性，表示獲取/設定起始標簽和結束標簽中的文本
8. DOM練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 1. 查找#bj節點
document.getElementById("b01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
};
// 2. 查找所有 li 節點
var but02Ele = document.getElementById("b02");
but02Ele.onclick = function () {
var lis = document.getElementsByTagName("li");
alert(lis.length);
};
// 3. 查找 name=gender 的所有節點
var but03Ele = document.getElementById("b03");
but03Ele.onclick = function () {
var genders = document.getElementsByName("gender");
alert(genders.length);
};
// 4. 查找#city 下所有 li 節點
var but04Ele = document.getElementById("b04");
but04Ele.onclick = function () {
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length);
};
// 5. 回傳#city 的所有子節點
var but05Ele = document.getElementById("b05");
but05Ele.onclick = function () {
var obj = document.getElementById("city").childNodes;
console.log(obj.length);
for (var i = 0; i < obj.length; i++){
console.log(obj[i]);
}
};
// 6. 回傳#phone 的第一個子節點
var but06Ele = document.getElementById("b06");
but06Ele.onclick = function () {
var objphone = document.getElementById("phone").firstElementChild;
alert(objphone.innerHTML);
};
// 7. 回傳#bj 的父節點
var but07Ele = document.getElementById("b07");
but07Ele.onclick = function () {
var objbj = document.getElementById("bj").parentNode;
alert(objbj.innerHTML);
};
// 8. 回傳#ML 的前一個兄弟節點
var but08Ele = document.getElementById("b08");
but08Ele.onclick = function () {
alert(document.getElementById("ML").previousElementSibling.innerHTML);
};
// 9. 回傳#username 的 value 屬性值
var but09Ele = document.getElementById("b09");
but09Ele.onclick = function () {
alert(document.getElementById("username").value);
};
// 10. 設定#username 的 value 屬性值
var but10Ele = document.getElementById("b10");
but10Ele.onclick = function () {
document.getElementById("username").value = "https://www.cnblogs.com/mengd/p/山丘";
};
// 11. 回傳#city 的文本值
var but11Ele = document.getElementById("b11");
but11Ele.onclick = function () {
alert(document.getElementById("city").innerText);
};
};
</script>
</head>
<body>
<div id="total">
<div >
<p>
你喜歡那個城市？
</p>
<ul id="city">
<li id="bj">北京</li>
<li>南京</li>
<li>東京</li>
<li>上海</li>
</ul>
<br>
<p>
你喜歡那款游戲？
</p>
<ul id="game">
<li id="wz">王者榮耀</li>
<li>飛車</li>
<li>聯盟</li>
<li>DNF</li>
</ul>
<br>
<p>
你的手機是什么品牌?
</p>
<ul id="phone">
<li>華為</li>
<li id="ML">小米</li>
<li>oppo</li>
<li>一加</li>
</ul>
</div>
<div >
gender:
<input type="radio" name="gender" value="https://www.cnblogs.com/mengd/p/male">
Male
<input type="radio" name="gender" value="https://www.cnblogs.com/mengd/p/female">
Female
<br>
name:
<input type="text" name="name" id="username" value="https://www.cnblogs.com/mengd/p/md">
</div>
</div>
<div id="btuList">
<div><button id="b01">查找#bj節點</button></div>
<div><button id="b02">查找所有 li 節點</button></div>
<div><button id="b03">查找 name=gender 的所有節點</button></div>
<div><button id="b04">查找#city 下所有 li 節點</button></div>
<div><button id="b05">回傳#city 的所有子節點</button></div>
<div><button id="b06">回傳#phone 的第一個子節點</button></div>
<div><button id="b07">回傳#bj 的父節點</button></div>
<div><button id="b08">回傳#android 的前一個兄弟節點</button></div>
<div><button id="b09">回傳#username 的 value 屬性值</button></div>
<div><button id="b10">設定#username 的 value 屬性值</button></div>
<div><button id="b11">回傳#city 的文本值</button></div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/137672.html
標籤：Java