JQuery系列教材（六）- 对属性操作以及prop和attr的区别

工具版本兼容问题

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

示例 1 : 获取
示例 2 : 修改
示例 3 : 删除
示例 4 : prop与attr的区别

示例 1 :

获取

edit 顶折

纠问

通过attr()获取一个元素的属性

运行效果

代码行数较多，请点击查看

<script src="https://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 :

修改

edit 顶折

纠问

通过attr(attr,value)修改属性

运行效果

<script src="https://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 :

删除

edit 顶折

纠问

通过removeAttr(attr)删除属性

运行效果

<script src="https://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的区别

edit 顶折

纠问

与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值，无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

运行效果

代码行数较多，请点击查看

<script src="https://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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

JQuery系列教材（五）- 筛选器

JQuery系列教材（七）- 常见效果演示

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

问答区域

2018-12-26 想要实现居中居右来回切换

jimmynqy

关于前端部分-JQuery-属性的提问

在function中使用了if语句，不能运行，有大神知道是什么问题吗，见代码

<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      var a = center;
     if($("#h").attr("align")==a){
       $("#h").attr("align","right");
     }else{
       $("#h").attr("align","center");
     }
   });

});
  
</script>

6 个答案

bobtick
答案时间：2022-05-09

代码超过 5行，点击查看

yjfyyd
答案时间：2021-05-11

代码超过 5行，点击查看

ercilan
答案时间：2020-10-29

楼下这位，人家这明显就是id啊。顺带一说，不需要那么多括号

java学习_
答案时间：2020-04-16

#表示选取ID，不加#才是选取特定类型的标签，上面两位都没有说到关键

代码超过 5行，点击查看

qinhao
答案时间：2019-08-03

if(($("#h").attr("align"))=="center"){ $("#h").attr("align","right"); }else{ $("#h").attr("align","center"); }

码不码烦
答案时间：2018-12-26

var a = center; 漏了引号

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-02-26 请问JQuery可以像DOM一样提取出元素的所有属性（键值对）数组吗？

GGGISGGG

关于前端部分-JQuery-属性的提问

像用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>

2 个答案

BeachFish
答案时间：2019-07-03

就是拿方法封装了一下，你可以研究一下jquery的js源码

新手菜鸟java
答案时间：2018-05-15

JQ就是JS的封装工具，是可以的

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JQuery-属性的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图