jquery 基本讲解和表格添加数据替换表格以及清空

我们来了解下jqery

jQuery 是一个 JavaScript 库。

JavaScript query 本质上是一个外部的js 如果某个页面逻辑太多，如果js全部写在一个页面，

原则：高内聚，低耦合。

类库--->一般是将基础的一些东西进行了封装，简化了一些东西。

jQuery 极大地简化了 JavaScript 编程。

类库：一般就是将一个或者某些功能进行封装。

好处是，方便。坏处：扩展性差

//首先要导入jar包

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

//简单的案例

<center>
 <input type="button" id="btn1" value="警示框" /><br />
 <input type="text" id="name" value="" /><br />
 <input type="password" id="pwd" value="" /><br /><span>&nbsp;</span>
 <table border="1px" cellspacing="0px" cellpadding="0px" id="tab">
  <tr><th>姓名</th><th>年龄</th></tr> 
  <input type="button" id="add" value="添加" />
 </table>
 <hr />
 <input type="button" id="sc" value="删除" />
 <input type="button" id="th" value="替换" />
 
 </center>
 <script>
  //添加操作  拿到添加按钮的id并设置click监听事件
  $("#add").click(function(){
   //拿到name输入框的ID和内容
   var name = $("#name").val();
   //拿到密码输入框的ID和内容
   var pwd = $("#pwd").val();
   //拿到table表的ID并且开始添加数据
   $("#tab").append("<tr><td>"+name+"</td><td>"+pwd+"</td></tr>")
  });
  //清空操作
  $("#sc").click(function(){
   //没有delete操作只有清空所以会清除所有的数据但是标签还在
   $("#tab").remove();
  });
  //修改操作
  $("#th").click(function(){
   //标签除了可以直接写
      //还可以是使用document创建出来的
   //还可以是document.getElementById()/$(选择器)
   $("#tab").replaceWith("<a href='#'>我是超链接</a>")
  });
  
 </script>