.attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置,那么获取到的结果是 undefined; 
.prop( )可以设置元素的属性(HTML固有的属性,可以给元素添加属性)也可以获取元素的固有的属性值,如果是额外设置的其他属性,则无法通过prop( )获取。 

.css() 只能获取是 style 里面的属性值; 
注意语法:获取style样式属性值:对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”,“属性值”)双引号必不可少

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

获取属性值:

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

总结: 
1 如果想要通过attr()获取属性值,那么该属性必须显式的设置在HTML代码中或者通过attr新增的属性才能被获取到,如果没有设置,那么将返回undefined 
2 如果通过prop()获取属性值,那么该属性只能是HTMl的固有属性,无论是否显式的设置,都可以获取其对应的属性值,如果是额外增加的属性,那么将无法获取。

attr()、prop()、css() 的区别的更多相关文章

  1. $().attr() 和 $().css的区别

    使用jquery的.attr( )方法去给div隐藏,这样写的 $("#div_id").attr("display","none"),发现 ...

  2. jquery之 css()方法。用法类似的有attr(),prop(),val()

    [注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...

  3. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  4. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  5. jquery中prop,attr,data的区别

    这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...

  6. attr(),prop()二者区别和最佳实践

    attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop().  查看了手册发现并没有对二者 ...

  7. jq的attr、prop和data区别

    prop()获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled", ...

  8. jq中attr()和prop() 属性的区别

    query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要 ...

  9. IE和firefox火狐在JS、css兼容区别

    1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...

  10. FF与IE对JavaScript和CSS的区别

    一.FF与IE对JavaScript的区别 1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formNam ...

随机推荐

  1. 用python从符合一定格式的txt文档中逐行读取数据并按一定规则写入excel(openpyxl支持Excel 2007 .xlsx格式)

    前几天接到一个任务,从gerrit上通过ssh命令获取一些commit相关的数据到文本文档中,随后将这些数据存入Excel中.数据格式如下图所示 观察上图可知,存在文本文档中的数据符合一定的格式,通过 ...

  2. vnode的挂载和更新流程 -- 简介.

    来源 vnode原理 diff图解 <div id="app"> {{someVar}} </div> <script type="text ...

  3. java学习笔记16(正则表达式)

    正则表达式: 定义:在pattern类中有简单规则定义,具有特殊含义的字符串: 作用:用于一些字符串,比如验证注册邮箱,密码,用户名等: 正则表达式的语法: 1)字符:'\'反斜杠   \t 代表制表 ...

  4. Bug03_SSM整合_mybatis result maps collection already contains value...

    这个问题是在映射文件,但是这个映射文件是自动生成的. 所以想起来可能是在自动生成映射文件,pojo类时操作有问题.第一次运行时,出现错误,没有删除已经生成的文件就直接运行了第二次. 解决办法:删除旧的 ...

  5. HDU 6063 17多校3 RXD and math(暴力打表题)

    Problem Description RXD is a good mathematician.One day he wants to calculate: ∑i=1nkμ2(i)×⌊nki−−−√⌋ ...

  6. Enhancement in SAP abap.

    Recently I have been taught through how to do enhancement for those standard programs. Th reason for ...

  7. Spring 配置文件

    <?xml version="1.0" encoding="UTF-8" ?> <beans> <bean id=...> ...

  8. 【转载】 996是没前途的!996.ICU来了,回忆我对996的态度是如何从支持变成了怀疑!

    原文地址: https://www.meiqiantu.com/20138.html --------------------------------------------------------- ...

  9. Python网络爬虫之requests模块(2)

    session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 引入 有些时候,我们在使用爬 ...

  10. python-基础-文件

    一.文件操作 打开文件时,需要指定文件路径和以何等方式打开文件, 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件的模式有: r ,只读模式[默认模式 ...