id####
- 在CSS or Javascript用來識別html元素
- 指定一個元素的名稱底洗，此名稱必須在文檔里是唯一的
name####
- 單獨地在一個網(wǎng)頁里面，一個控件是否設(shè)置它的 name 屬性是不會影響到這個網(wǎng)頁的功能實現(xiàn)的寂嘉。但是，當(dāng)我們需要把這個控件所關(guān)聯(lián)的數(shù)據(jù)傳遞到數(shù)據(jù)庫時管钳，就必須要設(shè)置 name 屬性虏肾，否則，這個值是沒有辦法傳到服務(wù)器上面得到保存的羽圃。一個name可以同時對應(yīng)多個控件(比如
radio buttons,checkboxes) - name的名稱在一個文檔里可以重復(fù)
id name 用途的區(qū)別
一. id 的常用用途###
1 . CSS通過 #id 來引用元素
下面是CSS通過 #colored 實現(xiàn)將id="colored"的段落設(shè)為紅色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#colored{
color:red;
}
</style>
</head>
<body>
<p id="normal">我是一個段落對</p>
<p id="colored">我是一個有顏色的段落</p>
</body>
</html>
效果：
1.png
2 .JS通過 getElementById()獲取元素
下面是JS通過 getElementById("colored ")獲取id="colored "的p元素乾胶，并設(shè)為藍(lán)色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function show()
{
//獲取id="colored "的p元素
var p = document.getElementById("colored");
//設(shè)為藍(lán)色
p.style.color = "blue";
}
</script>
</head>
<body onload="show()">
<p id="normal">我是一個段落</p>
<p id="colored">我是一個有顏色的段落重復(fù)</p>
</body>
</html>
2.png
二. name的用途###
下面的代碼展示了name 用來給表單里的 radio buttons分組, 所以在這些選擇里只能單選一個。并且用getElementsByName()可以獲取name相同的radio控件朽寞。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function handleClick() {
//獲取name="student"的元素
var keys = document.getElementsByName("student");
var values = '';
//遍歷name="student"的單選框value值
for (var i = 0; i < keys.length; i++) {
values += keys[i].value;
}
alert(values);
}
</script>
</head>
<body>
<form>
<input type="radio" name="student" value="age"/>
<input type="radio" name="student" value="sex"/>
<div>
<input type="submit" value="submit" onclick="handleClick()"/>
</div>
</form>
</body>
</html>
效果：
3.png
總結(jié)：
-多用英文搜索识窿，比如id name difference
-學(xué)會用show code 的方式理解字面意思
-寫博客時應(yīng)該給自己限定一定的時間
每天都努力一點
謝謝你看完
