## 1. DOM
### 1.1. DOM简介
> 1. DOM是Document Object Model的缩写，即文档对象模型。
> 2. DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
> 3. 浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的， 而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。
### 1.2 节点层次
HTML网页是可以看做是一个树状的结构，如下：
~~~
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
~~~
这是一颗DOM树，是由多个节点（Node）组成的，节点的类型有很多种。节点最多有一个父节点，可以有多个子节点。
**HTML DOM 定义了访问和操作HTML文档的标准方法。**
1. document
代表当前页面的整个文档树。
2. 使用document访问属性
all
forms
images
links
访问方法(最常用的DOM方法)
~~~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var dom = window.document;// 获取dom 树, 获取document 对象.
function testAll() {
var allArr = dom.all; // all 获取页面中所有的标签节点
alert(allArr.length);
for (var i = 0; i < allArr.length; i++) {
alert(allArr[i].nodeName); // .nodeName获取节点名称
}
}
// anchors 获取页面中的所有的锚连接.
function testAnchors() {
var anArr = dom.anchors;
alert(anArr.length);
}
// froms 获取所有的form 表单对象
function testForms() {
var formArr = dom.forms;
alert(formArr.length);
alert(formArr[0].nodeName);
}
// images
function testImages() {
var imageArr = dom.images;
alert(imageArr.length);
}
// links 获取页面的超链接.
function testLinks() {
var linkArr = dom.links;
//alert(linkArr.length);
for (var i = 0; i < linkArr.length; i++) {
//alert(linkArr[i].nodeName);
}
for (var i in linkArr) {
alert(i);
}
}
//testLinks();
// 获取页面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">百度两下</a>
<a href="http://www.baigu.com">百谷一下</a>
<a name="one"></a>
<a name="two"></a>
<form>
<label>姓名:</label><!--默认不写type 就是文本输入框-->
<input type="text"/>
</form>
</body>
</html>
~~~
2.3. 获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
Var dom = window.document;
function testByTagName() {
var iptArr = dom.getElementsByTagName("input");
for (var i = 0; i < iptArr.length; i++) {
alert(iptArr[i].value);
}
}
// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2，得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() {
var user = dom.getElementById("username");
alert(user.value);
user.value = "rose";
}
//testById();
//3. 获取所有标签name 为like的元素.获取value值.
function testByName() {
var likeArr = dom.getElementsByName("like");
for (var i = 0; i < likeArr.length; i++) {
alert(likeArr[i].value);
}
}
testByName();
2.3.1. 案例
显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue
2.3.2. 属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全不选的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getSum()
{
/*
需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。
思路：
1，先获取所有的checkbox对象。
2，对这些对象进行遍历。判断哪个对象被选中。
3，对被选中对象的金额进行累加。
4，显示在按钮右边。
*/
var items = document.getElementsByName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
{
sum += parseInt(items[x].value);
}
}
var str = sum+"元";
document.getElementById("sumid").innerHTML = str.fontcolor('red');
}
function checkAll(node)
{
/*
需求：通过全选checkbox，将其他条目都选中。
思路：
只要将全选checkbox的checked状态赋值给其他的item checked状态即可。
*/
//var allNode = document.getElementsByName("all")[index];
var items = document.getElementsByName("item");
for(var x=0; x<items.length; x++)
{
items[x].checked = node.checked;
}
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
</body>
</html>
2.4. 通过节点关系查找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
2.4.1. 获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素，例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//节点和节点之间的关系.
//获取dom树
var dom = window.document;
//获取指定id 的标签节点.
function test() {
var form = dom.getElementById("form1");
//获取父节点.
//alert(form.parentNode.nodeName);
// 获取子节点(Node 包含 文本,注释,标签)
var childArr = form.childNodes;
//alert(childArr.length);
/*
for (var i = 0; i < childArr.length; i++) {
alert(childArr[i]);
}
*/
// 获取第一个孩子.
var first = form.firstChild;
//alert(first);
//最后一个孩子.
var last = form.lastChild;
//alert(last);
// 获取下兄弟(获取弟弟)
var sibling = form.nextSibling;
//alert(sibling.nodeName);
// 获取大哥
var previous = form.previousSibling;
alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<a>哈哈</a>
<form id="form1">
<label>姓名:</label>
<input type="text" />
</form>
</body>
</html>
2.5. 节点操作
2.5.1. 创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
///创建一个文本输入框.
// 获取dom 树.
var dom = window.document;
// 获取body 节点.
var body = dom.body;
// 创建标签节点 ,注意: 节点创建成功,需要挂载在DOM 树中, 指定父节点.
function testCreateElement() {
// 创建了一个input 节点.
var ipt = dom.createElement("input");
//alert(ipt);
// 指定节点存放的位置. 指定父节点.挂载在父节点下(认爹)
ipt.setAttribute("id", "username");
// 父节点挂载子节点.
body.appendChild(ipt);
}
// 创建文本? 文本节点
function testCreateTextNode() {
var text = dom.createTextNode("姓名:");
//挂载该节点. 该方法默认尾部追加
body.appendChild(text);
}
// 创建标签节点,是一个按钮
function testCreateButton() {
var ipt = dom.createElement("input");
// 设置节点的属性.
ipt.setAttribute("type", "button");
ipt.setAttribute("value", "按钮");
//挂载节点
//body.appendChild(ipt);
// 指定位置的.
// 获取位置.
var user = dom.getElementById("username");
// 参数一: 需要添加的新节点, 参数二:指定位置.先元素会添加到在改位置之前
body.insertBefore(ipt, user);
//按钮添加事件. 节点对象.事件名 的形式添加事件
ipt.onclick = test;
ipt.re
}
function test() {
// 删除节点.
this.parentNode.removeChild(this);
}
testCreateTextNode();
testCreateElement();
testCreateButton();
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
</body>
</html>
2.5.2. 把新节点放到指定位置
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。
// 参数1：要插入的节点 参数2：插入目标元素的位置
2.5.3. 移除某个节点
elt.removeChild(eChild) 删除指定的子节点
示例：
var by = document.forms[0]
var ip = document.createElement("input");
document.createTextNode() ;
ip.setAttribute("type","file");
by.appendChild(ip);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发布一个二手汽车消失</title>
</head>
<body>
<table>
<tr>
<td>
<input type="file" />
</td>
<td>
<a href="#" onclick="delFile(this)" >删除附件</a> <!--谁点击了该a标签则代表了谁 -->
</td>
</tr>
<tr>
<td colspan="2">
<input id="b1" type="button" value="添加附件" onclick="addFile()" />
</td>
</tr>
</table>
</body>
<script>
function delFile(aNode){
var tbody = document.getElementsByTagName("tbody")[0];
// aNode 是一个a标签， a的父节点td tr
var tr = aNode.parentNode.parentNode;
tbody.removeChild(tr);
}
function addFile(){
var tbody = document.getElementsByTagName("tbody")[0];
//创建节点
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var button = document.getElementById("b1");
td1.innerHTML = "<input type='file' name='image'/>";
td2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
tr.appendChild(td1);
tr.appendChild(td2);
tbody.insertBefore(tr,button.parentNode.parentNode);
}
</script>
</html>
2.5.4. 案例
1. 生成二级城市联动菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select{
width:100px;
}
</style>
<script type="text/javascript">
function selcity()
{
//定义数据对应关系
//城市有很多，所以通过数组存储。每一个省对应一个城市数组，怎么建立对应关系呢？
//每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。
var arr = [['--选择城市--'],['海淀区','朝阳区','东城区','西城区']
,['沈阳','大连','鞍山','抚顺']
,['济南','青岛','烟台','威海']
,['石家庄','廊坊','唐山','秦皇岛']];
//获取选择的省的角标。
var selNode = document.getElementById("selid");
var index = selNode.selectedIndex;
var cities = arr[index];
var subSelNode = document.getElementById("subselid");
//有更简单清除方式，只要改变下拉菜单的长度即可。
subSelNode.options.length = 0;
/*
//清除上一次选择的子菜单内容。
for(var x=1; x<subSelNode.options.length;)
{
alert(subSelNode.options.length+"..."+subSelNode.options[x].innerHTML+"..."+x);
subSelNode.removeChild(subSelNode.options[x]);
}
*/
for(var x=0; x<cities.length; x++)
{
var optNode = document.createElement("option");
optNode.innerHTML = cities[x];
subselid.appendChild(optNode);
}
}
</script>
</head>
<body>
<select id="selid" onchange="selcity()">
<option>--选择省市--</option>
<option>北京市</option>
<option>辽宁省</option>
<option>山东省</option>
<option>河北省</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
</html>
2.动态生成年、月、日字段
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
* @author Administrator
*/
//通过js创建年,月,日
//获取Dom
var dom = window.document;
function myYear() {
//获取年的select
var year = dom.getElementById("year");
//创建年
var minYear = 1900;
var maxYear = new Date().getFullYear();
for (var i = minYear; i <= maxYear; i++) {
//创建Option
var opt = dom.createElement("option");
//设置Option,标签体.
opt.innerHTML = i;
opt.value = i;
//挂载节点
year.appendChild(opt);
}
}
function myMonth() {
var month = dom.getElementById("month");
//创建月
for (var i = 1; i <= 12; i++) {
//创建Option
var opt = dom.createElement("option");
//设置Option,标签体.
if (i < 10) {
opt.innerHTML = "0" + i;
opt.value = i;
} else {
opt.innerHTML = i;
opt.value = i;
}
month.appendChild(opt);
}
month.onchange = myDay;
}
function myDay() {
clear();
//创建天
// 大月1 3 5 7 8 10 12 ,小月4 6 9 11 闰年2月 非闰年的2月
//获取年
var year = dom.getElementById("year").value;
//获取月
var month = dom.getElementById("month").value;
if (year == "") {
alert("请选择年");
return;
}
if (month == "") {
alert("请选择月");
return;
}
//获取天select
var day = dom.getElementById("day");
//一个月至少有28天.
for (var i = 1; i <= 28; i++) {
var opt = dom.createElement("option");
if (i < 10) {
opt.innerHTML = "0" + i;
opt.value = "0" + i;
} else {
opt.innerHTML = i;
opt.value = i;
}
day.appendChild(opt);
}
//大月
var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;
//小月
var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;
//闰年 可以整除4但不能整除100 或者 年份可以整除400.
var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
//判断,如果是大月,添加3天
if (isBigMonth) {
//添加3天
for (var i = 29; i <= 31; i++) {
var opt = dom.createElement("option");
opt.innerHTML = i;
opt.value = i;
day.appendChild(opt);
}
} else if (isSmallMonth) {
//添加2天
for (var i = 29; i <= 30; i++) {
var opt = dom.createElement("option");
opt.innerHTML = i;
opt.value = i;
day.appendChild(opt);
}
} else if (isLeapYear) {
//如果是闰年,添加一天.专门处理闰年2月.
var opt = dom.createElement("option");
opt.innerHTML = 29;
opt.value = 29;
day.appendChild(opt);
}
}
function clear() {
var day = dom.getElementById("day");
var optArr = day.childNodes;
for (var i = optArr.length - 1; i >= 0; i--) {
day.removeChild(optArr[i]);
}
}
function getBirthday() {
//获取Dom
var dom = window.document;
myYear();
myMonth();
}
getBirthday();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
生日:
<select id="year">
<option>年</option>
</select>
<select id="month">
<option>月</option>
</select>
<select id="day">
<option>日</option>
</select>
</body>
</html>
3. 生产一个验证码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
* @author Administrator
*/
//验证码 ,4位的,由字符,数字组成.
function createCode() {
var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
//随机的从数组中取出4个元素.
var mess = "";
var index = 0;
for (var i = 0; i < 4; i++) {
//生成随机数.而且是在数组的长度范围内.
//0-9之间的随机数. Math.floor(Math.random()*10)
//0到数组长度(不包含)之间的浮点数.,向下取整,
var index = Math.floor(Math.random() * datas.length);
mess += datas[index];
};
//
var codeSpan = window.document.getElementById("codeSpan");
codeSpan.style.color = "red";
codeSpan.style.fontSize = "20px";
codeSpan.style.background = "gray";
codeSpan.style.fontWeight = "900";
codeSpan.style.fontStyle = "italic";
codeSpan.style.textDecoration = "line-through";
codeSpan.innerHTML = mess;
codeSpan.value = mess;
}
createCode();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
<span id="codeSpan"></span><a href="#" onclick="createCode()">看不清楚</a>
</body>
</html>
2，实现增删改查表格的增删改查。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var dom = window.document;
function getUserData() {
//获取id
var uid = dom.getElementById("uid").value;
var username = dom.getElementById("username").value;
var pwd = dom.getElementById("pwd").value;
var age = dom.getElementById("age").value;
var city = dom.getElementById("city").value;
//创建一个对象.封装用户的信息
//创建对象
var p1 = new Object();
//成员
p1.uid = uid;
p1.username = username;
p1.pwd = pwd;
p1.age = age;
p1.city = city;
//函数
p1.toString = function() {
alert("对象的toString方法");
alert(p1.uid + ":" + p1.username + ":" + p1.pwd + ":" + p1.age + ":" + p1.city);
}
//执行对象的功能.
//p1.toString();
return p1;
}
function createUser() {
//获取用户录入的信息.
var person = getUserData();
//将用户的信息显示在表单中.
//创建用户
//创建TR
var dom = window.document;
var tr1 = dom.createElement("tr");
//创建TD 7个
var td1 = dom.createElement("td");
var td2 = dom.createElement("td");
var td3 = dom.createElement("td");
var td4 = dom.createElement("td");
var td5 = dom.createElement("td");
var td6 = dom.createElement("td");
var td7 = dom.createElement("td");
//TD中添加用户的信息.
//td1 中需要添加一个复选框
//1.创建复选框.
var select = dom.createElement("input");
//设置属性,变为复选框
select.setAttribute("type", "checkbox");
select.setAttribute("name", "select");
//挂载节点.
td1.appendChild(select);
td2.appendChild(dom.createTextNode(person.uid));
td3.appendChild(dom.createTextNode(person.username));
td4.appendChild(dom.createTextNode(person.pwd));
td5.appendChild(dom.createTextNode(person.age));
td6.appendChild(dom.createTextNode(person.city));
//td7 的内容是一个按钮.
//创建按钮
var but = dom.createElement("input");
but.setAttribute("type", "button");
but.setAttribute("value", "删除");
//注册事件(单击事件)
but.onclick = myDelete;
//挂载节点.
td7.appendChild(but);
//将td挂载到tr中
tr1.appendChild(td1);
tr1.appendChild(td2);
tr1.appendChild(td3);
tr1.appendChild(td4);
tr1.appendChild(td5);
tr1.appendChild(td6);
tr1.appendChild(td7);
//将tr挂载到tbody中
//获取table
// var tb1 = dom.getElementById("tb1");
// tb1.appendChild(tr1);
//获取tbody
var tbody1 = dom.getElementsByTagName("tbody")[0];
tbody1.appendChild(tr1);
}
function checkUserData() {
return false;
}
function addUser() {
//获取用户信息
var person = getUserData();
//检测用户数据有效性
if (checkUserData()) {
//创建用户
createUser(person);
}
}
//全部选中的功能.
function mySelectAll() {
//获取复选框.
var selectAll = dom.getElementById("selectAll");
//获取程序创建的复选框
var selectArr = dom.getElementsByName("select");
if (selectAll.checked) {
for (var i = 0; i < selectArr.length; i++) {
selectArr[i].checked = true;
}
} else {
for (var i = 0; i < selectArr.length; i++) {
selectArr[i].checked = false;
}
}
}
//全部删除功能
function myDeleteAll() {
//获取复选框.
var selectAll = dom.getElementById("selectAll");
//获取程序创建的复选框
var selectArr = dom.getElementsByName("select");
if (selectAll.checked) {
for (var i = selectArr.length - 1; i >= 0; i--) {
var select = selectArr[i];
//删除复选框所在的tr
//复选框的父节点(td)->父节点(tr)(删除该节点)->tbody
if (select.checked) {
select.parentNode.parentNode.parentNode.removeChild(select.parentNode.parentNode);
}
}
}
}
//删除一行 一个tr
function myDelete() {
//this表示当前对象.
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body>
<!--表单-->
<form>
<table border="1px" align="center" width="50%" cellspacing="0px" cellpadding="3px" id="tb1">
<tr>
<td>选择</td><td>编号</td><td>姓名</td><td>密码</td><td>年龄</td><td>住址</td><td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" id="selectAll" onclick="mySelectAll()"/>
</td>
<td colspan="6">
<input type="button" value="全部删除" onclick="myDeleteAll()"/>
</td>
</tr>
</table>
</form>
<hr/>
<form>
<table border="1px" align="center" width="50%" cellspacing="0px" cellpadding="3px">
<tr>
<td>编号</td><td>
<input type="text" name="uid" id="uid"/>
</td>
</tr>
<tr>
<td>姓名:</td><td>
<input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="pwd" id="pwd"/>
</td>
</tr>
<br />
<tr>
<td>年龄</td><td>
<input type="text" name="age" id="age"/>
</td>
</tr>
<tr>
<td>住址:</td><td>
<select name="city" id="city">
<option value="">请选择</option>
<option value="gz">广州</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="提交" onclick="addUser()"/>
<input type="reset" value="重置"/>
</td>
</table>
</form>
</body>
</html>
- Docker
- 什么是docker
- Docker安装、组件启动
- docker网络
- docker命令
- docker swarm
- dockerfile
- mesos
- 运维
- Linux
- Linux基础
- Linux常用命令_1
- Linux常用命令_2
- ip命令
- 什么是Linux
- SELinux
- Linux GCC编译警告：Clock skew detected. 错误解决办法
- 文件描述符
- find
- 资源统计
- LVM
- Linux相关配置
- 服务自启动
- 服务器安全
- 字符集
- shell脚本
- shell命令
- 实用脚本
- shell 数组
- 循环与判断
- 系统级别进程开启和停止
- 函数
- java调用shell脚本
- 发送邮件
- Linux网络配置
- Ubuntu
- Ubuntu发送邮件
- 更换apt-get源
- centos
- 防火墙
- 虚拟机下配置网络
- yum重新安装
- 安装mysql5.7
- 配置本地yum源
- 安装telnet
- 忘记root密码
- rsync+ crontab
- Zabbix
- Zabbix监控
- Zabbix安装
- 自动报警
- 自动发现主机
- 监控MySQL
- 安装PHP常见错误
- 基于nginx安装zabbix
- 监控Tomcat
- 监控redis
- web监控
- 监控进程和端口号
- zabbix自定义监控
- 触发器函数
- zabbix监控mysql主从同步状态
- Jenkins
- 安装Jenkins
- jenkins+svn+maven
- jenkins执行shell脚本
- 参数化构建
- maven区分环境打包
- jenkins使用注意事项
- nginx
- nginx认证功能
- ubuntu下编译安装Nginx
- 编译安装
- Nginx搭建本地yum源
- 文件共享
- Haproxy
- 初识Haproxy
- haproxy安装
- haproxy配置
- virtualbox
- virtualbox 复制新的虚拟机
- ubuntu下vitrualbox安装redhat
- centos配置双网卡
- 配置存储
- Windows
- Windows安装curl
- VMware vSphere
- 磁盘管理
- 增加磁盘
- gitlab
- 安装
- tomcat
- Squid
- bigdata
- FastDFS
- FastFDS基础
- FastFDS安装及简单实用
- api介绍
- 数据存储
- FastDFS防盗链
- python脚本
- ELK
- logstash
- 安装使用
- kibana
- 安准配置
- elasticsearch
- elasticsearch基础_1
- elasticsearch基础_2
- 安装
- 操作
- java api
- 中文分词器
- term vector
- 并发控制
- 对text字段排序
- 倒排和正排索引
- 自定义分词器
- 自定义dynamic策略
- 进阶练习
- 共享锁和排它锁
- nested object
- 父子关系模型
- 高亮
- 搜索提示
- Redis
- redis部署
- redis基础
- redis运维
- redis-cluster的使用
- redis哨兵
- redis脚本备份还原
- rabbitMQ
- rabbitMQ安装使用
- rpc
- RocketMQ
- 架构概念
- 安装
- 实例
- 好文引用
- 知乎
- ACK
- postgresql
- 存储过程
- 编程语言
- 计算机网络
- 基础_01
- tcp/ip
- http转https
- Let's Encrypt免费ssl证书（基于haproxy负载）
- what's the http?
- 网关
- 网络IO
- http
- 无状态网络协议
- Python
- python基础
- 基础数据类型
- String
- List
- 遍历
- Python基础_01
- python基础_02
- python基础03
- python基础_04
- python基础_05
- 函数
- 网络编程
- 系统编程
- 类
- Python正则表达式
- pymysql
- java调用python脚本
- python操作fastdfs
- 模块导入和sys.path
- 编码
- 安装pip
- python进阶
- python之setup.py构建工具
- 模块动态导入
- 内置函数
- 内置变量
- path
- python模块
- 内置模块_01
- 内置模块_02
- log模块
- collections
- Twisted
- Twisted基础
- 异步编程初探与reactor模式
- yield-inlineCallbacks
- 系统编程
- 爬虫
- urllib
- xpath
- scrapy
- 爬虫基础
- 爬虫种类
- 入门基础
- Rules
- 反反爬虫策略
- 模拟登陆
- problem
- 分布式爬虫
- 快代理整站爬取
- 与es整合
- 爬取APP数据
- 爬虫部署
- collection for ban of web
- crawlstyle
- API
- 多次请求
- 向调度器发送请求
- 源码学习
- LinkExtractor源码分析
- 构建工具-setup.py
- selenium
- 基础01
- 与scrapy整合
- Django
- Django开发入门
- Django与MySQL
- java
- 设计模式
- 单例模式
- 工厂模式
- java基础
- java位移
- java反射
- base64
- java内部类
- java高级
- 多线程
- springmvc-restful
- pfx数字证书
- 生成二维码
- 项目中使用log4j
- 自定义注解
- java发送post请求
- Date时间操作
- spring
- 基础
- spring事务控制
- springMVC
- 注解
- 参数绑定
- springmvc+spring+mybatis+dubbo
- MVC模型
- SpringBoot
- java配置入门
- SpringBoot基础入门
- SpringBoot web
- 整合
- SpringBoot注解
- shiro权限控制
- CommandLineRunner
- mybatis
- 静态资源
- SSM整合
- Aware
- Spring API使用
- Aware接口
- mybatis
- 入门
- mybatis属性自动映射、扫描
- 问题
- @Param 注解在Mybatis中的使用 以及传递参数的三种方式
- mybatis-SQL
- 逆向生成dao、model层代码
- 反向工程中Example的使用
- 自增id回显
- SqlSessionDaoSupport
- invalid bound statement(not found)
- 脉络
- beetl
- beetl是什么
- 与SpringBoot整合
- shiro
- 什么是shiro
- springboot+shrio+mybatis
- 拦截url
- 枚举
- 图片操作
- restful
- java项目中日志处理
- JSON
- 文件工具类
- KeyTool生成证书
- 兼容性问题
- 开发规范
- 工具类开发规范
- 压缩图片
- 异常处理
- web
- JavaScript
- 基础语法
- 创建对象
- BOM
- window对象
- DOM
- 闭包
- form提交-文件上传
- td中内容过长
- 问题1
- js高级
- js文件操作
- 函数_01
- session
- jQuery
- 函数01
- data()
- siblings
- index()与eq()
- select2
- 动态样式
- bootstrap
- 表单验证
- 表格
- MUI
- HTML
- iframe
- label标签
- 规范编程
- layer
- sss
- 微信小程序
- 基础知识
- 实践
- 自定义组件
- 修改自定义组件的样式
- 基础概念
- appid
- 跳转
- 小程序发送ajax
- 微信小程序上下拉刷新
- if
- 工具
- idea
- Git
- maven
- svn
- Netty
- 基础概念
- Handler
- SimpleChannelInboundHandler 与 ChannelInboundHandler
- 网络编程
- 网络I/O
- database
- oracle
- 游标
- PLSQL Developer
- mysql
- MySQL基准测试
- mysql备份
- mysql主从不同步
- mysql安装
- mysql函数大全
- SQL语句
- 修改配置
- 关键字
- 主从搭建
- centos下用rpm包安装mysql
- 常用sql
- information_scheme数据库
- 值得学的博客
- mysql学习
- 运维
- mysql权限
- 配置信息
- 好文mark
- jsp
- jsp EL表达式
- C
- test