python学习笔记-Day14 -js/dom/jquery
2016-02-19 19:42
701 查看
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能.。
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
嵌入html的方式（最常用的）
login.html
js在嵌入html文件的时间一般都放在body标签的底部，这样可以提高用户体验。
函数的另外一种定义方式，执行效果与先定义一个函数 在执行该函数类似：
注释方式
单行 //
多行 /* */
变量
name = “asd” 定义 全局变量
var name =“123” 定义局部变量
注意 在使用变量的时候 需要注意作用域的问题。
字符串操作
string.trim()
string.charAt(index)
string.substring(start,end)
string.indexOf(char)
string.length
打开chrome，按F12 ，找到console，可以像python一样实时调试js代码：
var a= " sd "
undefined
a.trim()
"sd"
a="qwert"
"qwert"
a.charAt(2)
"e"
a.substring(0.2)
"qwert"
a.indexOf("q")
0
a.length
5
数组操作
声明：
var arr=Array()
var arr=Array[]
添加元素
arr.push(ele) 追加
arr.unshift(ele) 最前插入
arr.splice(index,0,'content') 指定索引插入
移除元素
arr.pop() 数组尾部获取
arr.shift() 数组头部获取
arr.splice(index,count) 数组指定位置后count个字符
切片
arr.slice(start,end)
合并
newArray ＝ arr1.concat(arr2)
翻转
arr.reverse()
字符串化
arr.join('_')
获取长度
arr.length
a=[11,22,33]
[11, 22, 33]
a.push(44)
4
a
[11, 22, 33, 44]
a.unshift(00)
5
a
[0, 11, 22, 33, 44]
a.splice(1,0,"a")
[]
a
[0, "a", 11, 22, 33, 44]
a=[11,22,33]
[11, 22, 33]
a.pop()
33
a.shift()
11
a
[22]
a=[11,22,33]
[11, 22, 33]
a.splice(1,1)
[22]
a
[11, 33]
a=[11,22,33,44,55]
[11, 22, 33, 44, 55]
a.slice(1,3)
[22, 33]
a=[11,22,33,44,55]
[11, 22, 33, 44, 55]
a.slice(1,3)
[22, 33]
a=[11,22,33,44,55]
[11, 22, 33, 44, 55]
b=["qq","ww"]
["qq", "ww"]
a.concat(b)
[11, 22, 33, 44, 55, "qq", "ww"]
a.reverse()
[55, 44, 33, 22, 11]
a
[55, 44, 33, 22, 11]
a.join("_")
"55_44_33_22_11"
a.length
5
流程控制
if语句
if (条件)
{
只有当条件为 true 时执行的代码
}
注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
if..else..
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
If...else if...else
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
for循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
while 循环
while (条件)
{
需要执行的代码
}
do/while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
do
{
需要执行的代码
}
while (条件);
js中也有 break和continue语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
异常处理
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法
throw exception
########################################################################
dom
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
选择器：document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')
常用函数：创建标签，document.createElement('a')
获取或者修改样式
obj.className
获取或设置属性
setattribute(key,val) getattribute(key)
获取或修改样式中的属性
obj.style.属性
提交表单
document.geElementById(‘form’).submit()
常用事件：onclick
onblur
onfocus
on...
其他函数：console.log()
location.href = "url" 和 open('url')
alert()
confirm()
setInterval("alert()",2000); clearInterval(obj)
setTimeout(); clearTimeout(obj)
跑马灯效果
搜索框效果
#####################################################################
jquery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
特点
1.动态特效
2.AJAX
3.通过插件来扩展
4.方便的工具 - 例如浏览器版本判断
5.渐进增强
6.链式调用
7.多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
实例 ： 返回顶部
实例：多选框
实例：菜单
css文件：
实例，表页签 （Tab）
实例：滚动菜单
参考： http://www.cnblogs.com/wupeiqi
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
嵌入html的方式（最常用的）
login.html
<body> <!--........--> <!--方式1--> <script type="text/javascript" src="comm.js"></script> <!--方式2--> <script type="text/javascript"> func() </script> </body>comm.js
function func(){
alert("123");
}注意在写js函数的时候的时候 函数体以{}确定， 每一条语句后面需要加分号js在嵌入html文件的时间一般都放在body标签的底部，这样可以提高用户体验。
函数的另外一种定义方式，执行效果与先定义一个函数 在执行该函数类似：
(function(arg) {
alert(arg);
})("args");注释方式
单行 //
多行 /* */
变量
name = “asd” 定义 全局变量
var name =“123” 定义局部变量
注意 在使用变量的时候 需要注意作用域的问题。
字符串操作
string.trim()
string.charAt(index)
string.substring(start,end)
string.indexOf(char)
string.length
打开chrome，按F12 ，找到console，可以像python一样实时调试js代码：
var a= " sd "
undefined
a.trim()
"sd"
a="qwert"
"qwert"
a.charAt(2)
"e"
a.substring(0.2)
"qwert"
a.indexOf("q")
0
a.length
5
数组操作
声明：
var arr=Array()
var arr=Array[]
添加元素
arr.push(ele) 追加
arr.unshift(ele) 最前插入
arr.splice(index,0,'content') 指定索引插入
移除元素
arr.pop() 数组尾部获取
arr.shift() 数组头部获取
arr.splice(index,count) 数组指定位置后count个字符
切片
arr.slice(start,end)
合并
newArray ＝ arr1.concat(arr2)
翻转
arr.reverse()
字符串化
arr.join('_')
获取长度
arr.length
a=[11,22,33]
[11, 22, 33]
a.push(44)
4
a
[11, 22, 33, 44]
a.unshift(00)
5
a
[0, 11, 22, 33, 44]
a.splice(1,0,"a")
[]
a
[0, "a", 11, 22, 33, 44]
a=[11,22,33]
[11, 22, 33]
a.pop()
33
a.shift()
11
a
[22]
a=[11,22,33]
[11, 22, 33]
a.splice(1,1)
[22]
a
[11, 33]
a=[11,22,33,44,55]
[11, 22, 33, 44, 55]
a.slice(1,3)
[22, 33]
a=[11,22,33,44,55]
[11, 22, 33, 44, 55]
a.slice(1,3)
[22, 33]
a=[11,22,33,44,55]
[11, 22, 33, 44, 55]
b=["qq","ww"]
["qq", "ww"]
a.concat(b)
[11, 22, 33, 44, 55, "qq", "ww"]
a.reverse()
[55, 44, 33, 22, 11]
a
[55, 44, 33, 22, 11]
a.join("_")
"55_44_33_22_11"
a.length
5
流程控制
if语句
if (条件)
{
只有当条件为 true 时执行的代码
}
注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
if..else..
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
If...else if...else
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
for循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
while 循环
while (条件)
{
需要执行的代码
}
do/while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
do
{
需要执行的代码
}
while (条件);
js中也有 break和continue语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
异常处理
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法
throw exception
########################################################################
dom
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
选择器：document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')
常用函数：创建标签，document.createElement('a')
获取或者修改样式
obj.className
获取或设置属性
setattribute(key,val) getattribute(key)
获取或修改样式中的属性
obj.style.属性
提交表单
document.geElementById(‘form’).submit()
常用事件：onclick
onblur
onfocus
on...
其他函数：console.log()
location.href = "url" 和 open('url')
alert()
confirm()
setInterval("alert()",2000); clearInterval(obj)
setTimeout(); clearTimeout(obj)
跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<title>欢迎blue shit莅临指导 </title>
<script type='text/javascript'> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval('Go()',1000); </script>
</head>
<body>
</body>
</html>搜索框效果
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.gray{
color:gray;
}
.black{
color:black;
} </style>
<script type="text/javascript"> function Enter(){ var id= document.getElementById("tip")
id.className = 'black'; if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
}
} function Leave(){ var id= document.getElementById("tip") var val = id.value; if(val.length==0||id.value.trim()==''){
id.value = '请输入关键字'
id.className = 'gray';
}else{
id.className = 'black';
}
} </script>
</head>
<body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>
</body>
</html>#####################################################################
jquery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
特点
1.动态特效
2.AJAX
3.通过插件来扩展
4.方便的工具 - 例如浏览器版本判断
5.渐进增强
6.链式调用
7.多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
实例 ： 返回顶部
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
bottom: 0px;
right: 0px;
}
.hide{
display: none;
}
</style></head><body><div style="height: 2000px;"></div><div onclick="GoTop()" class="back hide">返回顶部</div><script src="jquery-1.8.2.js"></script><script type="text/javascript">
function GoTop(){ //返回顶部 $(window).scrollTop(0);
}
$(function(){
$(window).scroll(function(){ //当滚动滑轮时，执行函数体
//获取当前滑轮滚动的高度
var top = $(window).scrollTop(); if(top>100){ //展示“返回顶部” $('.back').removeClass('hide');
}else{ //隐藏“返回顶部” $('.back').addClass('hide');
}
});
});</script></body></html>实例：多选框
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script type="text/javascript" src='jquery-1.8.2.js'></script>
<script type="text/javascript">
$(function(){
$('#selectAll').click(function(){
$('#checklist :checkbox').attr('checked',true);
})
$('#unselectAll').click(function(){
$('#checklist :checkbox').attr('checked',false);
})
$('#reverseAll').click(function(){
$('#checklist :checkbox').each(function(){
$(this).attr('checked',!$(this).attr('checked'))
})
})
})
</script>
</head>
<body>
<div id='checklist'>
<input type='checkbox' value='1'/>篮球
<input type='checkbox' value='2'/>足球
<input type='checkbox' value='3'/>羽毛球
</div>
<input type='button' value='全选' id='selectAll' />
<input type='button' value='不选' id='unselectAll' />
<input type='button' value='反选' id='reverseAll' />
</body>
</html>实例：菜单
css文件：
.hide{
display: none;
}.container{
width:300px;
height: 600px;
background-color: #ddd;
border: 1px solid #999;
}.container .title{
height: 38px;
font-size: 28px;
line-height: 38px;
background-color: orange;
cursor: pointer;
}.container .body{
background-color:white;
}.container .body a{
display:block;
padding: 10px;
}html文件<!DOCTYPE html><html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" type="text/css" href="common.css" />
<script type="text/javascript" src='jquery-1.8.2.js'></script>
</head>
<body>
<div class='container'>
<div>
<div class='title'>Menu1</div>
<div class='body'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class='title'>Menu1</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.title').click(function(){
$(this).parent().siblings().children('.body').addClass('hide');
$(this).next().removeClass('hide');
});
}); </script>
</body></html>实例，表页签 （Tab）
body {
margin: 0 auto;
font-family: Arial;
_font-family: 宋体,Arial;
font-size: 12px;
}body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {
margin: 0;
padding: 0;
}ol, ul, li {
list-style: none;
}a{
cursor:pointer;
text-decoration:none;
}/*a:hover{
color: #F60 !important;
text-decoration: underline;
}*/img{
border:none;
border-width:0px;
}table{
border-collapse: collapse;
border-spacing: 0;
}.red{
color: #c00!important;
}.m8{
margin:8px;
}.mt10{
margin-top:10px;
}.mt20{
margin-top:20px;
}.mr5{
margin-right:5px;
}.ml5{
margin-left:5px;
}.ml10{
margin-left:10px;
}.mb10{
margin-bottom:10px;
}.pt18{
padding-top:18px;
}.pt20{
padding-top:20px;
}.pb20{
padding-bottom:20px;
}.nbr{
border-right:0px;
}.font12{
font-size:12px;
}.font14{
font-size:14px;
}.font16{
font-size:16px;
}.bold{
font-weight:bold;
}.left{
float:left;
}.right{
float:right;
}.hide{
display:none;
}.show{
display:table;
}.clearfix{
clear:both;
}.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}* html .clearfix {zoom: 1;}.container{
width:1190px;
margin-left:auto;
margin-right:auto;
}.group-box-1 .title{
height: 33px;
line-height: 33px;
border: 1px solid #DDD;
background: #f5f5f5;
padding-top: 0;
padding-left: 0;
}.group-box-1 .title .title-font{
display: inline-block;
font-size: 14px;
font-family: 'Microsoft Yahei','SimHei';
font-weight: bold;
color: #333;
padding-left: 10px;
}.group-box-1 .body {
border: 1px solid #e4e4e4;
border-top: none;
}.tab-menu-box1 {
border: 1px solid #ddd;
margin-bottom: 20px;
}.tab-menu-box1 .menu {
line-height: 33px;
height: 33px;
background-color: #f5f5f5;
}.tab-menu-box1 .content {
min-height: 100px;
border-top: 1px solid #ddd;
background-color: white;
}.tab-menu-box1 .menu ul {
padding: 0;
margin: 0;
list-style: none; /*position: absolute;*/}.tab-menu-box1 .menu ul li {
position: relative;
float: left;
font-size: 14px;
font-family: 'Microsoft Yahei','SimHei';
text-align: center;
font-size: 14px;
font-weight: bold;
border-right: 1px solid #ddd;
padding: 0 18px;
cursor: pointer;
}.tab-menu-box1 .menu ul li:hover {
color: #c9033b;
}.tab-menu-box1 .menu .more {
float: right;
font-size: 12px;
padding-right: 10px;
font-family: "宋体";
color: #666;
text-decoration: none;
}.tab-menu-box1 .menu a:hover {
color: #f60 !important;
text-decoration: underline;
}.tab-menu-box1 .menu .current {
margin-top: -1px;
color: #c9033b;
background: #fff;
height: 33px;
border-top: 2px solid #c9033b;
z-index: 10;
}.tab-menu-box-2 .float-title {
display: none;
top: 0px;
position: fixed;
z-index: 50;
}.tab-menu-box-2 .title {
width: 890px;
border-bottom: 2px solid #b20101;
border-left: 1px solid #e1e1e1;
clear: both;
height: 32px;
}.tab-menu-box-2 .title a {
float: left;
width: 107px;
height: 31px;
line-height: 31px;
font-size: 14px;
font-weight: bold;
text-align: center;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;
text-decoration: none;
color: #333;
cursor: pointer;
}.tab-menu-box-2 .title a:hover {
background-position: -26px -271px;
text-decoration: none;
color: #fff;
}.tab-menu-box-2 .content {
min-height: 100px;
background-color: white;
}.tab-menu-box3 {
border: 1px solid #ddd;
}.tab-menu-box3 .menu {
line-height: 33px;
height: 33px;
background-color: #f5f5f5;
}.tab-menu-box3 .content {
height: 214px;
border-top: 1px solid #ddd;
background-color: white;
}.tab-menu-box3 .menu ul {
padding: 0;
margin: 0;
list-style: none; /*position: absolute;*/}.tab-menu-box3 .menu ul li {
position: relative;
float: left;
font-size: 14px;
font-family: 'Microsoft Yahei','SimHei';
text-align: center;
font-size: 14px;
width:50%;
cursor: pointer;
}
.tab-menu-box3 .menu ul li:hover {
color: #c9033b;
}.tab-menu-box3 .menu .more {
float: right;
font-size: 12px;
padding-right: 10px;
font-family: "宋体";
color: #666;
text-decoration: none;
}.tab-menu-box3 .menu a:hover {
color: #f60 !important;
text-decoration: underline;
font-weight: bold;
}.tab-menu-box3 .menu .current {
margin-top: -1px;
color: #c9033b;
background: #fff;
height: 33px;
border-top: 2px solid #c9033b;
z-index: 10;
font-weight: bold;
}html<!DOCTYPE html>
<html>
<head></head>
<link href="common.css" rel="stylesheet" />
<body>
<div class='container'>
<div class='tab-menu-box1'>
<div class='menu'>
<ul id='tab-menu-title'>
<li class='current' content-to='1'>价格趋势</li>
<li content-to='2'>市场分布</li>
<li content-to='3'>其他</li>
</ul>
</div>
<div id='tab-menu-body' class='content'>
<div content='1'>content1</div>
<div content='2' class='hide'>content2</div>
<div content='3' class='hide'>content3</div>
</div>
</div>
</div>
<script src="./jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function(){
ChangeTab('#tab-menu-title', '#tab-menu-body'); })
function ChangeTab(title, body) {
$(title).children().bind("click", function () {
$menu = $(this);
$content = $(body).find('div[content="' + $(this).attr("content-to") + '"]');
$menu.addClass('current').siblings().removeClass('current');
$content.removeClass('hide').siblings().addClass('hide'); });
}
</script>
</body>
</html>实例：滚动菜单
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
<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></head><body>
<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 type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
Init();
}); function Init(){
$(window).scroll(function() { var scrollTop = $(window).scrollTop(); if(scrollTop > 50){
$('.catalog').addClass('fixed');
}else{
$('.catalog').removeClass('fixed');
}
$('.content').children().each(function(){ var offSet = $(this).offset(); var offTop = offSet.top - scrollTop; var height = $(this).height(); if(offTop<=0 && offTop> -height){ //去除其他
//添加自己
var docHeight = $(document).height(); var winHeight = $(window).height(); if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{ var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
}
}
});
});
} </script></body></html>参考： http://www.cnblogs.com/wupeiqi
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 弹幕调试 jquery.danmu.js
- jquery对象和DOM对象的相互转换
- Jquery Ajax调用aspx页面方法
- WEB前端--JQuery
- Jquery(JS)中.height()和.innerHeight()，outerHeight()的差别
- jquery遍历数组与筛选数组的方法
- jquery-ui-处理拖动位置Droppable，Draggable
- jQuery-强大的jQuery选择器 (详解)
- jQuery+PHP+MySQL实现无限级联下拉框效果
- 使用jQuery的easydrag插件实现可拖动的DIV弹出框
- jQuery自学教程（二）——选择器
- js jquery
- jQuery-velocity.js 插件的简易使用
- jquery基础
- jquery常用总结
- HTML5中的data-*属性和jQuery中的.data()方法使用
- jQuery插件的使用方法
- 最常见的20个jQuery面试问题及答案
- jquery 操作大全
- jQuery全屏滚动插件fullPage.js