jq: 属性-文本

2024-08-20 16:48

文章标签 属性文本 jq

本文主要是介绍jq: 属性-文本，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

.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>