jquery支持所有的css选择器
1.创建一个元素 2.添加元素 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <!-- 你的名字 -->
  12.     </div>
  13.     <script>
  14.         /* 
  15.         jquery支持所有的css选择器
  16.          */
  17.         /* 1.创建一个元素  2.添加元素 */
  18.         var http = "你的名字"
  19.         var p =`<p>${http}</p>`;
  20.         $("#app").append(p)
  21.     </script>
  22. </body>
  23. </html>

jQuery遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        .item{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 1 cheng 18
             2 li 17 -->
    </div>
    <script>
        var arr = [
            {name:"cheng",age:18},
            {name:"li",age:17}
        ]
        arr.forEach((item,index)=>{
            var html = `
              <div class="item">
                  <span>${index+1}</span>
                  <span >${item.name}</span>

                  <span>${item.age}</span>
              </div>
            `
            $("#app").append(html)
        })
    </script>
</body>
</html>