how2j.cn


关键字 简介 示例代码
attr
获取
示例代码
attr(属性,值)
修改
示例代码
removeAttr
删除
示例代码
prop与attr
prop与attr的区别
示例代码
示例 1 : 获取   
示例 2 : 修改   
示例 3 : 删除   
示例 4 : prop与attr的区别   

示例 1 :

获取

通过attr()获取一个元素的属性
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ alert("align属性是:" + $("#h").attr("align") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#h").attr("game") ); }); }); </script> <button id="b1">获取align属性</button> <button id="b2">获取自定义属性 game</button> <br> <br> <h1 id="h" align="center" game="LOL">居中标题</h1>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

修改

通过attr(attr,value)修改属性
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#h").attr("align","right") ; }); }); </script> <button id="b1">修改align属性为right</button> <br> <br> <h1 id="h" align="center" >居中标题</h1>
<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#h").attr("align","right") ;
   });

});
  
</script>
  
<button id="b1">修改align属性为right</button>
  
<br>
<br>
  
<h1 id="h" align="center" >居中标题</h1>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

删除

通过removeAttr(attr)删除属性
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("#h").removeAttr("align"); }); }); </script> <button id="b1">删除align属性</button> <br> <br> <h1 id="h" align="center" game="LOL">居中标题</h1>
<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
         $("#h").removeAttr("align");
   });
});
  
</script>
  
<button id="b1">删除align属性</button>

<br>
<br>
  
<h1 id="h" align="center" game="LOL">居中标题</h1>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

prop与attr的区别

prop一样attr也可以用来获取与设置元素的属性。
区别在于,对于自定义属性选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取,prop不能获取
2. 对于选中属性
attr 只能获取初始值, 无论是否变化
prop 能够访问变化后的值,并且以true|false的布尔型返回。
所以在访问表单对象属性的时候,应该采用prop而非attr
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ alert("game属性是:" + $("#c").attr("game") ); }); $("#b2").click(function(){ alert("game属性是:" + $("#c").prop("game") ); }); $("#b3").click(function(){ alert("checked属性是:" + $("#c").attr("checked") ); }); $("#b4").click(function(){ alert("checked属性是:" + $("#c").prop("checked") ); }); }); </script> <style> button{ display:block; } </style> <button id="b1">通过attr获取自定义属性 game</button> <button id="b2">通过prop获取自定义属性 game</button> <button id="b3">通过attr获取 checked属性</button> <button id="b4">通过prop获取 checked属性</button> <br> <br> <input type="checkbox" id="c" game="LOL" checked="checked"> 选中的复选框


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 前端基础-JQuery-属性 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图