attr()、prop()、css() 的区别
.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() 的区别的更多相关文章
- $().attr() 和 $().css的区别
使用jquery的.attr( )方法去给div隐藏,这样写的 $("#div_id").attr("display","none"),发现 ...
- jquery之 css()方法。用法类似的有attr(),prop(),val()
[注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jquery中prop,attr,data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
- attr(),prop()二者区别和最佳实践
attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop(). 查看了手册发现并没有对二者 ...
- jq的attr、prop和data区别
prop()获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled", ...
- jq中attr()和prop() 属性的区别
query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要 ...
- IE和firefox火狐在JS、css兼容区别
1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...
- FF与IE对JavaScript和CSS的区别
一.FF与IE对JavaScript的区别 1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formNam ...
随机推荐
- ESP8266 上报数据到贝壳物联
下面贴上代码: #include <aJSON.h> #include <SPI.h> #include <Wire.h> #include <dht11.h ...
- JavaWeb:一个Servelt多个请求
一个Servelt多个请求 基础模拟 方法一:使用switch方法 一.方法介绍 方法:switch 优点:方法简单,明了 缺点:维护麻烦,保密性不好 二.代码实现 1.servlet类 packa ...
- Codex Delphi Expert
https://www.delphiworlds.com/codex/?tdsourcetag=s_pcqq_aiomsg Codex是什么? 是一个可以安装到Delphi IDE中的专家 有助于提高 ...
- python 爬虫数据准换时间格式
timeStamp = 1381419600 dateArray = datetime.datetime.utcfromtimestamp(timeStamp) otherStyleTime = da ...
- 构造方法调用另一个构造方法,用this
using System; class Person { public int age; public string name; public Person(int age, string name) ...
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)
子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...
- ubuntu下利用docker搭建gitloab手记
0.环境信息 ubuntu server 14.04 lts 64位版本 Docker version 17.05.0-ce, build 89658be 1.从阿里加速站下载gitlab sudo ...
- C++ 中时钟函数的使用
头文件: #incllude <time.h> 定义: clock_t var1, var2; 获取时间: var1 = clock(); 每过千分之一秒(1毫秒),调用clock()函数 ...
- 牛客OI赛制测试赛2
A题: https://www.nowcoder.com/acm/contest/185/A 链接:https://www.nowcoder.com/acm/contest/185/A来源:牛客网 题 ...
- C++学习(十三)(C语言部分)之 练习
打印图像 要用循环 空心或者实心都可以1.矩形 菱形 三角形 梯形 六边形2.打印倒三角形的99乘法表 具体测试代码如下: /* 1.打印图像 要用循环 空心或者实心都可以 矩形 菱形 三角形 梯形 ...