Python学习笔记第十六周
目录：
一、CSS补充
1、页面布局
二、JavaScript补充
1、条件判断
2、函数分类
3、序列化
4、转义
5、eval
6、时间
7、作用域
三、DOM
1、间接查找
文本操作
样式操作
属性操作
提交表单
其他
事件
内容：
一、CSS补充
1、页面布局：
后台管理布局：
元素补充：
min-width： 防止缩放的时候，只写百分比会变形，需要一个最小宽度
border-radius：边框变圆，可以设置为50%
例子：
1、后台管理界面布局（左侧菜单不动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float;left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white; }
.pg-body .body-menu{
width:20%;
min-width:200px;/* 当20%的宽度小于200px时应用200px */
background-color:red;
position:fixed;
top:48px;
left:0;
bottom:0;
}
.pg-body .body-content{
width:80%;
background-color:green;
position:fixed;
top:48px;
right:0;
bottom:0;
overflow:auto }
</style>
</head>
<body>
<div class="pg-header">
<div class="header-menu"> </div>
</div>
<div class="pg-body">
<div class="body-menu left">a</div>
<div class="body-content left">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</body>
</html>
2、左侧菜单跟随滚动条移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float;left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white; }
.pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:20%;
min-width:200px;
background-color:#dddddd;
}
.pg-body .body-content{
position:absolute;
top:48px;
bottom:0;
right:0;
width:80%;
background-color:palevioletred;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="header-menu"> </div>
</div>
<div class="pg-body">
<div class="body-menu left">a</div>
<div class="body-content left">
<div style="background-color:palevioletred">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</div>
</body>
</html>
3、左侧菜单不动，不同于1中的时，3中position都是absoute，但是在右边添加了overflow：auto属性后达到同1一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float;left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white; }
.pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:20%;
min-width:200px;
background-color:#dddddd;
}
.pg-body .body-content{
position:absolute;
top:48px;
bottom:0;
right:0;
width:80%;
background-color:palevioletred;
overflow:auto;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="header-menu"> </div>
</div>
<div class="pg-body">
<div class="body-menu left">a</div>
<div class="body-content left">
<div style="background-color:palevioletred">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</div>
</body>
</html>
4、左右相互不干扰的方式滚动，就是在3的基础上，对左侧也添加了overflow：auto属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float;left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white; }
.pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:20%;
min-width:200px;
background-color:#dddddd;
overflow:auto;
}
.pg-body .body-content{
position:absolute;
top:48px;
bottom:0;
right:0;
width:80%;
background-color:palevioletred;
overflow:auto;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="header-menu"> </div>
</div>
<div class="pg-body">
<div class="body-menu left">
<div style="background-color:#dddddd">
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
</div>
</div>
<div class="body-content left">
<div style="background-color:palevioletred">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</div>
</body>
</html>
小练习：
鼠标放上去的时候，123表成红色，456背景变为绿色：使用技巧，在class=item的CSS中设置 .item:hover .b {} 表示在item生效时同时生效 class b
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
background-color:#dddddd;
}
.item:hover{
color:red;
}
.item:hover .b{
background-color:green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123</div>
<div class="b">456</div>
</div>
</body>
后台管理：头部布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float:left;
}
.right{
float:right;
} .pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:20%;
min-width:200px;
background-color:#dddddd;
overflow:auto;
}
.pg-body .body-content{
position:absolute;
top:48px;
bottom:0;
right:0;
width:80%;
background-color:palevioletred;
overflow:auto;
z-index: 9;
}
.clear{
clear:both;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px; }
.pg-header .logo{
width:200px;
background-color:#2459a2;
text-align:center; }
.pg-header .user{
margin-right:60px;
padding:0 20px;
background-color:#2459a2;
height:48px;
position:relative; }
.pg-header .user:hover{
background-color:#396bb3; } .pg-header .user .a img{
height: 40px;
width:40px;
margin-top:4px;
border-radius: 50%;
} .pg-header .user .img-content{
position:absolute;
top:48px;
right:-47px;
background-color:red;
z-index: 20; }
.pg-header .user .img-content a{
display: block;
width:130px;
height:40px;
line-height:40px;
padding:0;
margin:0;
display: none; }
.pg-header .user:hover .img-content a{
display: block;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
LOGO
</div>
<div class="user right">
<a class='a' href="#">
<img src="abc.jpg"/>
</a>
<div class="img-content">
<a>我的资料</a>
<a>注销</a> </div>
</div>
<div class="clear"></div>
</div>
<div class="pg-body">
<div class="body-menu left">
<div style="background-color:#dddddd">
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
</div>
</div>
<div class="body-content left">
<div style="background-color:palevioletred">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</div>
</body>
</html>
备注：小图标网址 www.fontawesome.io/icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<link rel="stylesheet" href="font-awesome-master/css/font-awesome.min.css" />
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float:left;
}
.right{
float:right;
} .pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:20%;
min-width:200px;
background-color:#dddddd;
overflow:auto;
}
.pg-body .body-content{
position:absolute;
top:48px;
bottom:0;
right:0;
width:80%;
background-color:palevioletred;
overflow:auto;
z-index: 9;
}
.clear{
clear:both;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px; }
.pg-header .logo{
width:200px;
background-color:#2459a2;
text-align:center; }
.pg-header .user{
margin-right:60px;
padding:0 20px;
background-color:#2459a2;
height:48px;
position:relative; }
.pg-header .user:hover{
background-color:#396bb3; } .pg-header .user .a img{
height: 40px;
width:40px;
margin-top:4px;
border-radius: 50%;
} .pg-header .user .img-content{
position:absolute;
top:48px;
right:-47px;
background-color:red;
z-index: 20; }
.pg-header .user .img-content a{
display: block;
width:130px;
height:40px;
line-height:40px;
padding:0;
margin:0;
display: none; }
.pg-header .user:hover .img-content a{
display: block;
}
.pg-header .icons{
padding:0 10px;
}
.pg-header .icons:hover{
background-color:#396bb3;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
LOGO
</div> <div class="user right">
<a class='a' href="#">
<img src="abc.jpg"/>
</a>
<div class="img-content">
<a>我的资料</a>
<a>注销</a> </div>
</div> <div class="icons right">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<span style="display: inline-block;padding:2px 5px;line-height: 1;background-color:#104E8B;border-radius: 50%;">5</span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i> </div>
<div class="clear"></div>
</div>
<div class="pg-body">
<div class="body-menu left">
<div style="background-color:#dddddd">
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
</div>
</div>
<div class="body-content left">
<div style="background-color:palevioletred">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</div>
</body>
</html>
例子：小图标增加，同时在小图标旁边通过调整padding和border-radius比重来给旁边数字画进圆框中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<link rel="stylesheet" href="font-awesome-master/css/font-awesome.min.css" />
<style>
body{
margin:0;/* 到上方没有间隔 */
}
.left{
float:left;
}
.right{
float:right;
} .pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:20%;
min-width:200px;
background-color:#dddddd;
overflow:auto;
}
.pg-body .body-content{
position:absolute;
top:48px;
bottom:0;
right:0;
width:80%;
background-color:palevioletred;
overflow:auto;
z-index: 9;
}
.clear{
clear:both;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
line-height:48px; }
.pg-header .logo{
width:200px;
background-color:#2459a2;
text-align:center; }
.pg-header .user{
margin-right:60px;
padding:0 20px;
background-color:#2459a2;
height:48px;
position:relative; }
.pg-header .user:hover{
background-color:#396bb3; } .pg-header .user .a img{
height: 40px;
width:40px;
margin-top:4px;
border-radius: 50%;
} .pg-header .user .img-content{
position:absolute;
top:48px;
right:-47px;
background-color:red;
z-index: 20; }
.pg-header .user .img-content a{
display: block;
width:130px;
height:40px;
line-height:40px;
padding:0;
margin:0;
display: none; }
.pg-header .user:hover .img-content a{
display: block;
}
.pg-header .icons{
padding:0 10px;
}
.pg-header .icons:hover{
background-color:#396bb3;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
LOGO
</div> <div class="user right">
<a class='a' href="#">
<img src="abc.jpg"/>
</a>
<div class="img-content">
<a>我的资料</a>
<a>注销</a> </div>
</div> <div class="icons right">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<span style="display: inline-block;padding:2px 5px;line-height: 1;background-color:#104E8B;border-radius: 50%;">5</span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i> </div>
<div class="clear"></div>
</div>
<div class="pg-body">
<div class="body-menu left">
<div style="background-color:#dddddd">
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
<p>bbb</p>
</div>
</div>
<div class="body-content left">
<div style="background-color:palevioletred">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</div>
</body>
</html>
二、JavaScript补充
1、条件语句增加：
name=‘3’
switch(name){
case '1':
age = 123;;
break;
case '2':
age = 456;
break;
default:
age = 777;
}
2、函数返回值
function func(arg){
return arg+1
}
var result = func(1);
console.log(result);
2、函数分类：
1、普通函数
2、匿名函数
setInterval(function(){
console.log(123);
},5000)
3、自执行函数：创建函数并且自动执行
(function(arg){
console.log(arg);
})(1) #前面是函数，后面的括号里的1表示的是函数的实参
3、序列化
JSON.stringify() 对象转换为字符串
JSON.parse() 字符串转换为对象类型
4、转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
将数据经过转义后，保存在cookie中
url = "https://www.sogou.com/web?query=理解";
"https://www.sogou.com/web?query=理解"
new_rul = encodeURI(url)
"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
decodeURI(new_rul)
"https://www.sogou.com/web?query=理解"
5、eval
JS中eval可以写表达式同时也可以执行代码，类似于python只能怪eval（表达式）与exec（执行代码）的集合
6、时间
Date类
var d = new Date（） 表示创建一个对象，Date是一个类，d就封装了当前的时间
var d = new Date()
undefined
d
Mon Jun 05 2017 15:42:27 GMT+0800 (CST)
d.getMinutes()
42
n = d.getMinutes()+5
47 d.setMinutes(n)
1496648847094
d
Mon Jun 05 2017 15:47:27 GMT+0800 (CST)
7、作用域
1、JS中，以函数作为作用域
2、函数的作用域在函数没有执行之前就已经创建
3、函数的作用域存在作用域链，并且也在被调用之前创建
4、函数内局部变量提前声明
8、面向对象：
原型：
function Foo(n){
this.name = n;
}
#Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name);
}
}
三、DOM
1、间接查找：
文本内容操作：
1、innerHTML：和innerText不同的地方在于：前者获取的对象包括标签与内容，而后者只能获取内容不能获取内容对应的标签
2、innerText：innerText仅获取文本内容
3、value：
input value获取当前标签中的值
select 获取选中的value值，selectedIndex
textarea value获取当前标签中的值
例子：搜索框
备注：onfocus表示获取光标 onblur表示移除光标，本例在获取光标时变为空，移除光标时填充‘获取关键字’ 但是现代浏览器可以只通过 placeholder='请输入关键字’ 来完成该操作
<body>
<div style="width:600px;margin:0 auto">
<input id='i1' onfocus="Focus();" onblur="Blur();" value="请输入关键字" type="text" />
</div>
<script>
function Focus(){
console.log(1);
var tag = document.getElementById('i1');
var val = tag.value;
if(val === '请输入关键字'){
tag.value = ''
} }
function Blur(){
console.log(2);
var tag = document.getElementById('i1');
var val = tag.value;
if(val.length === 0){
tag.value = '请输入关键字';
}
}
</script>
</body>
样式操作：
className：
classList：
classList.add
classList.remove
属性操作：
obj = document.getElementById('i1')
obj.setAttribute('key','value'):设置属性
obj.removeAttribute('value'):取消value属性，会将该属性取消
obj.attributes:获取全部属性
创建标签并添加到HTML中：
方法一：字符串的形式
<body>
<input type="button" onclick="AddEle();" value="+"/>
<div id="i1">
<input type="text"/> </div>
<script>
function AddEle(){
//创建标签
//将标签添加到i1内
var tag = "<input type='text'/>";
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
</script>
</body>
备注：insertAdjacentHTML（）第一个参数包括：
1、beforeBegin：插在对象的前面
2、afterBegin：插在对象的第一个孩子处
3、beforeEnd：插在对象的最后一个孩子处
4、afterEnd：插在对象的后面
方法二：对象的方式
<body>
<input type="button" onclick="AddEle();" value="+"/>
<div id="i1">
<input type="text"/> </div>
<script>
function AddEle() {
//创建标签
//将标签添加到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>
提交表单：
任何标签通过DOM都可提交表单
document.getElementById('f1').submit()
<body>
<form id='f1' action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="提交"/>
<a onclick="submitForm();" >提交</a>
</form>
<script>
function submitForm(){
document.getElementById('f1').submit();
}
</script>
</body>
其他：
console.log （） 打印
alert（） 弹窗
confirm() 确认框
例子：
var v = confirm（‘提示信息’）
location.href 获取当前的URL也可以设置当前URL
例子：
location.href
location.href = 'http://www.baidu.com' #重定向
location.reload（） #刷新
setInterval(function(){}, 时间间隔)
#一直执行
var obj= setInterval( function(){
console.log(1);
clearInterval(obj);
},1000)
#只执行一次
setTimeout（function（）{
console.log('timeout'); //5秒后执行一次该操作
},5000）
clearTimeout（）//clearTimeout用法类似于clearInterval
事件：
onclick
onblur
onfocus
onmouseover：鼠标放在上面
onmouseout：鼠标移除
<body>
<table border="1" 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 myTrs = document.getElementsByTagName('tr');
var len = myTrs.length;
for(var i=0;i<len;i++){
myTrs[i].onmouseover = function(){
this.style.backgroundColor = 'red';//这个this 谁调用这个函数,这个this就指向谁,这里是tr调用,所以this就指代第一 二 三个tr }
myTrs[i].onmouseout = function(){
this.style.backgroundColor = '';//这个this 谁调用这个函数,这个this就指向谁,这里是tr调用,所以this就指代第一 二 三个tr }
}
</script>
</body>
DOM1
绑定事件三种方式：
a. 直接标签绑定 onclick=‘xxx（）’
b. 先获取DOM对象，然后进行绑定
document.getElementById('xxx').onclick
this:当前触发事件的标签
c. 通过addEventListner
该方法有三个参数，分别是事件，匿名函数，（true|false）最后一个参数有两个选择，true代表capture，false代表冒泡法
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color:red;
width:300px;
height:200px;
}
#content{
background-color:pink;
width: 150 px;
height:100px; }
</style>
</head>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById('main')
mymain.addEventListener('click',function(){console.log('main')},false);
var mycontent = document.getElementById('content')
mycontent.addEventListener('click',function(){console.log('content')},false);
</script> </body>
冒泡
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color:red;
width:300px;
height:200px;
}
#content{
background-color:pink;
width: 150 px;
height:100px; }
</style>
</head>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById('main')
mymain.addEventListener('click',function(){console.log('main')},true);
var mycontent = document.getElementById('content')
mycontent.addEventListener('click',function(){console.log('content')},true);
</script> </body>
捕捉
词法分析：
首先会有一个活动对象 active object（ao）
1. 形式参数
2. 局部变量
3. 函数声明表达式
过程：
<script>
function t1(age){
console.log(age);
var age = 27;
console.log(age);
function age(){};
console.log(age);
}
t1(3)
</script>
1.形式参数
ao.age = undefine
实参为3，所以ao.age = 3
2. 局部变量声明：
ao.age = undefine 局部变量声明时不做任何改变，所以没有被赋值
3.函数声明表达式：
ao.age = function()
词法分析后代码开始执行：
1、从ao上开始查找 age是function age（）
2、第二行开始被赋值为27
3、第三行是空函数
4、第四行打印还是27
Python学习笔记第十六周的更多相关文章
- Python学习笔记第二十六周（Django补充）
一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type]) #c ...
- Python学习笔记第二十五周（Django补充）
1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...
- Python学习笔记第十八周
目录: 一.JavaScript正则表达式 1.test 2.exec 二.BootStrap 1.响应式 2.图标.字体 3.基本使用 三.Django 1.安装 2.创建目录 3.进入 ...
- Python学习笔记第十二周
目录: 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务 索引 创建数据库 外键 增删改查表 权限 python 操作mysql ORM sqla ...
- python学习笔记-（十六）python操作mysql
一. mysql安装 1. windows下安装mysql 1.1. 下载源: http://dev.mysql.com/downloads/installer/,请认准对应版本 Windows (x ...
- Python学习笔记第十九周
目录: 一.路由系统URL 1.Django请求生命周期 2.创建Django project 3.配置 4.编写程序 二.视图 三.模板 四.ORM操作 内容: 一.URL 1.Django请求生命 ...
- Python学习笔记第十五周
目录: 一.CSS补充 1.position 2.overflow 3.hover 4.background 二.JavaScript 三.DOM 主要内容: 一.CSS补充 1.position 可 ...
- Python学习笔记第二十二周（前端知识点补充）
目录: 一.伪类 二.样式 1.字体 2.背景图片 3.margin和padding 4.列表属性 5.float 6.clear 7.position 8.text-decoration(a标签下划 ...
- python学习笔记（十六）之文件
打开文件用open函数 open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=Tru ...
随机推荐
- 7. 反转整数(Reverse Integer) C++
知识点: 内置变量 INT_MAX INT_MIN 运算结果是否溢出的判断 判断pop>7即pop>INT_MAX%10 判断pop<-8即pop<INT_MIN%10 c ...
- lua 函数基础
函数定义在前,调用在后 如果函数只有一个实参,并且此参数是一个字面字符串或者table构造式,那么可以省略() 例如 print "hello" unpack{1,2} print ...
- Oracle 拼接字符串
Tom大神写的 CREATE OR REPLACE FUNCTION stragg(input varchar2) RETURN varchar2 PARALLEL_ENABLE AGGREGATE ...
- Javascript 将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...
- select2中的ajax请求
下面介绍select2.js的方法,已经整理好文件,可以直接下载使用: 实现效果如下: 引用文件:select2.min.css jquery.js select2.full.min.js <h ...
- reload() 函数
reload() 函数 当一个模块被导入到一个脚本,模块顶层部分的代码只会被执行一次. 因此,如果你想重新执行模块里顶层部分的代码,可以用 reload() 函数.该函数会重新导入之前导入过的模块.语 ...
- linux查看在线用户并踢出用户
linux查看在线用户并踢出用户 1.查看在线用户 w [root@dbserver01 ~]# w 16:45:04 up 16 days, 8:48, 1 user, load average: ...
- nyoj-0469-擅长排列的小明 II(找规律)
nyoj-0469-擅长排列的小明 II 思路:递推分析:为了简便起见,我们用Ai代表第i个数字 , 由于A1一直是1,所以A2只能是2或3.假设dp[n]表示1->n这个序列的方案数 ...
- laravel中对模型和路由做缓存，提高性能
模型缓存命令: php think optimize:schema 路由缓存命令: php think optimize:route
- html <iframe>介绍
iframe 元素会创建包含另外一个文档的内联框架 属性 值 描述 align left.right.top.middle.bottom 不赞成使用.请使用样式代替.规定如何根据周围的元素来对齐此框架 ...