知识点
复习
html
标签，块级 行内
css
position
background
text-align
margin
padding
font-size
z-index
over-flow
:hover
opacity
float(clear:both)
line-height
border
color
display
补充：页面布局
主站布局
width:980px; margin:0 auto /*内容自动居中*/
后台管理布局
position
fixed 窗口定位，永远固定在窗口某个位置
relative 单独无意义
absolute 页面定位，第一次定位在指定页面位置，滚轮滚动则改变
1.左侧菜单跟随滚动条 fixed
2.左侧菜单固定不动 absolute
javascript
for循环
for(var item in [11, 22, 33]){
console.log(item) //输出索引
}
var arr = [11, 22, 33, 44]
for(var i = 0; i < arr.length; i = i + 1){
break;
}
while(条件){
}
条件语句
if(){
}
else if{
}
else{
}
==
===
swich(name){
case "1":
console.log("1");
break;
case "2":
console.log("2");
break;
default :
console.log("default");
}
函数：
function func(arg){
return arg+1;
}
var result = func(1);
console.log(result);
普通函数：
function func(){
}
匿名函数：
setInterval("func()", 5000);
setInterval(function(){
console.log("123");
}, 5000)
自执行函数：
function func(){
}
func()
//解释到这里就会自动执行
(function(arg){
console.log(arg);
})(1)
序列化操作
JSON.stringify(obj) // 将对象转换为字符串
JSON.parse(str) // 将字符串转为对象
转义
客户端（cookie） -》 服务器端
将数据进过转义后，保存在cookie中
decodeURI()
encodeURI()
eval
python
val = eval(表达式)
exec(执行代码)
javascript
eval两者集合
时间
Date类
var d = new Date()
d.getxxx() 获取
d.setxxx() 设置
作用域
其他语言（c#）：以代码块作为作用域
public void func(){
if(1 == 1){
string name = "java";
}
console.writeline(name); //报错
}
python：以函数作为作用域
def func():
if(1==1):
name = "alex"
print(name) //正常输出
func()
print(name) //报错
javascript:
1.以函数作为作用域
function func(){
if(1==1){
var name = "alex";
}
console.log(name);
}
2.函数的作用域，在函数未被调用之前，已经被创建
3.函数的作用域存在作用域链，调用前被创建
例如：
xo = "eric";
function func() {
xo = "alex";
function foo() {
console.log(xo)
}
xo = "tony";
return foo;
}
var ret = func()
ret()
4.函数内局部变量提前申明
面向对象
function foo(){
var xo = "alex";
}
foo()
function Foo(n){
this.name = n; // 属性
this.sayName = function(){
console.log(this.name);
} // 方法
}
var obj = new Foo("we");
obj.name
obj.sayName()
this 指代对象（python self）
创建对象，new 函数()
原型：
function Foo(n){
this.name = n;
}
# Foo原型 字典
Foo.prototype = {
“sayName": function(){
console.log(this.name)
}
}
DOM 文档对象模型
查找
直接查找
var obj = document.getElementById("li");
间接查找
文件内容操作
innerText 仅文本
innerHTML 全部内容
value
input value 获取当前标签中的值
select value 获取选中的value值（selectedIndex）
textarea value获取当前标签中的值
搜索框示例
样式操作
className
classList
classList.add
classList.remove
obj.style.fontSize="16px";
obj.style.backgroundColor="red";
属性操作
attributes
setAttribute
removeAttribute
创建标签，添加到html中
1.字符串
2.对象 document.createElement("div")
提交表单
任何标签都可以，通过dom提交表单
document.getElementById("id").submit();
其他
console.log() 输出框
alert() 弹出框
var ret = confirm() 确认框 true/false
url和刷新
location.href 获取url
location.href= "url" 设置url，重定向
location.reload() 重新加载 相当于 location.href = location.href
定时器
var obj = setInterval(function(){}, 5000)
clearInterval(obj)
设置延时
var obj = setTimeout(function(){}, 5000)
clearTimeout(obj)
事件
onclick onblur onfocus
面试题：行为 样式 结构 相分离的页面？
js css html
this 谁调用this，就指向谁
绑定事件
1.直接绑定标签， onclick="func()"
2.现获取dom对象，然后进行绑定
document.getElementById("id").onclick=func()
this,当前触发事件的标签
第一种绑定方式：
onclick="func(this)"
function func(self){
//self,当前点击的标签
}
第二种绑定方式：
id ="id"
document.getElementById("id").onclick=function(){
this 指代当前点击的标签
}
第三种绑定方式：
一个事件可以执行多个函数
addEventListener()
css属性转为javascript -去掉，首字符大写
多查手册
sublime 插件 emmet代码实例：
AO对象function func(age){
console.log(age); //function
var age = 27;
console.log(age); //27
function age() {}
console.log(age); //27
}
func(3);
/*
active object ==> AO
1.形式参数 AO.age = undefined; AO.age = 3;
2.局部变量 AO.age = undefined;
3.函数声明表达式 AO.age = function()
*/
.item:hover{
background-color: #e4393c;
}
.item:hover .b{
background-color: #64b5dd;
}
1234567890
1234567890
显示效果
xo = "eric";
function func() {
xo = "alex";
function foo() {
console.log(xo); //tony
xo = "Jack";
}
xo = "tony";
return foo;
}
var ret = func();
ret()
左侧菜单跟随滚动
body{
margin: 0 auto;
}
.pg-header{
height:48px;
background-color: #0d3ea2;
}
.pg-content .menu{
width:200px;
position: fixed;
top:48px;
left:0;
bottom:0;
background-color: #333333;
}
.pg-content .content{
position:fixed;
top: 48px;
left:200px;
right:0;
bottom:0;
background-color: #dddddd;
overflow:auto;
}
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
显示效果
左侧菜单固定不动
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height:48px;
background-color: #0d3ea2;
}
.pg-content .menu{
width:200px;
position: absolute;
top:48px;
left:0;
bottom:0;
}
.menu-back{
background-color: #333333;
}
.pg-content .content{
position:absolute;
top: 48px;
left:200px;
right:0;
bottom:0;
/*!*min-width:980px;*! 最小宽度*/
/*overflow:auto;*/
}
.content-back{
background-color: #dddddd;
}
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
效果同上
顶部菜单栏
顶部菜单栏
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height:48px;
background-color: #0d3ea2;
line-height: 48px;
color: white;
}
.pg-header .logo{
width:200px;
color:white;
font-size: 21px;
text-align: center;
background-color: #0d3686;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #0d3686;
}
.pg-header .icons .num{
background-color: red;
display: inline-block;
padding: 10px 7px;
font-size:12px;
border-radius: 50%;
line-height: 1px;
}
.pg-header .user{
padding: 0 30px;
height: 48px;
margin-right: 100px;
background-color: #0d3ea2;
}
.pg-header .user .menu{
position: absolute;
right:40px;
top:48px;
width:160px;
z-index:20;
background-color: #dddddd;
display:none;
}
.pg-header .user .menu a{
display:block;
text-underline: none;
/*background-color: #0d3686;*/
}
.pg-header .user:hover{
background-color: #0d3686;
}
.pg-header .user:hover .menu{
display:block;
}
.pg-header .user .menu a:hover{
background-color: #64b5dd;
}
.pg-header .user a img{
width:40px;
height: 40px;
border-radius: 50%;
margin-top: 4px;
}
.pg-content{
}
.pg-content .menu{
width:200px;
position: absolute;
top:48px;
left:0;
bottom:0;
}
.menu-back{
background-color: #333333;
}
.pg-content .content{
position:absolute;
top: 48px;
left:200px;
right:0;
bottom:0;
z-index:9;
/*!*min-width:980px;*! 最小宽度*/
/*overflow:auto;*/
}
.content-back{
background-color: #dddddd;
}
毛豆科技
设置
资料
退出
5
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
lalalallala
显示效果
提交表单
提交
function submitForm() {
document.getElementById("f1").submit();
}
Title
#main{
width:400px;
height:300px;
background-color: #e4393c;
}
#content{
width:300px;
height:200px;
background-color: #0d3ea2;
}
捕捉：html -> body -> div
冒泡：div -> body -> html
var main = document.getElementById("main");
var content = document.getElementById("content");
// false 冒泡 true 捕捉
main.addEventListener("click", function () {
console.log("main");
}, true);
content.addEventListener("click", function () {
console.log("content");
}, true);
添加标签
添加1
添加2
// 通过字符串创建
function addElement1() {
// 创建标签，添加到li里面
var tag = document.getElementById("i1");
var newTag = "";
// beforeBegin afterBegin beforeEnd afterEnd
tag.insertAdjacentHTML("beforeEnd", newTag);
}
// 通过对象方式
function addElement2() {
// 创建标签，添加到li里面
var tag = document.getElementById("i1");
var input = document.createElement("input");
input.setAttribute("type", "text");
input.style.color = "red";
var p = document.createElement("p");
p.appendChild(input);
tag.appendChild(p);
}
绑定多个事件函数
var tag = document.getElementById("i1");
tag.addEventListener("click", function () {
console.log("111");
},false);
tag.addEventListener("click", function () {
console.log("222");
},false);
行为样式结构分离实例
#i1{
background-color: #0d3686;
width: 300px;
height: 400px;
}
var div = document.getElementById("i1");
div.onclick = function(){
console.log("hello world")
}
表格隔行换色-1
123
123
123
function t1(n) {
var tag =document.getElementsByTagName("tr")[n];
console.log(tag);
tag.style.backgroundColor="red";
}
function t2(n) {
var tag =document.getElementsByTagName("tr")[n];
console.log(tag);
tag.style.backgroundColor="";
}
效果
表格隔行换色-2
123
123
123
var trs = document.getElementsByTagName("tr");
var len = trs.length
for(var i = 0; i < len; i++){
// i =0 1 2 作用域改变了
trs[i].onmouseover = function () {
//this指向调用者
this.style.backgroundColor="red";
};
trs[i].onmouseout = function () {
this.style.backgroundColor="";
};
}
设置延时
function del() {
var tag = document.getElementById("i1");
tag.innerText="已删除";
var obj = setTimeout(function () {
tag.innerText="";
}, 5000)
}
输入框提示功能
// 光标移入输入框隐藏提示文字
function Focus() {
var tag = document.getElementById("i1");
var val = tag.value;
if(val=="请输入关键字"){
tag.value="";
}
}
// 光标移出输入框显示提示文字
function Blur() {
var tag = document.getElementById("i1");
if(tag.value.length==0){
tag.value="请输入关键字";
}
}
效果
