11-html常用标签与界面交互总结
HTML常用标签与界面交互总结.md
一、html常用标签
-
表格标签
table
caption
thead
th
tbody
tr
td
tfoot<!DOCTYPE html> <html> <table> <caption>表格的标题</caption> <!-- 表头 --> <thead> <tr> <th>表头值字段<th> </tr> </thead> <!-- 表格内容 --> <tbody> <tr> <td>数据</td> <tr> </tbody> </table> </html>表格的跨列、跨行
在td标签里书写 colspan='列数' | rowspan='行数'
-
form表单
<form action="地址" method="提交的方式get/most" enctype="数据添加的格式"></form> -
文本框元素
<input type="text" name="" value=""> -
密码框元素
<input type="password" name="" value=""> -
单选框
单选框的name属性表示分组，name值为同一个的为一组<input type="radio" name="" value="" checked> -
复选框
<input type="checkbox" name="" value="" checked> -
下拉框
<select name=""> <option value="" selected></option> </select> -
文本域
<textarea name=""></textarea> -
文件标签
<input type="file" name=""> -
按钮
<button type="button">普通按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button>
form表单的标签都具有name 和 value 属性
二、js与html的初步交互
- javascript的三部分
| 名称 | 使用技术 |
|---|---|
| ECMAScript | js语法规范标准 |
| BOM | Browser Object Model 浏览器对象模型，用于和浏览器交互的窗口 |
| DOM | Document Object Model 文旦对象模型，用于和html文档内容交互的API接口 |
建议写在body标签的最后
- html中引入外部Js文件的方式
<script src="js路径1"></script>
<script src="js路径2"></script>
...
4.1 window对象
js所在浏览器的对象
4.2 history 对象
| 属性/函数 | 描述 |
|---|---|
| length属性 | 用于记录当前的浏览器窗口访问过几个页面 |
| forward() | 用于实现跳转到下一个访问过的页面 |
| back() | 用于实现跳转到上一个访问过的页面 |
| go(参数) | 用于前进或后退到指定位置的访问过的页面 |
4.3 location对象
| 属性/函数 | 描述 |
|---|---|
| host属性 | 用来获取当前访问页面的服务器查程序地址(ip地址+窗口) |
| hostname属性 | 用来描述当前访问页面的主机名 |
| port属性 | 用来获取当前网页的服务器的程序端口 |
| href属性 | 用来描述或设置当前访问的地址 |
| origin属性 | 用来获取当前网页请求的源地址 |
| pathname属性 | 用来获取当前请求的网页相对于服务器的地址 |
| protocol属性 | 用来获取客户端和服务器通信的协议（数据传输的格式） |
| search属性 | 用来获取当前请求的地址上的查询参数（地址上?后面部分的参数） |
| hash属性 | 用来获取当前请求地址的定位参数(地址#后面的部分) |
| reload() | 用来重新加载页面，等同于刷新按钮 |
5 document对象
代表当前流浏览器窗口中文档
| 属性/方法 | 描述 |
|---|---|
| head属性 | 获取文档的head标签元素 |
| body属性 | 获取文档的body标签元素 |
| title属性 | 获取文档的title标签的内容 |
| forms属性 | 获取当前文档中所有的form元素 |
| URL属性 | 获取当前页面的地址信息 |
| write() | 向文档的body元素中追加一个元素 |
| getElementById() | 根据ID属性查询匹配的第一个元素 |
| querySelector() | q根据选择器查新匹配的第一个元素 |
| querySelectorAll() | 根据选择器查询所有匹配的元素 |
6.1 Node节点
| 属性 | 描述 |
|---|---|
| children | 获取当前元素的所有子元素节点 |
| firstElementChild | 获取当前元素节点的第一个元素节点 |
| lastElementChild | 获取当前元素的最后一个子元素节点 |
| parentElement | 获取当前元素节点的父元素节点 |
| previousElementSibling | 获取当前元素的前一个元素节点 |
| nextElementSibling | 获取当前元素的后一个节点 |
6.2 节点对象的操作
增删改查
| 方法 | 说明 |
|---|---|
| createElement() | 创建一个指定名称的元素节点 |
| createTextNode | 创建一个包含指定文字内容的文本节点 |
| appendChild() | 在当前节点下添加一个子节点到末尾 |
| removeChild() | 从当前节点的子节点中删除匹配的子节点 |
| remove() | 把当前节点从文档中删除 |
| querySelector() | 查找匹配选择器的第一个元素节点 |
| querySelectorAll() | 查询匹配选择器的所有元素节点 |
7.1 窗体事件
| 事件名 | 说明 |
|---|---|
| load | 窗体元素内容加载完毕时触发 |
| resize | 窗体大小发生改变时触发 |
| scroll | 当滚动条滚动时触发 |
| ketDown | 当前键盘按下时触发 |
| ketUp | 当前键盘弹起时触发 |
| keyPress | 当键盘单击时触发 |
| click | 当鼠标单击时，触发，通过detail判断点击次数 |
| mousemove | 当鼠标移动时触发 |
| mouseenter | 当鼠标移入时触发 |
| mouseleave | 当鼠标移出时触发 |
| mousedown | 当鼠标按下时触发 |
| mouseup | 当鼠标松开时触发 |
7.2 元素节点事件
| 事件 | 说明 |
|---|---|
| focus | 当元素获得焦点时触发 |
| blur | 当元素失去焦点时触发 |
| select | 当元素的内容被选中时触发 |
| input | 当表单元素值发生改变时触发 |
| -change- | 当元素内容改变时触发,过时 |
| submit | 当表单提交事件时触发 |
| reset | 当表单重置时触发 |
7.3 事件的绑定
| 函数 | 说明 |
|---|---|
| addEventListener('事件名', 事件回调函数) | 绑定事件 |
| removeEventListener('事件名') | 移除事件 |
综合练习:实现表格数据的增删改查
html源代码如下:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 汽车租赁系统</title>
</head>
<body>
<!-- 顶部查询文本输入框、查询添加按钮 -->
<input type="text" name="search-photo" placeholder="支持车牌号模糊查询">
<button type="button" id="search-button">查询</button>
<button type="button" id="add-button">新增</button>
<select name="order">
<option value="1">里程降序显示</option>
<option value="2">准载人数升序显示</option>
<option value="3">价格升序显示</option>
<option value="4">复原</option>
</select>
<button type="button" id="order-button">排序</button>
<!-- 展示数据的表格 -->
<table border="1" id="show">
<!-- 设置表头信息 -->
<thead>
<tr>
<th>车牌号</th>
<th>里程数</th>
<th>准载人数</th>
<th>租赁价格</th>
<th colspan="2">
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 新增汽车信息的表单,默认不显示，点击顶部新增按钮时才显示 -->
<form id="add-form" style="display:none ;">
<table>
<caption>新增汽车信息</caption>
<tbody>
<tr>
<td align="right">汽车牌照:</td>
<td><input type="text" name="photo" placeholder="请输入汽车牌照"><span></span></td>
</tr>
<tr>
<td align="right">汽车行驶里程数:</td>
<td><input type="text" name="mile" placeholder="请输入汽车行驶里程数"><span></span></td>
</tr>
<tr>
<td align="right">汽车准载人数:</td>
<td><select name="passenger">
<option value="1">1</option>
<option value="4">4</option>
<option value="7">7</option>
</select></td>
</tr>
<tr>
<td align="right">汽车租赁价格:</td>
<td><input type="text" name="price" placeholder="请输入租赁价格"><span></span></td>
</tr>
<tr>
<td align="right"><button type="reset">重置</button></td>
<td><button type="submit" id="add-new-car-button">确认添加</button></td>
</tr>
</tbody>
</table>
</form>
<!-- 修改汽车信息的表单,默认不显示，点击编辑按钮时才显示 -->
<form id="edit-form" style="display:none ;">
<table>
<caption>修改汽车信息</caption>
<tbody>
<tr>
<td align="right">汽车牌照[不可修改]:</td>
<td><input type="text" name="photo" readonly></td>
</tr>
<tr>
<td align="right">汽车行驶里程数:</td>
<td><input type="text" name="mile" placeholder="请输入汽车行驶里程数"><span></span></td>
</tr>
<tr>
<td align="right">汽车准载人数:</td>
<td><select name="passenger">
<option value="1">1</option>
<option value="4">4</option>
<option value="7">7</option>
</select></td>
</tr>
<tr>
<td align="right">汽车租赁价格:</td>
<td><input type="text" name="price" placeholder="请输入租赁价格"><span></span></td>
</tr>
<tr>
<td align="right"><button type="reset">重置</button></td>
<td><button type="submit" id="edit-car-button">确认修改</button></td>
</tr>
</tbody>
</table>
</form>
<!-- 实现动态修改表格数据 -->
<script>
//声明一个变量来保存需要展示的数据对象，默认为空
let cars = [];
//实现载入数据的方法
let loadData = function (data) {
//保存要拼接的sql语句
let row = [];
//遍历数据数据，依次赋值到表格的某一行中：拼接html语句
data.forEach(car => {
//每个对象对应一行数据
row.push('<tr>');
row.push(`<td name="photo">${car.photo}</td>`);
row.push(`<td name="mile">${car.mile}</td>`);
row.push(`<td name="passenger">${car.passenger}</td>`);
row.push(`<td name="price">${car.price}</td>`);
row.push('<td><button type="button" id="edit-button">编辑</button></td>');
row.push('<td><button type="button" id="delete-button">删除</button></td>');
row.push('</tr>');
});
//判断数据是否为空
if (row.length == 0) {
let empty = '<tr><td align = "center" colspan="5">数据为空！</td></tr>';
//插入语句
document.querySelector('tbody').innerHTML = empty;
} else {
//插入语句到tbody中
document.querySelector('#show').querySelector('tbody').innerHTML = row.join('');
}
//初始化按钮事件
initAllEditButtonListener();
};
//给所有行的编辑按钮添加事件
function initAllEditButtonListener() {
//先找到表格里面所有的编辑和删除按钮
let editButtons = document.querySelector('#show').querySelectorAll('#edit-button');
let deleteButtons = document.querySelector('#show').querySelectorAll('#delete-button');
//给每个编辑按钮都加上事件
editButtons.forEach(editButton => editButton.addEventListener('click', function () {
//拿到当前行的数据
let carPhoto = editButton.parentElement.parentElement.firstElementChild.innerText;
let car = cars.find(car => car.photo == carPhoto);
//拿到编辑界面的元素
let editElements = document.querySelector('#edit-form').querySelectorAll('[name]');
//把当前行的数据赋值给编辑界面对应的位置上去
editElements.forEach(element => element.value = car[element.name]);
//显示编辑界面
document.querySelector('#edit-form').style.display = 'block';
}));
//给每个删除按钮添加事件
deleteButtons.forEach(deleteButton => deleteButton.addEventListener('click', function () {
//拿到当前行的数据
let carPhoto = deleteButton.parentElement.parentElement.firstElementChild.innerText;
//找到当前行元素在数组中的索引，根据索引删除
let index = cars.forEach(car => car.photo = carPhoto);
cars.splice(index, 1);
//刷新数据
loadData(cars);
}));
}
//载入原始数据
loadData(cars);
//绑定监听事件
registerListener();
//给新增按钮添加事件
let addButton = document.querySelector('#add-button');
addButton.addEventListener('click', addCarInfo);
//添加按钮的事件
function addCarInfo() {
//展示新增界面
document.querySelector('#add-form').style.display = 'block';
}
//验证数据非空
function verifyDataIsNotEmpty() {
let value = this.value;
if (value == '') {
this.nextElementSibling.innerText = '数据不能为空!';
return false;
}
this.nextElementSibling.innerText = '';
return true;
}
//给新增和编辑的组件绑定数据验证事件
function registerListener() {
//新增界面组件添加监听事件
document.querySelector('#add-form').querySelectorAll('[name]').forEach(element => {
element.addEventListener('blur', verifyDataIsNotEmpty);
element.addEventListener('input', verifyDataIsNotEmpty);
});
//编辑界面组件添加监听事件
document.querySelector('#edit-form').querySelectorAll('[name]').forEach(element => {
element.addEventListener('blur', verifyDataIsNotEmpty);
element.addEventListener('input', verifyDataIsNotEmpty);
});
}
//给新增的表单添加事件
let addForm = document.querySelector('#add-form');
addForm.addEventListener('submit', addNewCarInfo);
function addNewCarInfo(event) {
//拿到新增数据，添加到数组中，重新载入数据
let info = document.querySelector('#add-form').querySelectorAll('[name]');
//非空校验
let flag = true;
//验证车牌号:首为为汉字，第二位为大写字母，后面5个数字和大写字母的组合
let regStr = /^[\u4e00-\u9fa5][A-Z][0-9A-Z]{5}$/;
//数据不为空，才添加
let car = {};
info.forEach(element => {
car[element.name] = element.value;
if (element.value == '') {
flag = false;
};
});
//车牌格式正确,才添加
if(!regStr.test(car.photo)){
flag=false;
info[0].nextElementSibling.innerText = '车牌号格式不正确!';
}
//数据不为空，格式正确，进行添加操作
if (flag) {
cars.push(car);
loadData(cars);
//新增成功，新增界面隐藏
document.querySelector('#add-form').style.display = 'none';
//重置信息
document.querySelector('#add-form').reset();
} else {
//新增成功，新增界面隐藏
document.querySelector('#add-form').style.display = 'block';
}
//去掉按钮默认的跳转
event.preventDefault();
}
//给编辑界面的确定按钮添加事件
let editCarButton = document.querySelector('#edit-car-button');
editCarButton.addEventListener('click', editCarInfo);
function editCarInfo(event) {
//拿到新增数据，添加到数组中，从新载入数据
let info = document.querySelector('#edit-form').querySelectorAll('[name]');
let newCar = {};
info.forEach(element => newCar[element.name] = element.value);
//在数据数值找到对应的车牌号修改数据
let index = cars.findIndex(car => newCar.photo == car.photo);
//替换数据
cars.splice(index, 1, newCar);
loadData(cars);
//修改成功，新增界面隐藏
document.querySelector('#edit-form').style.display = 'none';
//重置信息
document.querySelector('#edit-form').reset();
//去掉按钮默认的跳转
event.preventDefault();
}
//给查询按钮添加事件
let searchButton = document.querySelector('#search-button');
searchButton.addEventListener('click', function () {
//拿到查询条件
let condition = document.querySelector('[name="search-photo"]').value;
let conditionCar = [];
//如果条件为空，则显示全部汽车信息
if (condition == '') {
loadData(cars);
}
//条件不为空，按照条件查询：包含
cars.forEach(car => {
if (car.photo.includes(condition)) {
conditionCar.push(car);
}
});
//显示筛选过的信息
loadData(conditionCar);
});
//里程降序排列事件
let order = document.querySelector('#order-button');
order.addEventListener('click', function () {
let condition = document.querySelector('[name="order"]');
//用副本排序，然后显示[数组的深拷贝]
let copy = cars.slice(0);
if (condition.value == 1) {
//里程降序
copy.sort((prev, next) => next.mile - prev.mile);
} else if (condition.value == 2) {
//准载人数升序
copy.sort((prev, next) => prev.passenger - next.passenger);
} else if (condition.value == 3) {
//价格升序
copy.sort((prev, next) => prev.price - next.price);
} else {
//复原:
loadData(cars);
}
loadData(copy);
});
</script>
</body>
</html>
浙公网安备 33010602011771号