Question

怎么使用jquery获得标签的值或元素的内容

Answer 1

怎么使用jquery获得标签的值或元素的内容？

1. jquery提供了三个获得内容的方法， text()、html() 以及 val()，其中前两个可用于解决本问题，$("label#userid").text();   // 首选，获取label的文本，$("label#userid").html();   // 也可以实现，获取label标签内的所有html标记，一般情况改下label标签内就是文本，所以等效上面的方法。
   实例演示：

创建Html元素
<div class="box">
<span>点击按钮获取label中内容：</span><br>
<div class="content">
<label id="userid">输入用户名</label><input type="text">
</div>
<input type="button" value="获取label中的内容">
</div>

2设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
h3{display:inline-block;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3编写jquery代码
$(function(){
$("input:button.btn1").click(function() {
alert($("label#userid").text());
});
$("input:button.btn2").click(function() {
alert($("label#userid").html());
});
})

化学元素(Chemical element)就是具有相同的核电荷数(即核内质子数)的一类原子的总称，从哲学角度解析，是原子的电子数目发生量变而导致质变的结果。

关于元素的学说，即把元素看成构成自然界中一切实在物体的最简单的组成部分的学说。早在远古就已经产生了，不过，在古代把元素看作是物质的一种具体形式的这种近代观念是不存在的。无论在我国古代的哲学中还是在印度或西方的古代哲学中，都把元素看作是抽象的、原始精神的一种表现形式，或是物质所具有的基本性质。

Answer 2

$('#标签id').val() 可以用来获取标签的value值，比如 input 标签的value值可以用它获取；
$('#标签id').text()可以用来回去标签中间的文本，比如 <span>值1</span>就可以用它获取到值1；
$('#标签id').html() 可以用来获取标签中间的html内容，比如<div id="div1"><span>123</span></div>可以用$('#div1').html()获取到<span>123</span>；
$('#标签id').attr('属性名')可以用它来获取标签的指定属性的值，比如<a href="xxx.aspx">xxx</a>就可以用.attr('href')获取到xxx.aspx。

Answer 3

jquery提供了三个获得内容的方法： text()、html() 以及 val()，其中前两个可用于解决本问题：
$("label#userid").text(); // 首选，获取label的文本
$("label#userid").html(); // 也可以实现，获取label标签内的所有html标记，一般情况改下label标签内就是文本，所以等效上面的方法
下面给出实例演示：分别使用以上两种方法获取label标签的内容，注意最终结果的区别

创建Html元素
<div class="box">
<span>点击按钮获取label中内容：</span><br>
<div class="content">
<label id="userid">输入用户名</label><input type="text">
</div>
<input type="button" value="获取label中的内容">
</div>
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
h3{display:inline-block;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
编写jquery代码
$(function(){
$("input:button.btn1").click(function() {
alert($("label#userid").text());
});
$("input:button.btn2").click(function() {
alert($("label#userid").html());
});
})
观察效果
使用text()方法获取标签内的内容