本文摘自PHP中文网,作者藏色散人,侵删。
jquery获取标签内容的方法:1、使用“$('#id').val()”方法获取标签的value值;2、通过“$('#id').text()”方法获取标签中间的文本;3、通过“$('#id').html()”方法获取标签中的html内容。
推荐:《javascript基础教程》
使用jquery获得标签的值或元素的内容
1 2 3 4 5 6 7 | $( '#标签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。
jquery提供了三个获得内容的方法: text()、html() 以及 val(),其中前两个可用于解决本问题:
$( "label#userid" ).text();
$( "label#userid" ).html();
|
下面给出实例演示:分别使用以上两种方法获取label标签的内容,注意最终结果的区别
创建Html元素
1 2 3 4 5 6 7 | <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样式
1 2 3 4 5 | 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代码
1 2 3 4 5 6 7 8 | $( function (){
$( "input:button.btn1" ).click( function () {
alert($( "label#userid" ).text());
});
$( "input:button.btn2" ).click( function () {
alert($( "label#userid" ).html());
});
})
|
观察效果
使用text()方法获取标签内的内容
以上就是jquery如何获取标签内容的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jQuery如何判断元素内容是否为空
一起来聊聊jQuery、javascript与js三者间的区别
jQuery怎么去除css属性
jQuery如何判断某个标签id是否存在
innerhtml与jQuery里html()的区别是什么
jQuery中的not怎么用
jQuery日期控件怎么用
jQuery读取json乱码怎么办
jQuery如何获取class的值
jQuery :lang()怎么用
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jquery如何获取标签内容