jQ:html()、text() | 易学教程

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

来源：CSDN

作者：&XYZ&

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

标签

赋值