jQuery的attr与prop-优快云博客

本文探讨了在jQuery中如何使用.attr()和.prop()方法来获取和设置HTML元素的属性及属性值，并通过实例展示了这两种方法的区别。文章还提供了一个具体的示例场景，即尝试修改输入框的类型属性，以此来说明不同情况下选择合适方法的重要性。

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$("#img")
								.html(
										"<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>");
						console.log($("#img").attr("id"));
						console.log($("#img").prop("id"));
						console.log("test");//test1
						$('#input1').prop('type', 'text');
						 $('#input1').attr('input1','input1'); 
						$('#input2').prop('input2', 'input2');
						console.log($('#input1').attr('input2'));//test1 
						console.log($('#input2').prop('input2'));//test1 
					});
</script>
</head>
<body>

	<div id="img"></div>
	<input id="input1" type="password">
	<input id="input2" type="password">
</body>

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$("#img")
								.html(
										"<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>");
						console.log($("#img").attr("id"));
						console.log($("#img").prop("id"));
						console.log("test");//test1
						$('#input2').prop('type', 'text');
						$('#input1').attr('type', 'text');
					});
</script>
</head>
<body>

	<div id="img"></div>
	<input id="input1" type="password">
	<input id="input