CSS布局
JavaScript
css布局：
后台管理界面一：（左右标签都有下来菜单）
利用position: absolute;让某个标签固定在具体位置，然后使用overflow: auto;属性，让内容多的话把父级标签撑起来（出现下拉菜单）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .left{ float: left; } .pg-header{ height: 48px; background-color: #2459a2; color: white; } .pg-content .menu{ position: absolute; top:48px; left: 0; bottom: 0; width: 300px; background-color: #dddddd; overflow: auto; } .pg-content .content{ position: absolute; top: 48px; right: 0; bottom: 0; left: 300px; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div class="content left"> <div style="background-color: purple"> <!--让这个p标签置顶不留出缝隙--> <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
效果：
后台管理布局二：（左侧菜单没有下来菜单，右侧有同上使用相同方法，只是左侧菜单少了个）
新知识：border-radius: 50%;设置图片时候，选择border-raidus：50%让图片变成圆的。图标下面的下拉菜单没有用javascript，是用css的z-index和hover实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; color: white; line-height: 48px; } .pg-header .logo{ width: 200px; background-color: cadetblue; text-align: center; } .pg-header .user{ margin-right: 80px; padding: 0 20px; color: white; height: 48px; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ height: 40px; width: 40px; margin-top: 4px; border-radius: 50%; } .pg-header .user .b{ z-index: 20; position: absolute; top: 48px; right: 30px; background-color: white; color: black; width: 160px; display: none; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .pg-content .menu{ position: absolute; top:48px; left: 0; bottom: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> 老男孩 </div> <div class="user right" style="position: relative"> <a class="a" href="#"> <img src="22.jpg"> </a> <div class="b"> <a>我的资料</a> <a>注销</a> </div> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <!--<div style="position: fixed;bottom:0;right:0; 50px;height: 50px;">返回顶部</div>--> <!--<div style="position: absolute;bottom:0;right:0; 50px;height: 50px;">返回顶部</div>--> <div style="background-color: purple"> <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
效果：（右上角多了个用户的头像和下拉菜单）
关于hover的练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*设置背景色*/ .item{ background-color: #dddddd; } /*设置鼠标放到该区域变成红色*/ .item:hover{ color: red; } /*让鼠标放到上面这个样式时候字体颜色变成红色，而b样式的区域字体颜色变成绿色*/ .item:hover .b{ color: #00A000; } </style> </head> <body> <div class="item"> <div class="a">abc</div> <div class="b">ghj</div> </div> </body> </html>
效果：
说明：当鼠标从上或者从下到这个div标签区域时候，让abc和ghj区域变成不同的颜色。
小图标使用方法：
url：http://fontawesome.io/
进入上面这个网站，点击home，进行下载，下载下来的安装包进行解压，解压下来的目录名字是font-awesome-4.7.0（里面的东西一个也不能少），将这个目录放到你代码的目录下，这样你就可以引用它的各种符号了。
我们开始引用它们的符号了，还是这个网页http://fontawesome.io/，我们点击icons这个选项：
这里面有很多图标，你看上哪个符号就点击哪个符号，例如我喜欢下面这个图标（然后我就双击点击一下）：
进来以后，我只需要我箭头的那部分就行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- css目录中有min代表是压缩过得，一般用这个，另外一个是没有压缩过的(压缩过的是一行就解决了)--> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <div class="fa fa-window-restore" aria-hidden="true" ></div> </body> </html>
效果：
JavaScript:
switch语句，类似于if条件语句。
下面：case（如果name等于1，age就是123，后面一定要加break;）,如果name等于2，age就是456，最后否则age就是777.
1 switch(name){ 2 case '1': 3 age = 123; 4 break; 5 case '2': 6 age = 456; 7 break; 8 default : 9 age = 777; 10 }
函数分类：
普通函数：
function func(){
}
匿名函数：
定义：没有名字的函数就叫匿名函数。
例如：
我们要做一个任务计划，让一个函数5秒执行一次。正常大家都会这么写： （这个函数有名字就叫func（）里面还有个形式参数arg）
function func(arg){
return arg+1
}
setInterval("func()", 5000);
但我们也可以这么写：（下面这个也是一个函数，但是我用setInterval把它包在了里面，这个函数没有名字，但也是函数。我们通常叫这类函数是匿名函数）
setInterval(function(){
console.log(123);
},5000)
自执行函数：（顾名思义就是自己执行的函数）
自己创建一个函数，并且自己执行。
1 (function(arg){ 2 console.log(arg); 3 })(1)
序列化；
JSON.stringify(obj) 序列化 (将对象转换为字符串)
JSON.parse(str) 反序列化 (将字符串转换为对象类型)
转义：
例如：我打开搜狗搜索哈哈两个字：
https://www.sogou.com/web?query=%E5%93%88%E5%93%88&_asf=www.sogou.com&_ast=&w=01019900&p=40040100&ie=utf8&from=index-nologin&sut=679&sst0=1479987995509&lkt=0%2C0%2C0
浏览器肯定后面加一堆东西，这其中query=的这些%E5%93%88%E5%93%88其实就是我输入的哈哈两个字，只是被转义了。
使用场景：一般我们都会讲转义后的url存到数据库，但是有些关键词很明感，所以转义后就没事儿了。
encodeURI( ) URI中的转义字符
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURIComponent( ) 转义URI组件中的字符（将url中http后面的://也转义了）
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
例如：
将我从搜狗上扣下来的这个url给对象url
url = "https://www.sogou.com/web?query=哈哈;"
将url这个对象encodeURI后就是下面的%符号内容
url_encodeURL = encodeURI(url)
"https://www.sogou.com/web?query=%E5%93%88%E5%93%88;"
我再把它decodeURI回来就又是汉子了
new_url = decodeURI(url_encodeURL)
"https://www.sogou.com/web?query=哈哈;"
eval：
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
eval()
EvalError 执行字符串中的JavaScript代码
python中:
val = eval(表达式)（这里呢只能执行负责的表达式）
exec(执行代码)（python中exec只能执行代码，各种复杂表达式都不行）
但是JavaScript中eval() 即能执行代码也能执行表达式：
eval()
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
时间统一时间
本地时间（东8区）
更多操作参见：http://www.shouce.ren/api/javascript/main.html
JavaScript中有个Date对象。
固定写法（除了date其它都是固定写法）：
var date = new Date（）
date时间对象里面封装了当前时间。
下面方法可以获取到具体时间的哪个值。
如果你需要更改某个值，首先应该是先get到某个值，然后set的某个值。例如：
d.getXXX 获取
d.setXXX 设置
作用域：
1. 以函数作为作用域 （let）
其他语言： 以代码块作为作用域
public void Func(){
if(1==1){
string name = 'Java';
}
console.writeline(name);
}
Func()
// 报错
Python： 以函数作为作用域
情况一：
def func():
if 1==1:
name = 'zhangsan'
print(name)
func()
// 成功
情况二：
def func():
if 1==1:
name = 'zhangsan'
print(name)
func()
print(name)
// 报错
JavaScript: 以函数作为作用域
function func(){
if(1==1){
var name = 'zhangsan';
}
console.log(name);
}
func()
2. 函数的作用域在函数未被调用之前，已经创建。
function func(){
if(1==1){
var name = 'zhangsan';
}
console.log(name);
}
3. 函数的作用域存在作用域链，并且也是在被调用之前创建。（函数里面可以套函数，就叫作用域链）
示例一：
xo = "zhangsan";
function func(){
var xo = 'eric';
function inner(){
var xo = 'tony';
console.log(xo);
}
inner()
}
func()
从里往外找先找inner这函数（作用域）里的xo,inner里面要是没有就找func这个函数里面的xo,func里面也没有就找最外面的xo.
示例二：
xo = "zhangsan";
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
return inner;
}
var ret = func()
这样的话ret就是inner函数的内存地址，所以看下面补充的示例二。
示例二：
xo = "zhangsan";
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
return inner;
}
var ret = func()
ret()
ret（）才是执行inner函数，但是inner里面没有xo这个对象啊，因为JavaScript作用域没有执行前就创建了，所以输出的必须得eric。
示例三：
xo = "zhangsan";
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
var xo = 'tony';
return inner;
}
var ret = func()
ret()
4. 函数内局部变量 声明提前
function func(){
console.log(xxoo);
}
func();
// 程序直接报错
function func(){
console.log(xxoo);
var xxoo = 'zhangsan';
}
解释过程中：var xxoo;
func();
结果肯定是undefined
因为func()函数执行的时候首先是undefined，但是开始执行的时候从上往下console.log的时候xxoo还是undefined.所以结果肯定是undefined。
JavaScript面向对象
创建一个普通的函数：
function foo(){
var name = 'zhangsan';
}
foo()
面向对象：
function foo(n){
this.name = n;
}
var obj = new Foo('zhangsan');
a. this代指对象(python self)
b. 创建对象时, new 函数()
function Foo(n){ this.name = n; this.sayName = function(){ console.log(this.name); } } var obj1 = new Foo('we'); obj1.name obj1.sayName()
function Foo(n){ this.name = n; this.sayName = function(){ console.log(this.name); } } var obj1 = new Foo('we'); obj1.name obj1.sayName() var obj2 = new Foo('wee'); obj2.name obj2.sayName()
这里有点像python中的写法，sayName在每个对象里面都定义了，所以不合理。把sayName放到一个公共的地方，看下面。。。。
原型：
function Foo(n){ this.name = n; } # Foo的原型 Foo.prototype = { 'sayName': function(){ console.log(this.name) } } obj1 = new Foo('we'); obj1.sayName() obj2 = new Foo('wee');
Foo的里面包含了Foo.prototype方法，所以每次有人要找sayName，先好到Foo方法，再去它下面的Foo.prototype。就不用像上面那样方法里面套方法，占用内存空间。不高效。
DOM：
查找：
查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作： innerText 仅文本 （只是文本，要是写模块，那浏览器也不认，直接给你当字符串显示的页面上） innerHTML 全内容（可以像写前端似的直接写代码，浏览器会认出里面的标签）
value
input value获取当前标签中的值
select 获取选中的value值（selectedIndex）
textarea value获取当前标签中的值
搜索框示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" 600px;margin: 0 auto;"> <!--获取到光标后执行某个函数用onfocus事件--> <!-- 当光标离开后执行某个函数用onblur事件--> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/> <!--不建议使用，也能实现onfocus和onblur的需求。老版本html不支持--> <input type="text" placeholder="请输入关键字" /> </div> <script> // 当鼠标点击后执行的函数，如果是请输入关键字，就给清空（用value获取输入框内容，并做判断） function Focus(){ var tag = document.getElementById('i1'); var val = tag.value; if(val == "请输入关键字"){ tag.value = ""; } } // 当鼠标离开时获取到输入框内容，并更改成请输入关键字 function Blur(){ var tag = document.getElementById('i1'); var val = tag.value; if(val.length ==0){ tag.value = "请输入关键字"; } } </script> </body> </html>
操作：
样式操作：
className 以字符串形式获取样式的名字
classList 以列表的形式获取样式的名字
classList.add 增加样式
classList.remove 删除样式
像上面这种直接就干掉了某个样式，我只想更改里面的一条怎么办呢，下面这种力度更小（注意里面的样式写法的大小写）
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
属性操作：
把某个标签里面的某个属性做操作。
attributes 获取所有的属性
getAttribute 更改
removeAttribute 删除
创建标签，并添加到HTML中。（例如加减行或者数字时候，本质上就是添加某个标签到具体位置）
第一种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();" value="+" /> <div id="i1"> <p><input type="text" /></p> </div> <script> function AddEle1(){ // 创建一个标签 // 将标签添加到i1里面 var tag = "<p><input type='text'/></p>"; // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } </body> </html>
第二种（用对象的方式）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p> </div> <script> function AddEle2(){ // 创建一个标签 // 将标签添加到i1里面 var tag = document.createElement('input'); tag.setAttribute('type', 'text'); tag.style.fontSize = '16px'; tag.style.color = 'red'; var p = document.createElement('p'); p.appendChild(tag); document.getElementById('i1').appendChild(p); } </script> </body> </html>
注意：第一个参数只能是'beforeBegin（兄弟标签的前面）'、 'afterBegin（父级标签的前面）'、 'beforeEnd（兄弟标签的后面）'、 'afterEnd'（父级标签的后面）
提交表单：
两种提交表单方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.oldboyedu.com"> <input type="text" /> <input type="submit" value="提交" /> <a onclick="submitForm();">提交吧</a> </form> <script> function submitForm(){ document.getElementById('f1').submit() } </script> </body> </html>
其它操作：
console.log 输出框
alert 弹出框
confirm 确认框（弹出框，true是确认输出信息，fales是取消输出信息）
// URL和刷新
location.href 获取当前网页的URL地址
location.href = "url" 重定向（跳转到某个url）
location.reload() 重新加载（页面刷新）
// 定时器
setInterval 多次定时器（这只一个定时器，例如，每多少秒执行，它就一直在等多少秒后执行。）
clearInterval 清除多次定时器（清楚类似上面的多次定时器）
setTimeout 单次定时器（地址多久后执行一次，但执行一次）
clearTimeout 清除单次定时器（清楚上面的这个定时器）
示例：
// 定时器，一直执行
var obj = setInterval(function(){
console.log(1);
clearInterval(obj);
}, 1000);
// 定时器，只执行一次
setTimeout(function () {
console.log('timeout');
},15000);
事件：
上面我们学习onclick，onblur，onfocus
前端写法表中：
行为 样式 结构 相分离的页面
总结：
不要把style样式直接写到某个标签中例如<div style = 'color = red '> </div>，样式在head里面或者文件里面写
不用把例如事件onclik = func();类似这样的直接写到标签中。
类似通过id之类在js中找id号，在js里面添加事件。
html中尽量只写html语法。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #test{ background-color: red;width:300px;height:400px; } </style> <body> <div id="test" > dsad </div> <script> var mydiv = document.getElementById("test"); console.log(mydiv); mydiv.onclick = function(){ console.log("dsads"); } mydiv.onclick = function(){ console.log("dsadsa"); }