jQuery - 获取内容和属性

缺乏、安全感 2021-09-15 07:44 392阅读 0赞

## jQuery DOM 操作 ##

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

<table style="border:1px solid rgb(212,212,212);margin:0px;padding:0px;width:728.182px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;"> 
   <th style="border-width:0px;margin:0px;padding:10px 5px 10px 10px;font-size:13px;color:rgb(0,0,0);background-color:rgb(255,255,255);"><span style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;color:#333333;"><span style="background-color:rgb(255,255,255);"><img src="http://www.runoob.com/images/lamp.jpg" width="32" height="32" alt="lamp" style="border:0px;margin-bottom:0px;padding:0px;height:auto;"></span></span></th> 
   <td style="border-width:0px;margin:0px;padding:4px 10px 4px 0px;font-size:13px;"><span style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;color:#333333;"><span style="background-color:rgb(255,255,255);"><strong>DOM = Document Object Model（文档对象模型）</strong><br><br></span></span><p style="border:0px;line-height:2em;font-size:13px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;"><span style="color:#333333;"><span style="background-color:rgb(255,255,255);">DOM 定义访问 HTML 和 XML 文档的标准：</span></span></p><p style="border:0px;line-height:2em;font-size:13px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;"><span style="color:#333333;"><span style="background-color:rgb(255,255,255);">"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"</span></span></p></td> 
  </tr> 
 </tbody> 
</table>

## 获得内容 - text()、html() 以及 val() ##

三个简单实用的用于 DOM 操作的 jQuery 方法：

*  text() - 设置或返回所选元素的文本内容
 *  html() - 设置或返回所选元素的内容（包括 HTML 标记）
 *  val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

## 获取属性 - attr() ##

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

## text()、html() 以及 val() 的回调函数 ##

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

## 设置属性 - attr() ##

jQuery attr() 方法也用于设置/改变属性值。