jquery中val获取值，attr获取属性值和attr设置属性值_$('#test1').attr(

作者：weixin_40725706 | 2024-02-18 21:31:05

踩

$('#test1').attr(

（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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/110695