10. jQuery 对元素属性的操作~ 一篇就够.

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 的属性 

---

 

 注意啊 都是有隐式迭代的啊~

属性操作大概讲那么多 其实主要还是他们的区别  谁能删谁的 谁不能删谁的  我设置谁的 我怎么设置的  搞懂即可