jQuery获取元素的属性attr、值value、text和html

当前位置：洪哥笔记 > DHTML > jQuery获取元素的属性attr、值value、text和html

关键词

jQuery 属性

摘要

本文介绍在jQuery中如何获取元素的属性attr、值value、text和html。

获取元素的属性，使用attr方法，语法：
.attr('属性名');
多提一句：如果是要设置属性值，则使用attr('属性名','属性值');

获取元素的value值，多用于form控件，普通元素中没有。
.val()

获取元素的文本内容，即标签内部的文本内容，它会过滤掉标签中的子标签。语法：
.text()

获取元素的内部html信息，这个跟text()很像，但不过滤里面的html标签。语法：
.html()

下面举一个例子来说明：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gbk" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<span id="s" data="abc"><i>xxx</i></span>

<p>
<a id="btn">show result</a>

<script>
$(function(){
   $("#btn").on('click', function(){
       alert('attr: ' +　$('#s').attr('data')
           +'\r\n' + 'val(): ' + $('#s').val()
           +'\r\n' + 'text(): ' + $('#s').text()
           +'\r\n' + 'html(): ' + $('#s').html());
   });
});
</script>

</body>
</html>

最终的显示结果为：
attr: abc
val():
text(): xxx
html(): <i>xxx</i>