jQ:html()、text()

曾经终败给现在 2023-06-30 06:58 13阅读 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>
      /*
        .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>

jQ:html()、text()

发表评论取消回复

还没有评论，来说两句吧...

相关阅读