jQ:html()、text()

最新推荐文章于 2021-08-16 11:46:23 发布

&XYZ&

最新推荐文章于 2021-08-16 11:46:23 发布

阅读量218

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/103993070

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

.html():

.text():

文本

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>

<body>
  <ul class="ul-1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <ul class="ul-2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src="./myjQuery.js"></script> -->
<script>
  /*
    .html():
      标签
    .text():
      文本
  */
 
  //注意：.html取值只取第一个，赋值全部都赋值一遍。
  console.log($(".ul-1 li").html())
  console.log($(".ul-1 li").html("xyz"))

  //使用性强的赋值操作（高频率使用开发期间）
  const arrName =['xyz', 'cmj', 'zgy']; 
  $(".ul-1")
    .find("li")
      .html( (index, ele) => {
          console.log(arrName[index])
          return `<strong>${arrName[index]}</strong>`
      })

  //注意：.text取值全部都取一遍，赋值全部都赋值一遍。
  console.log($(".ul-2 li").text())
  console.log($(".ul-2 li").text("xyz"))
  
  //注意：.text()与.html()不同的地方是一个是文本操作，一个标签操作
  $(".ul-2")
    .find("li")
      .text( (index, ele) => {
          console.log(arrName[index])
          return `<strong>${arrName[index]}</strong>`
      })

  
</script>

</html>

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQ:html()、text()

.html():标签.text():文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫