一、介绍
1、原生 js
分析一下，元素js的缺点：
1.不能添加多个入口函数（window.onload）,如果添加了多个，后面的会把前面的给覆盖。
2.原生js的api名字都太长太难记。
3.原生js有的时候代码冗余。
4.原生js中有些属性或者方法，有浏览器兼容问题。
5.原生js容错率比较低，前面的代码出了问题，后面的代码执行不了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<input type="button" value="设置边框" id="btnOne"/>
<input type="button" value="设置文本" id="btnTwo"/>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!-- 需求：点击按钮给三个div设置边框和文本 -->
<script>
//入口函数
window.onload = function () {
//1.先要获取对应的元素
var btnOne = document.getElementById("btnOne");
var btnTwo = document.getElementById("btnTwo");
var divs = document.getElementsByTagName("div");
//2.给btnOne按钮设置点击事件
btnOne.onclick = function () {
for(var i = 0 ; i < divs.length; i++){
divs[i].style.border = '1px solid red';
}
}
//3.给btnTwo按钮设置点击事件
btnTwo.onclick = function () {
for(var i = 0 ; i < divs.length; i++){
divs[i].textContent = "我是设置的文本";
}
}
}
//再来一个入口函数。
// window.onload = function () {
// console.log("我又是一个入口函数");
// }
</script>2、jquery
jQuery的优势
1.是可以写多个入口函数的。
2.jQuery的api名字都容易记忆。
3.jQuery代码简洁（隐式迭代）。
4.jQuery帮我们解决了浏览器兼容问题。
5.容错率较高，前面的代码出来了问题，后面的代码不受影响。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<input type="button" value="设置边框" id="btnOne"/>
<input type="button" value="设置文本" id="btnTwo"/>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!-- 需求：点击按钮给三个div设置边框和文本 -->
<script src="./jquery-1.12.4.js"></script>
<script>
//入口函数
$(document).ready(function () {
//设置边框
$('#btn0ne').click(function () {
$('div').css('border','1px solid red');
});
//设置文本
$('#btnTwo').click(function () {
$('div').text('我是设置的文本');
});
});
//这又是一个入口函数
$(document).ready(function () {
console.log("我又是一个入口函数");
});
</script>3、jq的使用步骤
如何使用jQuery?
1、引入jQuery文件
2、写一个入口函数.
3、找到你要操作的元素(jQuery选择器),去操作他(给他添加属性,样式,文本….).
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<div></div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
//链式编程.
$('div').width(100).height(100).css('backgroundColor','red').text('哈哈');
});
</script>4、jq版本区别
1.官网中下载jQuery文件.
2.jQuery有版本.
- 支持老浏览器比如ie678 停止更新了
- 不支持老浏览器的 停止更新了
- 不支持老浏览器的 更新中
3.每一个版本jQuery又有压缩版和未压缩版。
- compressed 压缩版也叫精简版，去掉了格式，体积小，用于发布
- uncompressed 未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发
二、入口函数
jq 的入口函数有两种写法
$(document).ready(function () {
});$(function () {
});jQuery入口函数和window.onload入口函数的区别.
- window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的.
- 执行时机不同: jQuery入口函数要快于window.onload.
- jQuery入口函数要等待页面上dom树加载完后执行.
- window.onload要等待页面上所有的资源(dom树/外部css/js连接,图片)都加载完毕后执行.
三、$ 函数
1、$是什么?
引入一个js文件，是会执行这js文件中的代码的，而 jquery.js 就是一个函数
jQuery文件是一个自执行函数,执行这个jQUERY文件中的代码,其实就是执行这个自执行函数.
这个自执行文件就是给window对象添加一个jQuery属性和$属性.
$其实和jQuery是等价的,是一个函数.
console.log(window.jQuery === window.$);//true2、$ 参数
$是一个函数，参数传递不同,效果也不一样.
- 如果参数传递的是一个匿名函数，则是入口函数
$(function(){
});- 如果参数传递的是一个字符串-选择器/创建一个标签
$('#one');
$('<div>啦啦,我是一个div</div>');- 如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象.
$(dom对象);四、dom对象和jq对象
1、dom 对象
原生js选择器获取到的对象
特点:只能调用dom方法或者属性,不能调用jQuery的属性或者方法.
document.getElementById("");
document.getElementsByTagName("");
var div1 = document.getElementById("one");
div1.style.backgroundColor = 'red'; //dom对象是可以调用dom的属性或者方法
//报错了div1.css is not a function, 因为dom对象不能调用jQuery的方法.
// div1.css('backgroundColor','green');2、jQuery对象
利用jQuery选择器获取到的对象
特点:只能调用jQuery的方法或者属性,不能调用dom对象的属性或者方法.
var $div1 = $('#one');
$div1.css('backgroundColor','green');//jQuery对象是可以调用jQuery的方法的.
//报错了Cannot set property 'backgroundColor' of undefined
// $div1.style.backgroundColor = 'red';3、相互转换
dom对象转换成jQuery对象.
var div1 = document.getElementById("one");
var $div1 = $(div1);jQuery对象转换成dom对象.
var $divs = $('div');
// 方式1、使用下标
var div1 = $divs[0];
// 方式2、使用jQuery的方法 get();
var div2 = $divs.get(1);五、jquery选择器
1、基本选择器
//id选择器
$('#id')
//类选择器
$(".类名")//标签选择器
$("标签名")
//并集选择器
$('.box,.box2')
//交集选择器
$('li.current')2、层次选择器
//需求1:获取id为father这个元素的所有子div.
console.log($('#father > div'));
//需求2:获取id为father这个元素的所有子div以及所有子p.
//console.log($('#father > div , p'));//不行,这种意思是获取id为father这个元素的所有子div以及页面上所有的p.
console.log($('#father>div , #father>p'));
//需求3:获取id为father这个div的所有后代div.
console.log($('#father div'));
//需求4:获取id为father这个div的所有后代div,以及id为father这个div的所有后代span.
console.log($('#fahter div , #father span'));3、过滤选择器
:odd：第奇数个
:even：第偶数个
:eq(n)：第 n 个
//设置奇数行li标签颜色为天蓝色.
$('li:odd').css('backgroundColor','skyblue');
//设置偶数行li标签背景色为粉色
$('li:even').css('backgroundColor','pink');
//设置第一个和第九个li显示红色.
$('li:eq(0)').css('backgroundColor','red');
$('li:eq(9)').css('backgroundColor','red');4、筛选选择器(方法)
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始,-1是最后一个元素 |
| next() | $(“li”).next() | 找下一个兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |
总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
六、元素设置
1、获取设置文本
text(); 获取和设置文本的.
（1）获取标签文本
会获取到这个标签中所有的文本,包括后代元素的文本.
包含了多个 dom 元素的 jQuery 对象，通过 text() 方法获取文本,会把所有dom元素（包括字标签）的文本获取到
console.log($('#div1').text());（2）设置文本
设置文本: text() 方法给参数，参数就是要设置的文本
会覆盖他原来的内容,如果设置的文本中包含标签，是不会把这个标签给解析出来的
$('#div1').text('我是新设置的文本<a>我是连接</a>');包含了多个 dom 元素的 jQuery 对象，通过 text() 方法设置文本,会把所有的dom元素都设置上—隐式迭代
2、获取设置样式
css() 方法: 设置/获取样式
（1）获取样式
获取样式: css()方法设置参数为要获取值的样式名.
// 获取宽高
console.log($('#div1').css('width')); //'200px'
console.log($('#div1').css('height')); //'200px'
// 获取边框
console.log($('#div1').css('border')); //'2px solid rgb(255, 0, 0)'
// 获取背景色，以下两种写法都可以
console.log($('#div1').css('background-color'));//'rgb(255, 192, 203)'
console.log($('#div1').css('backgroundColor'));//'rgb(255, 192, 203)'注意：在 ie 浏览器，要获取边框这样的样式值，要描述清楚要获取边框的信息，如下要获取上边框的宽
console.log($('#div1').css('border-top-width'));获取通过标签获取的元素的样式
获取标签为div的元素们的样式，获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
console.log($('div').css('width'));//'200px'（2）设置样式
设置样式: css() 方法要给样式名和样式值，设置的样式是行内样式.
//设置单样式.
$('#div1').css('width','300px');
$('#div1').css('height',300);
$('#div1').css('backgroundColor','red');
$('#div1').css('border','10px solid green');
//设置多样式
$('#div1').css({
width:300,
'height':'300px',
'background-color':'green',
'border-top-width':'10px'
});给标签为div的元素们设置样式，每个元素的样式都会被改变
//隐式迭代,把每一个div都设置了同样的样式.
$('div').css({
width: 300,
'height': '300px',
'background-color': 'green',
'border': '10px solid red',
marginTop:10
});3、设置类名
/*1.添加一个类*/
$('li').addClass('now');
/*2.删除一个类*/
$('li').removeClass('now');
/*3.切换一个类 有就删除没有就添加*/
$('li').toggleClass('now');
/*4.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false*/
$('li').hasClass('now');4、设置属性
/*1.获取属性*/
$('li').attr('name');
/*2.设置属性*/
$('li').attr('name','tom');
/*3.设置多个属性*/
$('li').attr({
'name':'tom',
'age':'18'
});
/*4.删除属性*/
$('li').removeAttr('name');5、prop方法
对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样
$("#checkbox").prop("checked");
$("#checkbox").prop("checked", true);
$("#checkbox").prop("checked", false);
$("#checkbox").removeProp("checked");七、特殊属性操作
1、val（）
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值
$("#name").val('张三');
//获取值
$("#name").val();2、html（）与text（）
html 方法相当于 innerHTML
text 方法相当于 innerText
//设置内容
$('div').html('<span>这是一段内容</span>');
//获取内容
$('div').html()
//设置内容
$('div').text('<span>这是一段内容</span>');
//获取内容
$('div').text()区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
3、width（）与height（）
设置或者获取高度
//带参数表示设置高度
$('img').height(200);
//不带参数获取高度
$('img').height();获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();4、scrollTop()、scrollLeft()
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();5、offset()、position()
offset 方法获取元素距离 document （页面左上角）的位置
position 方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();八、事件机制
1、事件发展历史
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
（1）原生 js
//原生js注册相同的事件,后面的会把前面的给覆盖.
document.getElementById("one").onclick = function () {
alert('单击事件');
};（2）简单事件注册
缺点：不能同时注册多个事件，也不支持动态注册.
click(handler) //单击事件
mouseenter(handler) //鼠标进入事件
mouseleave(handler) //鼠标离开事件//给按钮设置点击事件,创建一个div.
$('#btn').click(function () {
var $divNew = $('<div class="two"></div>');
$('body').append($divNew);
});
// 鼠标移入事件
$('div').mouseenter(function () {
console.log("鼠标移入事件...");
});（3）bind方式注册事件
缺点：不支持动态事件绑定
第一种写法：点击和移入执行相同代码
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});另一种写法：点击和移入执行不同代码
$('div').bind({
mouseenter: function () {
console.log("鼠标移入事件...");
},
click: function () {
console.log("鼠标单击事件");
}
});（4）delegate委托事件
delegate注册委托事件-原理是事件冒泡.
支持同时注册,也支持动态注册.
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});$('body').delegate('div',{
mouseenter: function () {
console.log("鼠标移入事件");
},
click: function () {
console.log("鼠标单击事件");
}
});2、on注册事件
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
（1）简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});（2）委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",'span', function() {});（3）语法总结
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events,[selector],[data],handler);3、事件解绑
unbind方式（不用）
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( 'click' ); //解绑所有的click事件off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");4、触发事件
$(selector).click(); //触发 click事件
$(selector).trigger("click");5、事件对象
注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息
比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息….
jQuery中用事件参数e来获取.
jQuery的事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性.
screenX和screenY 对应屏幕最左上角的值
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.keyCode 按下的键盘代码
event.data 存储绑定事件时传递的附加数据
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
return false 既能阻止事件冒泡，又能阻止浏览器默认行为。$('#one').on('click', function (e) {
//2.事件对象中有常用的三个坐标.
//触发事件那一点距离 屏幕最左上角的值
console.log("screenX"+ e.screenX +" : " + e.screenY);
//触发事件那一点距离 可视区左上角的值
console.log("clientX"+ e.clientX +" : " + e.clientY);
//触发事件那一点距离 页面左上角的值
console.log("pageX"+ e.pageX +" : " + e.pageY);
//阻止事件冒泡.
e.stopPropagation();
//阻止浏览器默认行为,比如 a 标签的跳转
e.preventDefault();
//既能阻止事件冒泡,又能阻止默认行为.
return false;
});
// 给页面注册键盘按下事件.
$(document).on('keydown', function (e) {
//e.keyCode能获取按的是那个键.
console.log(e.keyCode);
});九、动画
1、基本动画
动画的本质是改变容器的大小和透明度
如果不传参数是看不到动画
可传入特殊的字符 fast、normal、slow
可传入数字 单位毫秒
/*1.展示动画*/
$('li').show();
/*2.隐藏动画*/
$('li').hide();
/*3.切换展示和隐藏*/
$('li').toggle();2、滑入滑出
动画的本质是改变容器的高度
/*1.滑入动画*/
$('li').slideDown();
/*2.滑出动画*/
$('li').slideUp();
/*3.切换滑入滑出*/
$('li').slideToggle();3、淡入淡出
动画的本质是改变容器的透明度
/*1.淡入动画*/
$('li').fadeIn();
/*2.淡出动画*/
$('li').fadeOut();
/*3.切换淡入淡出*/
$('li').fadeToggle();
$('li').fadeTo('speed','opacity');4、自定义动画
/*
* 自定义动画
* 参数1：需要做动画的属性
* 参数2：需要执行动画的总时长
* 参数3：执行动画的时候的速度
* 参数4：执行动画完成之后的回调函数
* */
$('#box1').animate({left:800},5000);
$('#box2').animate({left:800},5000,'linear');
$('#box3').animate({left:800},5000,'swing',function () {
console.log('动画执行完成');
});5、动画队列
jQuery中有个动画队列的机制。
当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中， 等前面的动画完成后再开始执行。可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。
6、stop
/*1.停止当前动画 如果动画队列当中还有动画立即执行*/
$('div').stop();
/*2.和stop()效果一致 说明这是默认设置*/
$('div').stop(false,false);
/*3.停止当前动画 清除动画队列*/
$('div').stop(true,false);
/*4.停止当前动画并且到结束位置 清除了动画队列*/
$('div').stop(true,true);
/*5.停止当前动画并且到结束位置 如果动画队列当中还有动画立即执行*/
$('div').stop(false,true);十、节点操作
1、创建节点
/*创建节点*/
var $a = $('<a href="http://www.baidu.com" target="_blank">百度1</a>');2、克隆节点
/*如果想克隆事件 false true克隆事件*/
var $cloneP = $('p').clone(true);3、添加&移动节点
1. append():往当前元素的内部的后面追加元素;
$("div").append($("span")); 将span放在div内部的后面.
2. appendTo():把当前元素追加到指定元素内部的后面;
$("div").appendTo($("span")); 将div放在span内部的后面.
3. after():向当前元素的后面追加元素;
$("div").after($("span")); 将span放在div的后面.
4. before():向当前元素的前面追加元素;
$("div").before($("span")); 将span放在div的前面.
5. prepend():向当前元素的内部的前面追加元素;
$("div").prepend($("span")); 将span放在div内部的前面.
6. prependTo():把当前元素追加到指定元素内部的前面;
$("div").prependTo($("span")); 将div放在span内部的前面.案例
/*追加自身的最后面 传对象和html格式代码*/
$('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');
$('#box').append($('a'));
/*追加到目标元素最后面(内部) 传目标元素的选择器或者对象*/
$('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box'));
$('a').appendTo('#box');
// 动态渲染图片
for (let i = 0; i < appealHandleImgArr.length; i++) {
$("<img src='"+ appealHandleImgArr[i] +"' data-src='"+ appealHandleImgArr[i]+"' data-magnify='gallery' width='28' height='21' alt=''>").appendTo("#appealHandleReasonLi");
}4、删除节点&清空节点
/*1.清空box里面的元素*/
/* 清理门户 */
$('#box').empty();
/*2.删除某个元素*/
/* 自杀 */
$('#box').remove();十一、补充知识点
1、链式编程
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); //回到上一个状态.$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);2、each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});//给每一个对象设置不同的值的时候
//作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
$lis.each(function (index,element) {
// console.log(index); //每一个li标签的索引
// console.log(element);//每一个li标签,是一个dom对象.
$(element).css('opacity',(index+1)/10);
});3、多库共存
jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c十二、插件相关
1、常用插件
插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
- jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
使用插件的步骤
//1. 引入jQuery文件
//2. 引入插件（如果有用到css的话，需要引入css）
//3. 使用插件- jquery.lazyload.js
懒加载插件
2、jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
//1. 引入jQueryUI的样式文件
//2. 引入jQuery
//3. 引入jQueryUI的js文件
//4. 使用jQueryUI功能使用jquery.ui.js手风琴菜单
3、制作jquery插件
原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};十三、案例
1、固定导航栏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top, .nav {
width: 1423px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 10px auto;
}
img {
display: block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="top">
<img src="images/top.png"/>
</div>
<div class="nav">
<img src="images/nav.png"/>
</div>
<div class="main">
<img src="images/main.png"/>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//思路:给页面设置一个滚动事件,时刻监视页面的scrollTop的值,
// 如果这个值大于第一部分的高度,就设置第二部分为固定定位.
// 如果这个值小于第一部分的高度,就设置第二部分的定位还原.
//计算第一部分的高度.
var topHeight = $('.top').height();
//计算第二部分的高度.
var navHeight = $('.nav').height();
//给页面设置一个滚动事件.
$(window).scroll(function () {
//1.获取页面滚出去的距离(被卷曲出去的距离);
var scrollTopValue = $(window).scrollTop();
//2.判断,看scrollTopValue的值是不是大于第一部分的高度.
if(scrollTopValue >= topHeight){
//让第二部分固定定位.
$('.nav').css({
position:'fixed',
top:0,
left:0
});
//设置第三部分的margin-top的值为第二部分的高度.
$('.main').css({
marginTop:navHeight+10
});
}else {
//让第二部分定位还原.
$('.nav').css({
position:'static',
top:0,
left:0
});
//设置第三部分的margin-top的值为原来的值.
$('.main').css({
marginTop:10
});
}
});
});
</script>
</body>
</html>
