Python学习笔记第十五周
目录：
一、CSS补充
1、position
2、overflow
3、hover
4、background
二、JavaScript
三、DOM
主要内容：
一、CSS补充
1、position
可以定义元素锚定到哪个位置
1、fixed固定在窗口的某个位置
例子：
将网页分为上下两部分，其中头部占据页面上方，内容部分可以滑动，但是头部不会被覆盖
<style>
.pg-header{
height:48px;
background-color: black;
color:#dddddd;
position: fixed;
top:0;
right:0;
left:0; } .pg-body{
background-color: #dddddd;
height: 5000px;
margin-top:48px;
}
</style>
</head>
<body>b
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
2、absolute 绝对定位 ，需要和relative一起使用
将absolute嵌套在relatvie中，实现某一特定位置的绝对定位
<body>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
<div style="position: absolute;left:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
</div>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
<div style="position: absolute;right:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
</div>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
<div style="position: absolute;right:0;top: 0; width:50px;height: 50px;background-color:black"></div>
</div>
3、opacity：取值0~1，0表示全透明，1表示完全遮住
例子：页面三层分层
<body>
<div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color: white;height:400px;width:500px">
<input type="text" />
</div>
<div style="z-index: 9;position:fixed;top:0;bottom: 0;right:0;left:0;opacity: 0.5;background-color:black"></div>
<div style="height: 5000px;background-color:green">abc</div>
</body>
2. overflow
overflow包含两个属性：
1、hidden：超出的部分隐藏
2、auto：超出的部分出现滚动条
例子：定义div标签，同时在该标签内定义一个超出标签范围的图片，查看该效果。
（1）超出部分隐藏
<div style="height:200px;width:200px;overflow: hidden;">
<img src="a.jpg"/>
</div>
(2) 超出部分变为滚动条
<div style="height:200px;width:200px;overflow:auto ">
<img src="a.jpg"/>
</div>
3、hover
当鼠标移动某一个元素下，应用该元素另外定义的一个CSS属性中，使用hover元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top:0;
right:0;
left:0;
height:48px;
background-color:#2459a2;
line-height:48px;
color:white; }
.pg-body{
margin-top: 50px
}
.w{
width:980px;
margin:0 auto; }
.pg-header .menu{
display: inline-block;
padding:0 10px;
}
.pg-header .menu:hover{
background-color:blue;
} </style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="menu">LOGO</a>
<a class="menu">最新发布</a>
<a class="menu">人类</a>
<a class="menu">24区</a>
<a class="menu">段子</a>
</div>
</div>
<div class="pg-body">
<div class="w"></div>
</div>
</body>
4、background
background分为几种不同的属性：
1、background-color：定义背景颜色
2、background-image：url（image位置加名字） 定义背景图片
3、background-repeat：repeat-x|repeat-y|no-repeate哪个位置重复
4、background-position：背景图片的位置定义可以但是使用background-position-x和background-postion-y分别定义
5、background：背景颜色 iamge 哪个位置重复 x轴位置 y轴位置 background可以一次全部定义
例子：
<div style="background:#dddddd url(a.jpg) no-repeat 80px 80px;height: 800px;"></div>
<style>
.menu{
height:30px;
width:200px;
position: relative; }
.input_w{
height:30px;
width:190px;
padding-right:20px;
}
</style>
</head>
<body> <div class="menu"> <input class='input_w' type="text" name='name' />
<span style="position:absolute;left:190px;top:5px;background-image:url(i_name.jpg);background-position:3px 5px;background-repeat: no-repeat;
display: inline-block;height: 30px;width:20px;"></span>
</div> </body>
二、JavaScript
JS是独立的语言，浏览器具有JS解释器的功能
JS代码存在形式：
-head中
<script type="text/javascript">
alert('123')
</script>
-文件
<script src="js路径"></script>
PS:JS代码块需要放置在body标签的最下方，由于html代码从上到下执行，如果head中js代码耗时严重，会导致用户长时间没法看到页面，如果放置在body代码块底部，即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已
注释：
单行注释 //
多行注释 /* */
变量：
js中的变量声明是一个非常容易出错的点，局部变量必须以var开头，如果未使用var，则默认表明是一个全局变量
<script type="text/javascript">
// 全局变量
name = 'seven';
function func(){
// 局部变量
var age = 18;
// 全局变量
gender = "男"
}
</script>
数据类型
JS的数据类型分为原始类型和对象类型：
原始类型：
- 数字
- 字符串
- 布尔值
对象类型：
- 数组
- 字典
特别的，数字、布尔值、null、undefine、字符串是不可变的
注意：
undefined：在js中，如果声明了某个变量，而该变量未赋值，则该变量类型为UNDEFINED，值为undefined，undefined是系统为这种情况自动定义的
null：是为一个对象占位，后面用到该对象再重新为该对象赋值，是开发者自己赋值的例如 var obj = null 先占位，等用到再赋值 obj = new Animal（）
// null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。
数字：
JS中数字不区分整数和浮点数，JS中所有数字均用浮点数表示
转换：
parseInt（）将某值转成数字，不成功则NaN
parseFloat（）将某值转为浮点数，不成功则NaN
特殊值：
NaN，非数字，可使用isNaN（num）来判断, NaN和一切比较都是false，除非 不等于！=为true
Infinity 无穷大，可使用isFinite（num）来判断
更多数值计算：
常量 Math.E
常量e，自然对数的底数。 Math.LN10
10的自然对数。 Math.LN2
2的自然对数。 Math.LOG10E
以10为底的e的对数。 Math.LOG2E
以2为底的e的对数。 Math.PI
常量figs/U03C0.gif。 Math.SQRT1_2
2的平方根除以1。 Math.SQRT2
2的平方根。 静态函数 Math.abs( )
计算绝对值。 Math.acos( )
计算反余弦值。 Math.asin( )
计算反正弦值。 Math.atan( )
计算反正切值。 Math.atan2( )
计算从X轴到一个点的角度。 Math.ceil( )
对一个数上舍入。 Math.cos( )
计算余弦值。 Math.exp( )
计算e的指数。 Math.floor( )
对一个数下舍人。 Math.log( )
计算自然对数。 Math.max( )
返回两个数中较大的一个。 Math.min( )
返回两个数中较小的一个。 Math.pow( )
计算xy。 Math.random( )
计算一个随机数。 Math.round( )
舍入为最接近的整数。 Math.sin( )
计算正弦值。 Math.sqrt( )
计算平方根。 Math.tan( )
计算正切值。
字符串：
字符串是由字符组成的数组，但是在JS中字符串是不可变的，可以访问字符串任意位置的文本但是JS并未提供修改已知字符串内容的方法
常用功能：
obj.length 长度 obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
备注：
obj.splice():第一个值是要执行动作的初始索引，第二个值从该索引开始要删除几个，第三个参数为添加的内容
例子：
a = [11,22,33]
a.splice(1,1,99) 表示删除索引1后面一个，再在该位置添加99
a.splice(1,0,909) 表示插入一个值
a.splice(1,1) 表示删除一个值
join方法：
a.join('_')
"11_99_33"
布尔类型：
布尔类型仅包含真假，与python不同的是其首字母小写
- == 比较数值相等，不管类型
- ！= 数值不等不管类型
- === 比较数值与类型相等
- ！=== 数值与类型都不相等
- || 或
- && 且
数组：
JS中数组类似于python中的列表
常见功能：
obj.length 数组的大小 obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
JS条件语句
JS中支持两个条件语句，分别是if和switch
if(条件){
}else if(条件){
}else{
}
if
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
switch
JS循环语句
JS中支持三种不同的循环语句，分别是：
var names = ["alex", "tony", "rain"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
方式一
var names = ["alex", "tony", "rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
方式二
while(条件){
// break;
// continue;
}
方式三
arguments函数：
arguments可以将传入的函数值放入一个列表中，通过索引可以将调入的值取出
function func1(){
console.log(arguments.length)
}
func1(1,2,3,4,5)
可以直接取出该值为5，表示长度为5
function func2(){
if(arguments.length !== 3){
throw new Error('the parm should be 3')
}
}
//如果参数不等于3，就报错，不必函数中定义形参
func2(1,2,3,4,5)
函数：
1、基本函数
JS中函数基本上可以分为以下三类：
// 普通函数
function func(arg){
return true;
} // 匿名函数
var func = function(arg){
return "tony";
} // 自执行函数
(function(arg){
console.log(arg);
})('123')
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
异常处理：
try{
//这段代码从上往下运行，其中任何一个语句抛出异常该代码结束
}
catch（e）{
//如果try代码块汇总抛出异常，catch代码块中代码就会被执行
// e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally{
//无论try代码是否有异常抛出，甚至try代码块中有return语句，finally代码块始终会被执行
}
//注：主动抛出异常throw Error（‘XXXXXX’）
三、DOM
文档对象类型（Document Object Model， DOM）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式，我们最为关心的是，DOM把网页和脚本以及其他编程语言联系起来，DOM属于浏览器，而不是JS语言的规范的规定的核心内容。
1、查找元素
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作
内容：
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
属性：
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性 /*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancelAll();"/>
<input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" >
<thead> </thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = true;
}
}
} function CancelAll(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){ var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
inp.checked = false;
}
}
} function ReverseCheck(ths){
var tb = document.getElementById('tb');
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
if(inp.checked){
inp.checked = false;
}else{
inp.checked = true;
}
}
}
} </script>
</body>
</html>
3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
备注：
tag = document.getElementById('i2')
tag.className = 'c2'
tag.classList #查看该tag下class的列表
tag.classList.add('c1') #添加一个新的class
tag.classList.remove('c3') #删除一个class
onclick：表示点击
4、标签操作
a、创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "gavin"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/gavin" // 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/gavin'>gavini</a>"
b、操作标签
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
5、样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
<script>
function Focus(ths){
ths.style.color = "black";
if(ths.value == '请输入关键字' || ths.value.trim() == ""){
ths.value = "";
}
}
function Blur(ths){
if(ths.value.trim() == ""){
ths.value = '请输入关键字';
ths.style.color = 'gray';
}else{
ths.style.color = "black";
}
}
</script>
6、位置操作
总文档高度
document.documentElement.offsetHeight 当前文档占屏幕高度
document.documentElement.clientHeight 自身高度
tag.offsetHeight 距离上级定位高度
tag.offsetTop 父定位标签
tag.offsetParent 滚动高度
tag.scrollTop /*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin: 0;">
<div style="height: 900px;"> </div>
<div style="padding: 10px;">
<div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</div>
</div> <script>
var i1 = document.getElementById('i1'); console.log(i1.clientHeight); // 可见区域：height + padding
console.log(i1.clientTop); // border高度
console.log('=====');
console.log(i1.offsetHeight); // 可见区域：height + padding + border
console.log(i1.offsetTop); // 上级定位标签的高度
console.log('=====');
console.log(i1.scrollHeight); //全文高：height + padding
console.log(i1.scrollTop); // 滚动高度
console.log('====='); </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style> body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: 0 auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div> </div>
<script>
function ScrollEvent(){
var bodyScrollTop = document.body.scrollTop;
if(bodyScrollTop>50){
document.getElementsByClassName('catalog')[0].classList.add('fixed');
}else{
document.getElementsByClassName('catalog')[0].classList.remove('fixed');
} }
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style> body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
h1{
padding: 0;
margin: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: 0 auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
border: 1px solid red;
}
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog" id="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content" id="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div> </div>
<script>
function ScrollEvent(){
var bodyScrollTop = document.body.scrollTop;
if(bodyScrollTop>50){
document.getElementsByClassName('catalog')[0].classList.add('fixed');
}else{
document.getElementsByClassName('catalog')[0].classList.remove('fixed');
} var content = document.getElementById('content');
var sections = content.children;
for(var i=0;i<sections.length;i++){
var current_section = sections[i]; // 当前标签距离顶部绝对高度
var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部，相对高度
var offTop = scOffTop - bodyScrollTop; // 当前标签高度
var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){
// 当前标签添加active
// 其他移除 active
var menus = document.getElementById('catalog').children;
var current_menu = menus[i];
current_menu.classList.add('active');
for(var j=0;j<menus.length;j++){
if(menus[j] == current_menu){ }else{
menus[j].classList.remove('active');
}
}
break;
} } }
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style> body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
h1{
padding: 0;
margin: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: 0 auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
border: 1px solid red;
}
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog" id="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content" id="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section" style="height: 200px;">
<h1>第三章</h1>
</div>
</div>
</div> </div>
<script>
function ScrollEvent(){
var bodyScrollTop = document.body.scrollTop;
if(bodyScrollTop>50){
document.getElementsByClassName('catalog')[0].classList.add('fixed');
}else{
document.getElementsByClassName('catalog')[0].classList.remove('fixed');
} var content = document.getElementById('content');
var sections = content.children;
for(var i=0;i<sections.length;i++){
var current_section = sections[i]; // 当前标签距离顶部绝对高度
var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部，相对高度
var offTop = scOffTop - bodyScrollTop; // 当前标签高度
var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){
// 当前标签添加active
// 其他移除 active // 如果已经到底部，现实第三个菜单
// 文档高度 ＝ 滚动高度 + 视口高度 var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
var b = bodyScrollTop + document.documentElement.clientHeight;
console.log(a+60,b);
if(a == b){
var menus = document.getElementById('catalog').children;
var current_menu = document.getElementById('catalog').lastElementChild;
current_menu.classList.add('active');
for(var j=0;j<menus.length;j++){
if(menus[j] == current_menu){ }else{
menus[j].classList.remove('active');
}
}
}else{
var menus = document.getElementById('catalog').children;
var current_menu = menus[i];
current_menu.classList.add('active');
for(var j=0;j<menus.length;j++){
if(menus[j] == current_menu){ }else{
menus[j].classList.remove('active');
}
}
} break;
} } }
</script>
</body>
</html>
7、提交表单
document.geElementById('form').submit()
8、其他操作
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
Python学习笔记第十五周的更多相关文章
- Python学习笔记第二十五周（Django补充）
1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...
- Python学习笔记（十五）：类基础
以Mark Lutz著的<Python学习手册>为教程,每天花1个小时左右时间学习,争取两周完成. --- 写在前面的话 2013-7-24 23:59 学习笔记 1,Python中的大多 ...
- Python学习笔记第十八周
目录: 一.JavaScript正则表达式 1.test 2.exec 二.BootStrap 1.响应式 2.图标.字体 3.基本使用 三.Django 1.安装 2.创建目录 3.进入 ...
- Python学习笔记第十二周
目录: 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务 索引 创建数据库 外键 增删改查表 权限 python 操作mysql ORM sqla ...
- python学习笔记-（十五）RabbitMQ队列
rabbitMQ是消息队列:想想之前的我们学过队列queue:threading queue(线程queue,多个线程之间进行数据交互).进程queue(父进程与子进程进行交互或者同属于同一父进程下的 ...
- Python学习笔记第二十六周（Django补充）
一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type]) #c ...
- Python学习笔记第十九周
目录: 一.路由系统URL 1.Django请求生命周期 2.创建Django project 3.配置 4.编写程序 二.视图 三.模板 四.ORM操作 内容: 一.URL 1.Django请求生命 ...
- Python学习笔记第十六周
目录: 一.CSS补充 1.页面布局 二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域 三.DOM 1.间接查找 文本操作 样式操作 ...
- Python 学习笔记（十五）Python类拓展（二）方法
方法 绑定方法和非绑定方法 绑定方法和非绑定方法在创建时没有任何区别,同一方法,既可以为绑定方法,也可以为非绑定方法,一切不同都只在调用时的手法上有所区别. 绑定方法即该方法绑定类的一个实例上,必须将 ...
随机推荐
- Beta阶段——第6篇 Scrum 冲刺博客
Beta阶段--第6篇 Scrum 冲刺博客 标签:软件工程 一.站立式会议照片 二.每个人的工作 (有work item 的ID) 昨日已完成的工作 人员 工作 林羽晴 完成了函数的编写,提供报表数 ...
- Sona
Sona Sona , Maven of the Strings . Of cause, she can play the zither. Sona can't speak but she can m ...
- Kali配置教程
1.配置软件源 所有操作没有说明,都是以root身份执行. 打开一个终端执行: cat >> /etc/apt/sources.list <<EOF deb http://mi ...
- 在springboot中用redis实现消息队列
环境依赖 创建一个新的springboot工程,在其pom文件,加入spring-boot-starter-data-redis依赖: <dependency> <groupId&g ...
- 0.5px的宽度的边框
方法1: .border { position: relative;} .border:before { content: "";/* 注意这里为双引号 */ ...
- 批量设置样式json版
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- day2编程语言的两大分类
编程的语言的发展经历了 机器语言 汇编语言 高级语言 高级语言更贴近人类的语言,但是必须被翻译成计算机能读懂的二进制后,才能够被执行,按照翻译方式分为 1 编译型(需要编译器,相当于用谷歌翻译); ...
- WPF技术实现控件截图
1.http://www.cnblogs.com/TianFang/archive/2012/10/07/2714140.html 2.http://www.silverlightchina.net/ ...
- HTML5 ③
超链接和锚链接: 1.超链接标签:<a herf="需要连接的页面地址" target=“01._self :在当前页面打开 *默认值 02. _blank :新窗口 ...
- Saiku的基本使用介绍（三）
Saiku的基本使用介绍(这里都是使用Admin用户登录系统) 1.启动安装好的Saiku ( ./start-saiku.sh ) ,浏览器使用访问系统 http://localhost:8080 ...