jQuery 对元素属性的操作~ 一篇就够.
主要讲解三个JQ的方法:
我们先来看看原生 JS 对元素操作有什么:
几种属性操作
=> 原生属性, id class src ...
=> 自定义属性, getAttribute() ...
jQuery 有三种操作属性的方法
=> attr() 和 removeAttr()
=> prop() 和 removeProp()
=> data() 和 removeData()
1. attr() 和 removeAttr()
1-1. attr()
=> 语法: 元素集合.attr(属性名)
-> 获取元素的该属性, 主要用来获取标签属性, 包括一些自定义属性
=> 语法: 元素集合.attr(属性名, 属性值)
-> 设置元素的标签属性, 只是把属性设置在标签上, 当作一个自定义属性使用
-> 对于原生属性有些有用, 有些没有用()
=> 注意:
-> 设置的时候, 需要两个参数
-> 设置的不管是什么数据类型, 都会变成字符串类型
-> 有的原生属性好使, 有的不好使 (自己试一下input的单选框即可)
1-2. removeAttr()
=> 语法: 元素集合.removeAttr(属性名)
-> 删除元素身上的自定义属性 id class 等属性也可以删除
-> 多用于删除 attr 方法设置的属性
2. prop() 和 removeProp()
2-1. prop()
=> 语法: 元素集合.prop(属性名)
-> 获取元素的原生属性, 也可以获取元素的自定义属性
-> 但是 attr 方法设置的自定义属性他获取不到
=> 语法: 元素集合.prop(属性名, 属性值)
-> 主要设置元素的原生属性, 也可以设置自定义属性
-> 他设置的自定义属性不会显示在标签上, 而是存储在元素身上 (意思是自定义的属性(原生的会!!)他不会在标签上显示 他会在元素里面显示(可以打印元素后自己翻翻)!! 但是可以用prop正常获取到)
=> 注意:
-> 设置的自定义属性不会显示在标签上 (!!)
-> 你设置的时候是什么数据类型, 获取到的时候还是什么数据类型 (attr 始终返回的是string类型 但是我prop返回的就是你设置的什么属性我就返回什么属性)
-> attr 设置的自定义属性他拿不到(不包括原生的属性 意思是 你用attr定义的自定义属性 我prop是获取不了的)
2-2. removeProp()
=> 语法: 元素集合.removeProp(属性名)
-> 删除元素的属性, 但是只能删除由 prop 设置的自定义属性
-> 原生属性 id class ... 不能删除
可以理解为 只能删除常用Prop自定义的属性 其他一律不能删
3. data() 和 removeData()
3-1. data()
=> 语法: 元素集合.data(属性名)
-> 获取使用 data() 方法存储的数据, 获取元素身上 data-xxx 的属性 记住啊! 属性名字不用加 data- 前缀!!
=> 语法: 元素集合.data(属性名, 属性值)
-> 设置的时候, 只是把数据存储在元素身上的某一个对象空间内(意思是不会在标签上显示 他会在元素中自动生成一个我也看不懂的键 - 值 存储)
-> 但是不会出现在标签上, 不会由 data-xxx 的属性出现
=> 注意:
-> 可以获取元素标签上 data-xxx 的属性
-> 但是不能设置标签上 data-xxx 的属性
3-2. removeData()
-> 只能删除由 data() 方法设置的属性 意思是 你是data 方法设置的我才可以用removeData方法移除 不然的话 你直接在标签上设置的 data-xxx 就不能移除标签上的任何 data-xxx
-> 不能删除元素身上 data-xxx 的属性
注意啊 都是有隐式迭代的啊~