jQuery中attr()函数和prop()函数知识点

程序员文章站 2022-05-31 11:51:08

...

$("选择器").attr("checked");效果不理想，尽量使用$("选择器").prop('checked');

<pre>
在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获
取工作，还同时承担了property的设置和获取工作。例
如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等
DOM元素的property。
直到jQuery 1.6新增prop()函数，并用来承担property的设置或获
取工作之后，attr()才只用来负责attribute的设置和获取工作。
此外，对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之
前，attr()获
取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。
但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选
中(或禁用)就返回checked、selected或disabled，否
则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属
性值表示文档加
载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属
性值也不会发生改变。
因为jQuery认为：attribute的checked、selected、disabled就是表
示该属性初始状
态的值，property的checked、selected、disabled才表示该属
性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设
置或获取checked、selected、disabled等属性。对于其它能
够用prop()实现的操作，也尽量使用prop()函数。
</pre>

function checkboxsInfo(){
var inputs = document.getElementsByTagName('input');
for (var index = 0; index < inputs.length; index++) {
	if(inputs[index].type == 'checkbox'){
		console.log(inputs[index].id, inputs[index].value, inputs[index].checked);
	}
}
}

jQuery中attr()函数和prop()函数知识点

//attr()函数和prop()函数的比较
function testPropAndAttr(){
$('input:checkbox').each(function() {
	var checked1 = $(this).prop('checked');
	var dataType1 = typeof $(this).prop('checked');
	var checked2 = $(this).attr('checked');
	var dataType2 = typeof $(this).attr('checked');
	var values = $(this).val();
	console.log(values, checked1, dataType1, checked2, dataType2);
});
}

完整源代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">jQuery中attr()函数和prop()函数知识点</h3>
	<h3 style="color: #cd1636;">checked属性只要存在,就会选中,无论其值是什么</h3>
	参考网页https://www.runoob.com/jquery/html-prop.html?<br/>
	参考网页https://www.runoob.com/try/try.php?filename=tryjquery_html_prop_attr
	<br/>
<pre>
在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获取工作，还同时承担了property的设置和获取工作。例
如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()函数，并用来承担property的设置或获取工作之后，attr()才只用来负责attribute的设置和获取工作。
此外，对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如
果被选中(或禁用)就返回true，否则返回false。
但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否
则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之
后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。
因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状
态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能
够用prop()实现的操作，也尽量使用prop()函数。
</pre>	
足球：<input id="checkbox1" type="checkbox" checked="checked" value="足球"><br/>
篮球：<input id="checkbox2" type="checkbox" checked="" value="篮球"><br/>
羽毛球：<input id="checkbox3" type="checkbox" checked="false" value="羽毛球"><br/>
乒乓球：<input id="checkbox4" type="checkbox" checked="true" value="乒乓球"><br/>
桌球：<input id="checkbox5" type="checkbox" checked value="桌球"><br/>
排球：<input id="checkbox6" type="checkbox" value="排球"><br/>
悠悠球：<input id="checkbox7" type="checkbox" checked="abcde" value="悠悠球"><br/>
attr('checked')返回string类型<br/>
prop('checked')返回boolean类型<br/>
<input type="button" value="attr()函数和prop()函数的比较" οnclick="testPropAndAttr();">
<br/><br/>
<input type="button" value="取消足球" οnclick="test1();">
<br/><br/>
<input type="button" value="取消乒乓球" οnclick="test2();">
<br/><br/>
<input type="button" value="prop()函数全选" οnclick="test3();">
<br/><br/>
<input type="button" value="prop()函数全不选" οnclick="test4();">
<br/><br/>
<input type="button" value="attr()函数全选" οnclick="test5();">
<br/><br/>
<input type="button" value="attr()函数全不选" οnclick="test6();">
<br/><br/>
<input type="button" value="attr()函数获取排球状态" οnclick="test7();">
<br/><br/>
<input type="button" value="js查看所有复选框的状态" οnclick="checkboxsInfo();">
<br/><br/>

<h3 style="color: #cd1636;">测试将复选框的值提交到服务器端</h3>
<form action="TestAjax">
	男<input id="checkbox8" type="checkbox" name="sex" value="男" checked="checked">
	<br/>
	女<input id="checkbox9" type="checkbox" name="sex" value="女">
	<br/>
	<input style="background: #8E388E; color: white;" type="submit" value="提交至服务器(Servlet)">
</form>
	
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function checkboxsInfo(){
var inputs = document.getElementsByTagName('input');
for (var index = 0; index < inputs.length; index++) {
	if(inputs[index].type == 'checkbox'){
		console.log(inputs[index].id, inputs[index].value, inputs[index].checked);
	}
}
}

console.log('**********************');

function test1(){
	document.getElementById('checkbox1').checked = false;
	alert(document.getElementById('checkbox1').checked);
	if(document.getElementById('checkbox1').checked){
		alert('真的');
	}else{
		alert('假的');
	}
}

function test2(){
// 	document.getElementById('checkbox4').checked = false;
	$('#checkbox4').prop('checked',false);
	alert(document.getElementById('checkbox1').checked);
	alert($('#checkbox4').prop('checked'));
	if(document.getElementById('checkbox1').checked){
		alert('真的');
	}else{
		alert('假的');
	}
}

//prop()函数全选
function test3(){
	console.log($('input:checkbox').prop('checked'));
	$('input:checkbox').each(function(){
		console.log('*******' + $(this).prop('checked'));
	});
	$('input:checkbox').prop('checked', true);
	console.log($('input:checkbox').prop('checked'));
	$('input:checkbox').each(function(){
		console.log('========' + $(this).prop('checked'));
	});
}

//prop()函数全不选
function test4(){
	console.log($('input:checkbox').prop('checked'));
	$('input:checkbox').each(function(){
		console.log('*******' + $(this).prop('checked'));
	});
	$('input:checkbox').prop('checked', false);
	console.log($('input:checkbox').prop('checked'));
	$('input:checkbox').each(function(){
		console.log('========' + $(this).prop('checked'));
	});
}

//attr()函数全选
function test5(){
	console.log($('input:checkbox').attr('checked'));
	$('input:checkbox').each(function(){
		console.log('*******' + $(this).attr('checked'));
	});
	$('input:checkbox').attr('checked', true);
	console.log($('input:checkbox').attr('checked'));
	$('input:checkbox').each(function(){
		console.log('========' + $(this).attr('checked'));
	});
}

//attr()函数全不选
function test6(){
	console.log($('input:checkbox').attr('checked'));
	$('input:checkbox').each(function(){
		console.log('*******' + $(this).attr('checked'));
	});
	$('input:checkbox').attr('checked', false);
	console.log($('input:checkbox').attr('checked'));
	$('input:checkbox').each(function(){
		console.log('========' + $(this).attr('checked'));
	});
}

function test7(){
/*
id等于checkbox6的复选框，初始值是没有勾选的状态，手动勾
选该复选框后，$("#checkbox6").attr("checked")的结果还是undefined 
*/
	alert($("#checkbox6").attr("checked"));
/*	
id等于checkbox6的复选框，初始值是没有勾选的状态，手动勾
选该复选框后，document.getElementById('checkbox6').checked的结果是true
*/
	alert(document.getElementById('checkbox6').checked);
}

console.log('**********************');

//attr()函数和prop()函数的比较
function testPropAndAttr(){
$('input:checkbox').each(function() {
	var checked1 = $(this).prop('checked');
	var dataType1 = typeof $(this).prop('checked');
	var checked2 = $(this).attr('checked');
	var dataType2 = typeof $(this).attr('checked');
	var values = $(this).val();
	console.log(values, checked1, dataType1, checked2, dataType2);
});
}
</script>
</html>

下一篇： Android实现一个简单的单选题

jQuery中attr()函数和prop()函数知识点

jQuery中的read和JavaScript中的onload函数的区别

关于jquery中attr()和prop()方法的区别

jQuery中的prop（）和attr（）的区别

jQuery中attr和prop的区别

jquery中attr()和prop()的区别

入口函数的作用，以及原生js和jQuery库中的入口函数的不同

jquery中attr和prop的区别

jQuery中clone()函数实现表单中增加和减少输入项

jquery中attr和prop的区别解析

jQuery中attr()和prop()在修改checked属性时的区别