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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-02-26 请问JQuery可以像DOM一样提取出元素的所有属性(键值对)数组吗?
GGGISGGG



像用DOM获取属性节点一样。
<html>
   
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
//获取属性节点,把所有属性名和对应值都提取出来。
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是:"+ as["id"].nodeValue);
 
</script>
</html>

							


1 个答案

新手菜鸟java 答案时间:2018-05-15
JQ就是JS的封装工具,是可以的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









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

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

上传截图