• 技术文章 >web前端 >js教程

    jquery如何获取标签内容

    藏色散人藏色散人2020-11-17 10:29:46原创51

    jquery获取标签内容的方法:1、使用“$('#id').val()”方法获取标签的value值;2、通过“$('#id').text()”方法获取标签中间的文本;3、通过“$('#id').html()”方法获取标签中的html内容。

    推荐:《javascript基础教程

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

    $('#标签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的文本
    $("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()方法获取标签内的内容

    以上就是jquery如何获取标签内容的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:jquery
    上一篇:jquery取值如何取整 下一篇:jquery怎样才能判断元素是否绑定事件
    第14期线上培训班

    相关文章推荐

    • jquery怎么判断值为空• jQuery有哪些选择器• jquery有哪些表单选择器• 如何用jquery判断数据是否加载完成

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网