从零玩转jQuery-属性相关

属性和属性节点

• 什么是属性?
  • 属性就是对象身上的变量
  • 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)

image.png

• 什么是属性节点?
  • 在html中编写的所有标签，里面的属性都是属性节点
    • // 这里的class和nj就是属性节点

image.png

• 如果操作属性?
  • 添加或修改属性(没有就会添加,有就会修改)
    • 对象.属性名称 = 值;
    • 对象["属性名称"] = 值;
  • 获取属性
    • 对象.属性名称
    • 对象["属性名称"]

• 如何操作属性节点?
  • 获取属性节点
    • DOM对象.getAttribute("属性节点名称")
  • 设置属性节点
    • DOM对象.setAttribute("属性节点名称", "值");

---

jQuery中的attr和prop方法

• attr(name|pro|key,val|fn)方法
  • 用于设置或获取属性节点的值

• removeAttr(name)方法
  • 用于删除指定属性节点

• prop(n|p|k,v|f)方法
  • 用于设置或者获取元素的属性值

• removeProp(name)方法

• attr方法和prop方法区别
  • 既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
  • 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
  • 因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

jQuery增删Class

• jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值
• addClass(class|fn)
  • 给元素添加一个或多个类

    
    
    
    
    


添加
删除
切换

• removeClass([class|fn])
  • 删除元素的一个或多个类

• toggleClass(class|fn[,sw])
  • 添加或删除一个类(存在就删除不存在就添加)

---

jQuery代码/文本/值

• html([val|fn])
  • 添加或获取元素中的HTML

    
    
    
    


添加html
获取html
添加文本
获取文本

• text([val|fn])
  • 添加或获取元素中的文本
  • text方法能做的html方法都能做,所以一般使用html方法即可

• val([val|fn|arr])
  • 添加或获取元素value属性的值