复习
html
标签,块级 行内
css
position
background
text-align
margin
padding
font-size
z-index
over-flow
:hover
opacity
float(clear:both)
line-height
border
color
display
补充:页面布局
主站布局
<div class="pg-header"></div>
<style>width:980px; margin:0 auto /*内容自动居中*/</style>
<div class="pg-body"></div>
<div class="pg-footer"></div>
后台管理布局
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()
*/
一个hover两个元素不一样的效果
<style>
.item:hover{
background-color: #e4393c;
}
.item:hover .b{
background-color: #64b5dd;
}
</style>
<div class="item">
<div class="a">1234567890</div>
<div class="b">1234567890</div>
</div>
显示效果
<script>
xo = "eric";
function func() {
xo = "alex";
function foo() {
console.log(xo); //tony
xo = "Jack";
}
xo = "tony";
return foo;
}
var ret = func();
ret()
</script>
左侧菜单跟随滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单跟随滚动</title>
<style>
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;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu">
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
</div>
<div class="content">
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单固定不动</title>
<style>
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;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">
<div class="menu-back">
<p style="margin-top: 0">lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
</div></div>
<div class="content right">
<div class="content-back">
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
</div>
</div></div>
<div class="pg-footer"></div>
</body>
</html>
效果同上
顶部菜单栏<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顶部菜单栏</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
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;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">毛豆科技</div>
<div class="user right">
<a href="#"><img src="img/微信头像.jpg" alt=""></a>
<div class="menu">
<a href="#">设置</a>
<a href="#">资料</a>
<a href="#">退出</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span class="num">5</span>
</div>
<div class="icons right">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</div>
</div>
<div class="pg-content">
<div class="menu left">
<div class="menu-back">
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
</div></div>
<div class="content right">
<div class="content-back">
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
<p>lalalallala</p>
</div>
</div></div>
<div class="pg-footer"></div>
</body>
</html>
显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
</head>
<body>
<form id="f1" action="http://www.baidu.com/s?">
<input type="text" name="wd">
<input type="submit" value="提交">
<a onclick="submitForm()">提交</a>
</form>
<script>
function submitForm() {
document.getElementById("f1").submit();
}
</script>
</body>
</html>
事件捕捉冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
width:400px;
height:300px;
background-color: #e4393c;
}
#content{
width:300px;
height:200px;
background-color: #0d3ea2;
}
</style>
</head>
<body>
捕捉:html -> body -> div
冒泡:div -> body -> html
<div id="main">
<div id="content"></div>
</div>
<script>
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);
</script>
</body>
</html>
添加标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加标签</title>
</head>
<body>
<button onclick="addElement1()">添加1</button>
<button onclick="addElement2()">添加2</button>
<div id="i1"><p><input type="text"></p></div>
<script>
// 通过字符串创建
function addElement1() {
// 创建标签,添加到li里面
var tag = document.getElementById("i1");
var newTag = "<p><input type='text'></p>";
// 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);
}
</script>
</body>
</html>
绑定多个事件函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定多个事件函数</title>
</head>
<body>
<div id="i1" style="width: 300px;
height:400px; background-color: red"></div>
<script>
var tag = document.getElementById("i1");
tag.addEventListener("click", function () {
console.log("111");
},false);
tag.addEventListener("click", function () {
console.log("222");
},false);
</script>
</body>
</html>
行为样式结构分离实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行为样式结构分离实例</title>
<style>
#i1{
background-color: #0d3686;
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id="i1"></div>
<script>
var div = document.getElementById("i1");
div.onclick = function(){
console.log("hello world")
}
</script>
</body>
</html>
表格隔行换色-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行换色-1</title>
</head>
<body>
<table border="1px" style="width:300px">
<tr onmouseover="t1(0)" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(1)" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
<tr onmouseover="t1(2)" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
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="";
}
</script>
</body>
</html>
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行换色-2</title>
</head>
<body>
<table border="1px" style="width:300px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
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="";
};
}
</script>
</body>
</html>
设置延时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置延时</title>
</head>
<body>
<div id="i1"></div>
<input onclick="del()" type="button" value="删除">
<script>
function del() {
var tag = document.getElementById("i1");
tag.innerText="已删除";
var obj = setTimeout(function () {
tag.innerText="";
}, 5000)
}
</script>
</body>
</html>
输入框提示功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框提示功能</title>
</head>
<body>
<div style="width:600px; margin: 0 auto;">
<input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字">
<input id="i2" type="text" placeholder="请输入关键字">
</div>
<script>
// 光标移入输入框隐藏提示文字
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="请输入关键字";
}
}
</script>
</body>
</html>
效果