jquery中val获取值，attr获取属性值和attr设置属性值

时间：2021-04-16

　　（1）这里可以看到只能获取到input的值，但不能获取button的值。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

$("#btn2").click(function(){
alert("Value: " + $("#btnValue").val());
});
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="coding"></p>
<button id="btnValue">获取此button的值</button></br></br>

<button id="btn1">显示值1</button>
<button id="btn2">显示值2</button>

</body>

</html>

　　（2）可以看到这里获取了input的属性value的值coding，也获取到了button的属性id的值为btnValue。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Value: " + $("#test").attr("value"));
});

$("#btn2").click(function(){
alert("Value: " + $("#btnValue").attr("id"));
});
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="coding"></p>
<button id="btnValue">获取此button的值</button></br></br>

<button id="btn1">显示值1</button>
<button id="btn2">显示值2</button>

</body>

</html>

　　（3）attr设置属性值：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
window.flag =true;
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").attr("id", "number");
});

$("#btn2").click(function(){
if (window.flag) {
alert("value:" + $("#test1").text());
} else {
alert("value:" + $("#number").text());
}
window.flag = !window.flag;
});
});
</script>
</head>

<body>
<p id="test1">这是<b>粗体</b>文本。</p>

<button id="btn1">设置属性id</button>
<button id="btn2">获取属性为id的值</button>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章