jQuery - HTML DOM 操作（一）

jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，显得更加地简便。

本文目录：

1. 设置或获取内容；
2. 设置或获取属性。

设置或返回内容

jQuery 中提供了 html()、tetx()、val() 这三个方法，来设置或返回 HTML 元素的内容。

html()

设置或返回所选元素的内容（包括 HTML 标签），相当于原生 JavaScript 中的 innerHTML。

代码：

    
    
    



    
这是一个段落。

    
这是一个段落。

获取内容
设置内容

效果演示：

html().gif

text()

设置或返回所选元素的内容，相当于原生 JavaScript 中的 innerText。

代码：

    
    
    



    
这是一个段落。

    
这是一个段落。

获取内容
设置内容

效果演示：

text().gif

从上面两个示例就可以看出 html() 和 text() 两者的区别，html() 可以获取到标签，而 text() 不行；同样，使用 html() 可以往 HTML 文档里写入标签，而 text() 则不行，当你试图写入标签时，其实写入的只是普通的字符串。

val()

设置或返回所选置或返回表单字段的值，相当于原生 JavaScript 中的 value。

代码：

    
    
    




获取内容
设置内容

效果演示：

val().gif

设置或获取属性

1. 设置或获取属性有两个方法，分别是 attr() 和 prop()，两者的区别：

• 对于 HTML 元素本身就带有的固有属性来说，使用 prop()；
• 对于 HTML 元素的自定义属性来说，使用 attr()；
• 添加属性名称该属性就会生效时使用 prop()；
• 带有 true 和 false 两个属性值的属性使用 prop()；
• 其他则使用 attr()；
• 更多请看 attr() - 愚人码头 以及 prop() - 愚人码头；

• 官方建议：

  
  
  

  attr_prop.png

2. 删除属性使用 removeAttr() 和 removeProp()。

代码：

    
    
    
    


菜鸟教程/w3school
获取属性
更改链接地址
设置多个属性
删除属性

效果：

属性.gif

---

参考资料：

• [jQuery函数attr和prop的区别](http://zhidao.baidu.com/link?
  url=MHDmtUt3V00mSn0MkCEdMtl3GnOQmlJ3rgO4XWqvt1RG8sO6-
  ZM8grtzDo1N38lU0Cfcb3EnEZSDWCzgHCfMT5INAGS5_Amn-Ek_KKkDjy)
• jQuery API中文文档 - 愚人码头
• jQuery 中 attr() 和 prop() 方法的区别
• jquery中prop()方法和attr()方法的区别浅析