我们来了解下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> </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>