jq: 属性-文本

最新推荐文章于 2024-09-08 09:29:59 发布

原创最新推荐文章于 2024-09-08 09:29:59 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

.text()

类似原生js中的innerText属性

可以取值也可以赋值

        <div id="test">Hello, world!</div>
<div id="test1">改变我的值</div>
<button id="btn">点击打印</button>
<script src="../jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function() {
        console.log( $('#test').text() );
        $('#test1').text('我使用test()改变了你');
    })
</script>

参数可以传字符串可以传函数

函数默认把return值当做字符串处理，也可以使用对应参数index(索引),ele(值)

        <div id="test">Hello, world!</div>
<div id="test1">改变我的值</div>
<button id="btn">点击打印</button>
<script src="../jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function() {
        $('#test').text(function() {
            return '233';
        });
        $('div').text(function(index, ele) {
            if(index == 1) {
            return "在text中使用函数"
            }
         });
    })
</script>

.html()

类似innerHTML属性，可以添加/取值标签和内容，用法和.text()方法一样，唯一的区别在text方法取值赋值均一组，html方法取值取一个，赋值赋一组。

        <div class="test2"></div>
<div class="test2">Hello, world!</div>
<div id="test1">改变我的值<b>我是span</b></div>
<button id="btn">点击打印</button>
<script src="../jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function() {
        $('.test2').html('666');
        console.log($('#test1').html())
    })
</script>

.val()

类似js中的value属性，在form表单的元素中可以取值赋值

使用和html()方法一样，取值取一个，赋值赋一组

        <input class="test2" type="text" value="1111">
<button id="btn">点击打印</button>
<script src="../jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function() {
        console.log($('.test2').val());
        $('.test2').val('666');
    })
</script>