4.22号本周总结
1.什么是js?
js就是一种脚本语言，它是用来和用户进行交流的，如用户的点击，键盘信息输入，信息输出等，它是网页的动作和行为，它的特点是a.解释性：可以直接由浏览器执行；b.跨平台：只要有浏览器就可以执行；c.简单，一种弱语言，在语法要求上不严格，好理解；d.它是面向对象的编程语言
2.目前已学的事件总结：onclick鼠标点击/onmouseover鼠标移入/onmouseout鼠标移出/onmouseenter鼠标移入/onmouseleave鼠标移出/onmousedown鼠标摁下/onmouseup鼠标抬起/onmousemove鼠标移动/ondblclick鼠标双击/oncontextmenu鼠标右击/onmousewheel鼠标滚动/DOMMouseScroll鼠标滚动，其中应用onmouseover和onmouseout时会出现一种现象，即移入子元素时，系统会判定为先移出父元素，再移入子元素，子元素亦可触发父元素的移出移出事件；应用onmouseenter和onmouseleave时，不会发生事件冒泡；应用onmousemove，触发频率太高，不宜放太多功能复杂的代码；onmousewheel和DOMMouseScroll为同一事件，onmousewheel兼容Chrome和IE，不兼容Firefox,DOMMouseScroll为DOM2级事件，需要使用事件绑定的方式添加事件，它兼容Firefox；
以下为onmousewheel和DOMMouseScroll的兼容:
if(navigator.userAgent.indexOf('Firefox') != -1 ){
document.addEventListener('DOMMouseScroll',function(){
console.log('滚')},false);}
else{document.onmousewheel = function(){
console.log('滚');};}
onkeydown:事件触发后输入的信息才能进入文本框；onkeyup:不抬起不触发事件
onfocus获取焦点；onblur:失去焦点
oninput和onpropertychange均为输入框改变时触发事件，实时监听输入框的改变，无论用什么方式赋值，都可以监听到值的变化，但是oninput支持IE9以上和高级浏览器，不支持低版本的浏览器，onpropertychange支持低版本的浏览器，即IE9以下的
oninput和onpropertychange的兼容如下：
obj.onpropertychange = obj.oninput = function(){}
onchange:一般用于select标签，（选中一个列表项，则触发此事件）
onsubmit:当表单提交时，触发此事件，添加给form标签
onload:图片完成加载
onsroll：实时监听窗口滚动事件
onresize：实时监听窗口改变事件
onerror:图片加载失败
3.样式的操作
a.用.style的方式，使用 Style 对象属性的语法：document.getElementById("id").style.property="值"
b.用.className的方式
c.用标签名.currentStyle.属性名和getComputedStyle(标签元素，false).属性名
它们的兼容如下：
if(obj.currentStyle){
obj.currentStyle.属性名//（IE9以下）}
else{ getComputedStyle(obj.false).属性名//(标准浏览器)}
4.undefined
a.定义一个变量没有赋值；b.访问一个不存在的属性；c.没有return值
5.属性的操作
a. .的方式,例obj.name = '123'
b.[]的方式,例var a ='title' this[a] = '123' 或 this['name'] = '123'
c.getAttribute('属性名') 获取属性 setAttribute['属性名','属性值'] 设置属性 removeAttribute('属性名') 移除属性
注：若能用.和[]的方式，就不用Attribute方式，最好不混写，全部用一种
jQuery中属性操作的方式:
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。类似于原生js中Attribute
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配元素集合中的HTML内容/firstChild.data
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值
DOM中获取元素：
a.父子关系：获取子节点：父节点.children;/父节点.childNodes(会获取到空格，文本节点)
b.获取父节点：子节点.parentNode
节点类型有：普通节点/文本节点
c.兄弟关系：上一个兄弟节点：obj.previousSibling;若有空格则是text,IE8以下才是对象,obj.previousElementSibling;IE9以上才行
兼容：var obj1 = obj.previousElementSibling || obj.previousSibling
下一个兄弟节点：obj.nextSibling;若有空格则是text,IE8以下才是对象,obj.nextElementSibling;IE9以上才行
兼容：var obj1 = obj.nextElementSibling || obj.nextSibling
d.获取父元素的第一个元素 父节点.fistChild/firstElementChild
e.获取父元素的最后一个元素 父节点.lastChild/lastElementChild
f.获取节点的HTML标记名称（大写字母） .nodeName
g.获取DOM元素 document.getElementById/document.getElementsByClassName / document.getElementsByTagName / document.getElementsByName;querySelector()/querySelectorAll()/matchesSelector()
h.创建制节点:document.createElement('obj');document.createTextNode('0000')
插入节点：父元素.appendChild('子元素')；父元素.insertBefore('插入元素','插入哪个元素之前')
删除节点：obj.parentNode.removeChild('需移除的元素')
复制节点：obj.cloneNode(true)或obj.cloneNode(),传入true参数代表深度克隆，否则为浅克隆
替换节点：父元素.replaceChild(newNode,oldNode)
6.循环遍历
for(初始值；条件；自增/减）｛代码｝
while(条件)｛自增/减，代码｝
for-in 循环json 对象，比较慢
注：若能用for循环就不用for in
jQuery里的方法：$(obj).each(function(){})
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
7.交互
交互中前后台传递的数据都是字符串
get:32K,会在地址栏中显示，不安全，有缓存
post:1G，不会在地址栏中显示，比较安全，无缓存
缓存：即浏览器对是相同的地址只发送一次请求
form表单特性：只能向后台提交数据，后台不会返回数据，每次提交都会刷新页面
ajax:特点，不用刷新页面，不仅能向后台发送数据，还能接收数据
ajax注意点：a.路径中不能出现中文；b.所有数据都是字符串，jquery里把字符串自己转换了，原生中eval('(' + str + ')');c.缓存问题,解决方法,在地址栏中加随机因子Math.random()或new Date().getTime();d.编码一致utf-8;e.读取数据不关心后缀名，后缀名只是给别人看的,在jquery里文件的后缀名最好不要用.json
jquery中的写法：$.ajax({
url:' ',type:'post'/'get',data:{},success:function({}),error:function({})})
8.node
node.js可以写后台的语言，专门为前端设计，适合前端人员上手，核心语言是javascript里的ECMA,若会js，入门node相对简单
node的特点：
性能极高；适合前端人员；和前端的js配合非常好，能使前端更好的理解前后台
node的缺点：
太年轻，不成熟；缺少大型框架；做大项目不行，资料文档少，网上解决问题的少；后期要比java程序员要求高
工程文件：记录你整个项目的情况
package json: 先进入项目文件夹，手动创建或自动生成npm init，再npm install expres--save
下载node：在cmd中输入,npm+空格+--version，查看系统中是否有node;npm install 模块名称，
node的使用步骤：
a.引用框架/静态 const express=require('express'); const static=require('express-static'); const body=require('body-parser');
b.搭建服务器 let server=express();
c.开启监听者并设置端口server.listen(8888);
d.设置静态文件 server.use(static('3w')); server.use(body.urlencoded());
f.写接口server.post('/sum',(req,res)=>{});server.get('/sum',(req,res)=>{})
get方式：req.query
post方式：1.下载npm install body-parser;2.type:'post',在ajax中；3.let body = require('body-parse');4.server.use(body.urlencoded);5.let data =req.body
9.sql数据库
什么是数据库？就是用来组织、存储和管理数据的仓库；
数据库类型：
大型的：db2、oracle、sybase等；网络的：sql 等；小型的：fox系列FOXBASE/FOXPRO/VFP等；简易的：ACCESS等；
oracle:强大，与钱/金融/政府有关的都用它，需付费；mysql:免费，比较轻便
数据分为：1客户端：操作找数据，本身没数据，node里npm install mysql /navicat for mysql；服务端：存数据，被别人访问，为了安全
Navicat的使用：
a.打开Navicat for Mysql
b.点击连接：输入连接名，可以随便写；主机名或IP地址：localhost/别人的IP；端口：3306；用户名/密码：root;联网或开wamp，连接测试成功，确认，双击或右击打开链接；
建库：新建数据库（数据库名，理论上都行，随便写,字符utf-8,排序规则utf-8-general-ci通用排序；建表：双击库，新建表，名字，类型int整数，float小数，varchar字符串，time时间,保存，输入表名，注：必须有主键，id不能为空
新建表；插入数据
sql语言（语句）：语法结构的都要大写
增:INSERT INTO 表名 VALUES（id,content,user) 注：值的顺序必须和表字段的顺序一致
删：DELETE FROM 表名；这是将整个表都删了，不能使用；DELETE FROM 表名 WHERE id=12;
改：UPDATE 表 SET 字段=新的值，字段=新的值 WHERE id=12
查：SELECT 字段名 FROM表名；所有SELECT *FROM表名
引入var mysql = require('mysql')
连接：var db = mysql.createConnection({"host":"localhost","user":"root","password":"","database":"库名"
