Educoder jQuery DOM操作

最新推荐文章于 2024-12-23 10:52:40 发布

川尚丘库

最新推荐文章于 2024-12-23 10:52:40 发布

阅读量2.2k

点赞数 2

分类专栏：（jQuery+Bootstrap) of Educoder 文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_65391975/article/details/128190974

版权

（jQuery+Bootstrap) of Educoder 专栏收录该内容

5 篇文章

订阅专栏

本文通过四个实战案例介绍如何使用 jQuery 进行 DOM 操作，包括获取和设置内容及属性、添加和删除元素等关键技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Educoder jQuery DOM操作

Educoder jQuery DOM操作

第1关：jQuery获取内容和属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
    .container{
        width: 300px;
        margin: 30px auto;
    }
    .box{
        border: 2px solid #000;
        background: #eee;
        padding: 10px;
    }
    p{
        font-size: 18px;
    }
    input{
        height: 30px;
    }
    button{
       margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
       <button class="btn1">获取文本内容</button>
        <button class="btn2">获取内容</button>
        <button class="btn3">获取表单value值</button>
       <div class="box">
           <p>我是第一行</p>
           <p>我是第二行</p>
           输入框:<input class="getVal" type="text" value="Hello Educoder"/>
       </div>

    </div>
     
   <script>

    $(function(){        
        //------------ Begin -----------
        $(".btn1").click(function() {
            alert($(".box").text());
        });
        $(".btn2").click(function() {
            alert($(".box").html());
        });
        $(".btn3").click(function(){
            var getValue = $(".getVal").val() + "---" + $(".getVal").attr("type");
            alert(getValue);
        });
        
        
        
        //------------ End --------------
    })

   </script>
</body>
</html>

第2关：jQuery设置内容和属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
    .container{
        width: 300px;
        margin: 30px auto;
    }
    .box{
        border: 2px solid #000;
        background: #eee;
        padding: 10px;
    }
    p{
        font-size: 18px;
    }
    input{
        height: 30px;
    }
    button{
       margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
       <button class="btn1">填充文本内容</button>
        <button class="btn2">填充内容</button>
        <button class="btn3">填充value值</button>
       <div class="box">
           <p class="first"></p>
           <p class="second"></p>
           输入框:<input class="getVal" type="text" value="Hello Educoder"/>
       </div>

    </div>
     
   <script>

    $(function(){        
        //------------ Begin -----------
         $(".btn1").click(function() {
            $(".first").text("我是第一行");
        });
        $(".btn2").click(function() {
            $(".second").html("<span>我是第二行</span>");
        });      
        $(".btn3").click(function() {
            var typeAttr = $(".getVal").attr("type","password");
            $(".getVal").val(typeAttr);
        });   
        
        
        
        //------------ End --------------
    })

   </script>
</body>
</html>

第3关：jQuery添加元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr id="tb-head">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td>洛杉矶</td>
  </tr>
  <tr>
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td>河南</td>
  </tr>
</table>
    <script>    
    $(function(){
      var count = 4;        
      //---------表格下面添加【添加内容】按钮-------------
	  //------------------- Begin ---------------
	    var addBtn ='<button class="btn">添加内容</button>';
        $(".tab").after(addBtn);
        
      //------------------- End -----------------
       function loadData(){
          for(var i =0; i<2; i++){
            count ++;
             var tr = '<tr>' +
                  '<td>' + count + '</td>'+
                  '<td>王五</td>'+
                  '<td>男</td>'+
                  '<td>26</td>'+
                  '<td>河南</td>'+
                '</tr>';

         //---------表格底部添加内容------------
		 //------------------- Begin ---------------
          $(".tab").append(tr); 
           
         //------------------- End -----------------

          }
       }
        //-------------点击事件-----------------
		//------------------- Begin ---------------
		$(".btn").click(function() {
            loadData();
        });
        
       //------------------- End -----------------
    })
    </script>

</body>
</html>

第4关：jQuery删除元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr class="line">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th class="final">住址</th>
  </tr>
  <tr class="line">
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td class="final">北京</td>
  </tr>
  <tr class="line">
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td class="final">洛杉矶</td>
  </tr>
  <tr class="line">
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td class="final">上海</td> 
  </tr>
  <tr class="line">
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td class="final">河南</td>
  </tr>
</table>
<button class="btn1">删除最后一行</button>
<button class="btn2">删除最后一个住址</button>
    <script>
    //-----------begin-----------
    $(".btn1").click(function() {
        $(".line").last().remove();
      });
    $(".btn2").click(function() {
        $(".final").last().empty();
    });


    
    
    //------------end------------  
    </script>
    
</body>
</html>