知识点一:获得、设置元素的属性
获取:
attr("属性名") 获得属性名对应的属性值,都可以使用
prop("属性名") 获得属性名对应的属性值,一般使用在获取属性值为两种的情况,另外也
可以用在获取新建节点的属性值
设置:
attr("属性名","属性值") 设置属性名对应的属性值,都可以使用
prop("属性名","属性值") 设置属性名对应的属性值,
注意:这attr和prop是有区别的,下面使用案例来说明:
测试一:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
<input id="test" type="checkbox" checked="checked" name="我是复选框"/>
<br/>
<script>
var input = $("#test");
//使用attr()获得属性
var $attr_checked =input .attr("checked");
var $attr_name=input.attr("name");
//使用prop()获得属性
var $prop_checked =input .prop("checked");
var $prop_name=input.prop("name");
//下面输出:
document.write("$attr_checked="+$attr_checked +"..."+"$attr_name="+$attr_name+"<br/>");
document.write("$prop_checked="+$prop_checked +"..."+"$prop_name="+$prop_name+"<br/>");
</script>
</body>
</html>
结果为:
$attr_checked=checked...$attr_name=我是复选框
$prop_checked=true...$prop_name=我是复选框
结论一:
1.使用attr()和prop()都能获取到元素节点的属性值。
2.使用attr()和prop()获得name属性的值都是一样的。
3.使用pror()获得checked属性的true,而使用attr()获得使用checked;
猜想:如果不设置input的checked属性,获得attr()和prop()会获取什么呢?
我们删除input标签的checked属性,并且增加了使用prop()获得value属性值,代码如下:
说明:这里input并没有设置value属性;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
<input id="test" type="checkbox" name="我是复选框"/>
<br/>
<script>
var input = $("#test");
//使用attr()获得属性
var $attr_checked =input .attr("checked");
var $attr_name=input.attr("name");
//使用prop()获得属性
var $prop_checked =input .prop("checked");
var $prop_name=input.prop("name");
var $prop_value=input.prop("value");
//下面输出:
document.write("$attr_checked="+$attr_checked +"..."+"$attr_name="+$attr_name+"<br/>");
document.write("$prop_checked="+$prop_checked +"..."+"$prop_name="+$prop_name+"....$prop_value="+$prop_value+"<br/>");
</script>
</body>
</html>
结果为:
$attr_checked=undefined...$attr_name=我是复选框
$prop_checked=false...$prop_name=我是复选框....$prop_value=on
总结二:
1.我们可以看出attr()获得没有设置checked属性值的结果为undefined,而prop()获得的是false;这样我么可以总结,当attr()获得没有设置属性值的属性是,我们将会得到undefined,而使用prop获取没有定义的属性且属性值只有一种情况的时候,得到的值为false
2.使用prop()获取普通属性值(属性值可以是很多个的属性),得到的是on
测试二:我们动态使用jquery创建节点,使用attr()、prop()获取其属性
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
<script>
//jQuery创建节点
var input = $("<input type='checkbox' value='测试' name='我们复选框' checked='checked'/>");
//使用attr()获取节点属性
var $attr_name = input.attr("name");
var $attr_value=input.attr("value");
var $attr_checked = input.attr("checked");
//使用prop()获取节点属性
var $prop_name = input.prop("name");
var $prop_value=input.prop("value");
var $prop_checked = input.prop("checked");
//下面输出:
document.write("$attr_checked="+$attr_checked +"..."+"$attr_name="+$attr_name+"...$attr_value="+$attr_value+"<br/>");
document.write("$prop_checked="+$prop_checked +"..."+"$prop_name="+$prop_name+"....$prop_value="+$prop_value+"<br/>");
</script>
</body>
</html>
结果为:
$attr_checked=checked...$attr_name=我们复选框...$attr_value=测试
$prop_checked=true...$prop_name=我们复选框....$prop_value=测试
总结三:
1.我们可以看出使用attr()和prop()都可以获取动态创建节点的属性
2.attr()和prop()获取动态节点的和静态节点的差异是一样的。