day01
学习目标
对DOM树进行增删改查
在html文件中的任何文档内容都是节点（Node类型节点）。
文档节点(全篇就一个) document节点
元素节点 element节点
文本节点 text节点
注释节点...
元素节点内，属性节点
Node
| | |
Document Dlement Text
DOM： 找到节点 修改节点 删除节点 添加节点
** 1.Node类型**
DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。
2.节点关系
属性：
nodeType 表示节点类型
Document--> 9;Element -->1;TextNode -->3;Comment--> 8
document 是Document构造函数的实例
document.body是Element构造函数的实例
document.body.firstChild 是TextNode构造函数的实例
nodeName 该属性取决于节点类型，如果是元素类型，值为元素的标签名
nodeValue 该属性取决于节点类型，如果是元素类型，值有null
childNodes
保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组
var arr = Array.prototype.slice.call(nodes,0);
parentNode
指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。
previousSibling 兄弟节点中的前一个节点
nextSibling 兄弟节点中的下一个节点
firstChild childNodes列表中的第一个节点
lastChild childNodes列表中的最后一个节点
ownerDocument
指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。
方法：
hasChildNodes()
在包含一个或多个子节点的情况下返回true
2.操作节点
以下四个方法都需要父节点对象进行调用!
appendChild()
向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分，位置更新而不插入，dom树可以看做是由一系列的指针连接起来的，任何DOM节点不能同时出现在文档中的多个位置
insertBefore() //第一个参数：要插入的节点；第二个参数：作为参照的节点；
被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面
replaceChild() //第一个参数：要插入的节点；第二个参数：要替换的节点；
要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置
removeChild() //一个参数，即要移除的节点。
移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。
元素内容
innerHTML 返回元素内容，包括html标签
innerText 元素内部的文本，去除回车和换行
textContent 元素内部的文本，不去除空格和回车
清空parent内部的内容
parent.innerHTML = ``;
3.克隆：
浅复制：只复制节点本身，不复制内部内容
var cloneOne = one.cloneNode();
深复制，复制节点本身和内部字节点
var cloneOne = one.cloneNode(true);
2.document类型
1.文档子节点
可以继承Node中所有的属性和方法
属性：
documentElement 始终指向HTML页面中的<html>元素。
body 直接指向<body>元素
doctype 访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title 获取文档的标题
URL 取得完整的URL
domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。服务器测
referrer 取得链接到当前页面的那个页面的URL，即来源页面的URL。
images 获取所有的img对象，返回HTMLCollection类数组对象
forms 获取所有的form对象，返回HTMLCollection类数组对象
links 获取文档中所有带href属性的<a>元素
2.查找元素
getElementById()
参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。
getElementsByTagName()
参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问
getElementsByName()
参数为元素的name,返回符合条件的NodeList
getElementsByClassName()
参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。
3.Element类型
找
修改内部内容、获取内部内容
（innerHTML\innerText\textContent）
删除
removeChild()
添加元素
appendChild()
insertBefore()
创建元素
document.creatElement('div');
属性操作 !!!
获取到属性值
<div id="one" class="two" title="hello"></div>
div.id
div.className
div.title
div.getAttribute('id')
修改某一属性值
div.id = 'day';
div.title = '';
div.setAttribute('id','day');
//获取style属性值和onclick属性值(两种方法的区别)
//.style .onclick 拿到的对象或函数
console.log(div.style);
console.log(div.onclick);
//getAttribute 拿到的是字符串
console.log(div.getAttribute('style'));
console.log(div.getAttribute('onclick'));
4.文本
div.innerText.length
div.innerText = div.innerText + 'hello';
5.作业
遍历数据，拿到一个对象，生成一个tr,tr中的td中的内容使用对象中的属性值。
最后追加到tbody中。
var students = [{
name:'zhangsan',
age:1,
gender:'男'
},{
name:'zhangsan',
age:1,
gender:'男'
},{
name:'zhangsan',
age:1,
gender:'男'
}]
遍历到表格中
//将类数组转换成数组(两种方法)！！！
1.var arr = Array.prototype.slice.call(childs,0);
2.var arr = Array.from(childs);【推荐es6】
//实现从孩子节点中过滤出元素节点
var res = arr.filter(function (item) {
return item.nodeType == 1;
});
console.log(res); //Array [ div#one.two ]
//获取某一元素节点内的元素孩子节点
console.log(body.children); //HTMLCollection { 0: div#one.two, length: 1, … }
输出：
console.info(newChild); //<div> 黑色i图标
console.debug(newChild); //<div>
console.error(newChild); //<div> 红色i图标
console.warn(newChild); //<div> 黄色i图标
day02
事件：
三要素：
事件目标
事件处理程序
事件对象
事件流
事件冒泡（IE事件流）
从内往外
事件捕获
从外往内
DOM事件流
先事件捕获=》目标元素执行事件处理程序=》事件冒泡
绑定事件
HTML绑定事件
<div onclick="tets(event,...)"></div>
DOM0级绑定事件
var div = document.getElementById('one');
div.onclick = function(event){
//可以使用event事件对象
}
//覆盖
div.onclick = function(){}
//解绑
div.onclick = null;
DOM2级绑定事件
非IE8及以下:
div.addEventListener('click',handle);
第三个参数，默认是false，是在冒泡阶段执行
true：在捕获阶段执行
div.addEventListener('click',handle2); 累加执行
//解绑
div.removeEventListener('click',handle);
function handle2(event){
console.log(event);
}
事件对象
event
属性：
event.target 触发事件的源头元素
event.currentTarget 当前正在执行事件处理程序的元素，与this一样
event.stopPropagation() 停止冒泡
event.cancelBubble = true
event.preventDafault() 阻止默认行为
event.returnValue = false
事件代理
父元素代理子元素的事情
parent.onclick = function(event){
//event.target是哪个孩子
if(A孩子){
A孩子事情
}
if(B孩子){
B孩子事情
}
...
if(parent){
parent事情
}
}
day03
超时调用：超过多少时间执行一次代码，该代码仅执行一次
setTimeout(function(){
console.log(1);
},1000)
间歇调用：每隔多少毫秒执行一次代码，代码重复执行
setInterval(function(){
console.log(1);
},1000)
查询字符串
?name=zhangsan&age=12
部署项目
1.将jar包上传到/jar 路径：/var/www/html/jarbao
2.navicat中的远程连接中，创建university数据库，编码utf-8。给briup用户授权university数据库的一切权限。
云服务器的mysql软件登录名briup,密码briup
在university数据库导入.sql文件运行。
3.启动jar包
ssh连上云服务器，nohup java -jar /jar/univer...jar
7788端口号
如果想修改端口号启动jar包
nohup java -jar xxx.jar --server.port=8800
阿里云安全组开放7788端口，或者其他指定端口
4.访问后台接口
http://ip:7788/swagger-ui.html
先登录再认证，再访问接口
5.修改university-ui.zip解压后的static->js->app.c3...js中的127.0.0.1为自己的云服务器ip地址
6.将university-ui.zip解压后的文件部署到云服务器的apache下。
在浏览器访问项目
http://ip:80/university
http协议
浏览器和服务器之间遵循http协议，浏览器发送请求报文，服务器给出响应报文
请求报文：请求头，请求体(浏览器决定，js决定)
响应报文：响应头，响应体(服务器决定，java决定)
Ajax 前端传递数据给后台
get方式：url后的查询字符串
默认get方式传递数据，数据格式是表单数据格式 application/x-www-form-urlencoded
post方式：参数在请求体里
如果post传递参数格式是表单格式
需要设置 application/x-www-form-urlencoded，还需要将js对象转为表单格式数据(qs)
qs.stringify(obj)
如果post传递参数格式是json格式
需要设置 application/json，还需要将js对象转为json字符串传递(JSON)
JSON.stringify(obj)
扫一扫
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
