jQuery的DOM操作之取值/赋值（1）

最新推荐文章于 2023-08-03 15:30:00 发布

桃花扇J

最新推荐文章于 2023-08-03 15:30:00 发布

阅读量759

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_44584442/article/details/104647971

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

.html()方法

作用：获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容

【例】取值

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
    <script src="./jquery.js"></script>
    <script>
        //.html()
        //取值
        console.log($('ul').html());
        console.log($('ul li').html());

    </script>
</body>

结果：console打印结果

【例】常数赋值

html代码不变，js代码如下

$('ul').html('9');

结果：ul内的内容变为9

【例】循环常数赋值

js代码

$('ul li').html('9');

结果：循环赋值使所有li元素的内容被赋值为9

【例】函数赋值

var arr = ['第一名：小窦','第二名：小景','第三名：小明']
$('ul li').html(function (index,ele) {
    return arr[index];
}).css({color: 'red'})

结果，页面内容123改变如下

【例】元素赋值

$('ul li').html("<p style='color:steelblue'>山水万程，皆要好运</p>");

结果：HTML中加入了p标签

【例】字符串的拼接

var arr = ['第一名：小窦','第二名：小景','第三名：小明']
$('ul li').html(function (index,ele) {
    return '<p style="color:steelblue">' + arr[index] + '</p>';
})

结果

.text()

作用：得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

【例】匹配后代的文本

console.log($('ul').text());

结果：打印如下

【例】匹配自己的文本

console.log($('ul li').text());

结果：打印123

【例】赋值

var arr = ['第一名：小窦','第二名：小景','第三名：小明'];
$('ul li').text(function (index,ele) {
    return arr[index];
}).css({color: 'steelblue'})

结果：li中的文本内容改变

.size()

作用：相当于length

【例】

console.log($('ul li').size());

结果打印3

桃花扇J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的DOM操作之取值/赋值（1）

介绍了.html()/.text()/.size()方法
复制链接

扫一扫

专栏目录

jQuery的DOM操作之取值/赋值（1）

.html()方法

.text()

.size()

“相关推荐”对你有帮助么？