jquery 属性操作 attr( ) prop()css( )区别
来源:互联网 发布:手机游戏无法连接网络 编辑:程序博客网 时间:2024/05/23 11:54
一 attr () 和 prop( ) 操作属性
谈谈我的总结:
1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以及某些特定的元素的固有的属性,比如 a 的 href target 属性,input元素的 radio checked type alt src disabled value 等 ,img标签的width height src alt 等,不存在的属性叫做新增属性。
2 attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置,那么获取到的结果是 undefined;
3 prop( )可以设置元素的属性(HTML固有的属性,可以给元素添加属性)也可以获取元素的固有的属性值,如果是额外设置的其他属性,则无法通过prop( )获取。
4 设置元素属性:
attr (“属性名”,“属性值”) 既可以设置元素固有的属性,也可以设置元素本来不存在的属性,比如attr()可以给下面代码div行设置固有的HTML属性,包括 ttle id class 等,也可以设置原先不存在的属性,也就是造一个新的属性,比如 index aaa 等,任何都行;而 prop( “属性名”,“属性值”)只能设置固有的HTML属性。
获取元素属性值:
attr(“属性值“)只能获取已经设置在元素身体上的属性值,包括固有属性和新增属性,没有设置的属性将无法获取到值,结果全部是undefined;
prop(“属性值”) 只能获取固有属性的属性值,新增属性的属性值无法被获取到。先解释这段话的意思,看这段代码:
<div class="cls1 cls2" id="dv"></div> $("#dv").attr("index","1")//设置新增属性 $("#dv").attr("title","1")//设置固有属性
设置之后div变为
<div class="cls1 cls2" id="dv" index="1" title="1"></div> console.log($("#dv").prop("title"));//输出结果 1 console.log($("#dv").prop("index"));//输出结果 undefined
二 撸一段代码来解释一下
A 对于固有的HTML属性
html代码
<div class="cls1 cls2" id="dv" title="我是一个div"></div>
jquery代码(输出html代码里面有的属性,attr只能获取class id title ,prop可以获取没有设置的属性 比如style)
console.log($("#dv").prop("title")); console.log($("#dv").attr("title")); console.log($("#dv").prop("style")); console.log($("#dv").attr("style"));
控制台输出
(可以获取HTML固有的属性值)
我是一个div我是一个divCSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}undefined
由此可见,1 对于固有的HTMl属性,如果在元素中设置了,那么attr 和 prop 都可以获取的到
2 对于固有的HTMl属性,如果在元素中没有设置,那么 attr 获取的结果是undefined 而prop可以获取那个属性的值。
在来看一个简单的例子
html代码
<input type="checkbox" value="复选框" id="chk"/>这是一个复选框
这段代码里面并没有设置checked属性值(checked 属性对应值有两个 true false)
jquery代码(输出html代码里面有的属性,attr只能获取type value id,prop可以获取没有设置的属性 比如checked )
console.log($("#chk").prop("value")); console.log($("#chk").attr("value")); console.log($("#chk").prop("checked")); console.log($("#chk").attr("checked"));
输出结果:
点击复选框之前输出如下:
复选框 复选框 false undefined
点击复选框之后输出如下:
复选框 复选框 true undefined
总结:
1 如果想要通过attr()获取属性值,那么该属性必须显式的设置在HTML代码中或者通过attr新增的属性才能被获取到,如果没有设置,那么将返回undefined
2 如果通过prop()获取属性值,那么该属性只能是HTMl的固有属性,无论是否显式的设置,都可以获取其对应的属性值,如果是额外增加的属性,那么将无法获取。下面来说这个问题
html代码:
<div class="cls1 cls2" id="dv" title="我是一个div"></div>
jquery代码
$("#dv").attr("index","1")//通过attr给元素设置新的属性,W3C原来不存在的属性 console.log($("#dv").prop("index")); console.log($("#dv").attr("index"));
代码执行后:
<div class="cls1 cls2" id="dv" title="我是一个div" index="1"></div>
控制台输出:
undefined 1
三 加点福利吧 css( )
jquery代码 console.log($("#dv").prop("style")); console.log($("#dv").attr("style")); console.log($("#dv").css("width"));
给div添加一些样式,无论该样式是内嵌式
html代码:
<div class="cls1 cls2" id="dv" title="我是一个div" style="width:100px;height: 50px;background-color:pink;"></div>
控制台输出
CSSStyleDeclaration {0: “width”, 1: “height”, 2: “background-color”, alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…}
width:100px;height: 50px;background-color:pink;
100px
或者内联式 <style> .cls1 { width: 100px; height: 50px; background-color: pink; } </style> div class="cls1 cls2" id="dv" title="我是一个div"></div>
控制台输出 :
CSSStyleDeclaration {alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…}
undefined
100px
小结:注意区分,属性 和 样式属性 平常说的属性包括id class style lang dir title等,然后注意样式属性指的是设置在 style 属性里面或者 style 标签里面的 ,不要搞混.css() 只能获取是 style 里面的属性值;
注意语法:获取style样式属性值:
四 在DOM中获取元素属性的文章可参阅 http://blog.csdn.net/qq_35809245/article/details/54146996
五 欢迎阅读,你辣么美丽和勤奋,祝你开心!
- jquery 属性操作 attr( ) prop()css( )区别
- jquery 属性操作(attr/removeAttr/prop/val/text)
- Jquery操作元素属性方法总结(attr()、prop())
- jquery prop attr 区别
- jquery中获取属性值的方法attr() prop()的区别
- jquery 获取 自定义属性(attr 和 prop)
- jquery 获取 自定义属性(attr 和 prop)
- jquery 获取 自定义属性(attr 和 prop)
- jquery 获取 自定义属性(attr 和 prop)用法
- JQuery中attr()和prop()方法的区别
- jQuery中的attr()和prop()的区别
- jQuery中attr()和prop()的区别,修改checked属性
- jquery中 attr()与prop()属性的区别
- JQUERY prop与attr区别
- Jquery attr与prop区别
- jquery attr和prop区别
- jquery attr() prop() 的区别
- jquery中的prop()和attr()
- Windows 10开始菜单定制工具
- java算法之 排序(插入、交换、选择、归并、分配排序)
- sql简单查询
- C/C++在VS2015下使用CURL下载文件
- 仿QQ左滑删除功能实现分析(二)-SwipeListView
- jquery 属性操作 attr( ) prop()css( )区别
- 简单的C++代码编写windows服务
- E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?
- <<UNIX环境高级编程>>之第二章理解
- C++之冒泡排序
- 『sklearn学习』GridSearchCV:系统地遍历多种参数组合
- 使用SQL查询所有数据库名和表名
- 函数指针语法梳理
- 初试django框架