目录
1. jQuery.prop OR jQuery.attr
1.1. jQuery.prop
1.2. jQuery.attr
2. property OR attribute
3. 操作 radio、checkbox、select
3.1. radio
3.2. checkbox
3.3. select
4. 几道笔试题
1. jQuery.prop OR jQuery.attr
1.1. jQuery.prop
The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements.
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body>
Checkbox: <input type="checkbox" checked="checked" onchange="handleChange()" />
<script type="text/javascript">
function handleChange(){
console.log("prop", $("input").prop("checked"), "|", "attr", $("input").attr("checked"));
}
</script>
</body>
</html>
jQuery.prop 源码分析(3.4.1):
1.2. jQuery.attr
The .attr() method gets the attribute value for only the first element in the matched set.
2. property OR attribute
以下内容节选自
https://share.web-tinker.com/articles/20115.json
Attribute 和 Property 都被翻译成“属性”,但是它们的本质不同。
举个例子
桌子上有个苹果”。Attribute仅仅是描述了这个“有苹果”的事实,而Property则是直指那个桌子上的苹果。这里的苹果是一个实体,用Attribute来描述只能说明这个事件的事实。它无法准确的描述出具体是哪个苹果在桌子上。
这么理解
Attribute 是标记语言的概念,标记语言本身是一种文本,所以 Attribute 这种文本方式描述的性质在标记语言中很容易使用。而Property则是保存在内存(memory)中,而内存会随着程序运行结束被释放,因此变得无法长期储存。在JavaScript中,DOM 对象通常都是多重继承的。同时继承了 HTML 和 JavaScript 的 Object。Object 是完完全全的内存对象,所以使用的是 Property,而 HTML 本身是标记语言所以使用的是 Attribute。当这两个东西被继承到同一个对象上的时候经常会让人混淆起来。由于一些Attribute是很常用的,比如id、class等,所以DOM把它们映射到了Property上以方便使用。这样我们就会遇到一个对象同时具有id这个Attribute和Property(由于class是保留字,所以它被映射到 Property 上时变成了className)。
总结
虽然被DOM这样一搞就变得很乱,但是我们这样理解之后就很简单。只要是HTML标签上设置的属性就是Attribute,而直接在JavaScript中用点运算符操作的DOM对象属性就是Property。还有一些HTML自带的属性,它们同时是Attribute和Property。Attribute的数据类型永远都是字符串,而Property就可以非常丰富。
图2-1:property 与 attribute 间关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="name"
name="user"
class="form-control"
value="webj2ee"
myAttr="my-attr"
data-control="text" />
</body>
</html>
3. 操作 radio、checkbox、select
3.1. radio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
<form name="myform">
<label for="bachelor">本科</label>
<input type="radio" id="bachelor" name="degree" value="bachelor"/>
<label for="master">硕士</label>
<input type="radio" id="master" name="degree" value="master"/>
<label for="doctor">博士</label>
<input type="radio" id="doctor" name="degree" value="doctor"/>
</form>
<script type="text/javascript">
// 选中某值
$("input[value=master]").prop("checked", true);
// 获取选中值
var selected = $("input[name=degree]:checked").val();
console.log(selected);
// 删除特定项
$("input[value=doctor]").remove();
// 追加项目
$("form[name=myform]").append(
"<label for=\"higher\">高中</label>"+
"<input type=\"radio\" id=\"higher\" name=\"degree\" value=\"higher\"/>"
);
</script>
</body>
</html>
3.2. checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
<form name="myform">
<label for="bachelor">本科</label>
<input type="checkbox" id="bachelor" name="degree" value="bachelor" />
<label for="master">硕士</label>
<input type="checkbox" id="master" name="degree" value="master"/>
<label for="doctor">博士</label>
<input type="checkbox" id="doctor" name="degree" value="doctor"/>
</form>
<script type="text/javascript">
// 选中某值
$("input[value=master], input[value=bachelor]").prop("checked", true);
// 获取选中值
var selected = [];
$("input[name=degree]:checked").each(function (index, item) {
selected.push($(this).val());
});
console.log(selected);
// 追加项目
$("form[name=myform]").append(
"<label for=\"higher\">高中</label>"+
"<input type=\"checkbox\" id=\"higher\" name=\"degree\" value=\"higher\"/>"
);
</script>
</body>
</html>
3.3. select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
</head>
<body>
<form name="myform">
<select name="single">
<option value="bachelor" selected="selected">本科</option>
<option value="master">硕士</option>
<option value="doctor">博士</option>
</select>
<select name="multiple" multiple="multiple">
<option value="bachelor">本科</option>
<option value="master" selected="selected">硕士</option>
<option value="doctor" selected="selected">博士</option>
</select>
</form>
<script type="text/javascript">
// 取值
var selected = $("select[name=single]").val();
console.log(selected);
// 选中某值
$("select[name=single]").val("doctor");
// -------------------------------------------
// 取值
var multiSelected = $("select[name=multiple]").val();
console.log(multiSelected);
// 选中某几个值
$("select[name=multiple]").val(["bachelor", "master"]);
</script>
</body>
</html>
4. 几道笔试题
题目01:
题目02:
题目03:
参考:
jQuery 官方文档: https://api.jquery.com/prop/ Attribute和Property的区别 https://share.web-tinker.com/articles/20115.json