jQuery介绍
jQuery是JavaScript的函数库，其实就是一个js文件，目前广泛应用。之前学习的js那些被称为原生的js。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 跟window.onload = function功能一样,但是比原生的快
/* ready的完整写法
// ready比onload快的原因：ready是等到页面的节点加载完执行，onload是
等到页面的节点加载完然后图片渲染完再执行。
$(document).ready(function () {
var $div = $('#div1');
alert('jquery弹出的'+$div);
})
*/
$(function () {
var $div = $('#div1');
alert('jquery弹出的'+$div);
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>jquery加载
使用ready方法解决元素还没有加载而出错这个问题。
完整写法：
$(document).ready(function)(){
...
});简单写法：
$(function)(){
});注意：不能直接在jquery的引入标签中写js代码，必须重新写一个script标签，并在里面写js代码。
jquery选择器
jquery选择器可以快速选择元素，选择规则跟css用法一样。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $div = $('#div1');
$div.css({'color':'red'});
var $div2 = $('.box');
$div2.css({'color':'green'});
var $li = $('.list li');
// 带‘-’的样式属性，可以写成驼峰属性，也可以写成原始的。
$li.css({'backgroundColor':'red'});
})
</script>
</head>
<body>
<div id="div1">5</div>
<div class="box">6</div>
<div class="box">7</div>
<br>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>对选择器进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素对选择器进行转移
$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $div = $('div');
// 对选择集进行过滤；字典里是对css的样式的添加
$div.has('p').css({'color':'red'});
// $div.not('haha').css({'fontSize':'30px'});
$div.eq(5).css({'backgroundColor':'pink'});
// 对选择集进行转移
$div.find('.div5').css({'color':'green'});
})
</script>
</head>
<body>
<div>1</div>
<div><p>2</p></div>
<div class="haha">3</div>
<div class="div1">4</div>
<div><span class="div5">55</span><span>66</span></div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>判断是否选择到了元素
jquery有容错机制，即使选择一个未定义的元素，也不会报错。可以使用length属性查看弹出的结果判断，若为1，则选择到了元素。若为0，则没有选择到。
jquery样式操作
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../js/jquery-3.3.1.min.js'></script>
<script>
$(function () {
var $div = $('.box');
// 读取属性值,
var sTr = $div.css('fontSize');
alert(sTr)
// 写属性值
$div.css({'color':'red','backgroundColor':'gold'});
// 原生js无法读取未定义的css属性值。
var oDiv = document.getElementById('box');
alert(oDiv.style.fontSize);
})
</script>
</head>
<body>
<div class="box" id="box">49489944</div>
</body>
</html>操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $div = $('.div1');
// 为class为div1的对象追加样式div2
$div.addClass('div2')
// 重复更换样式，使用click事件，使用toggleClass样式操作
$div.click(function () {
$div.toggleClass('div2')
})
})
</script>
<style>
.div1{
width:200px;
height:200px;
border: 1px solid #000;
}
.div2{
background-color: gold;
}
</style>
</head>
<body>
<div class="div1">这是一个div</div>
</body>
</html>绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>选项卡练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 第一步，先定义元素获取这个需要改变的input和div
var $btn = $('.btns input');
var $div = $('.cons div');
// 第二步，绑定click事件。
$btn.click(function () {
// this指的是原生的this，它表示当前点击的对象，
// 你点击那个，它就表示那个。
// 第三步，为当前点击的对象添加样式。结果发现只要
// 点击的input都被添加样式，所以我们只需要给一个
// 添加样式，其他两个不要样式。
// 第四步，使用siblings转移确定没有被选定的其他样式后移除样式。
$(this).addClass('current').siblings().removeClass('current');
// div标签同上,不过需要注意这个不用点击，
// 所以得用点击的按钮对应的索引值的div加上active的样式
// 使用$(this).index()获取当前索引值，然后使用eq加上索引值获取到内容
alert( $(this).index() );
$div.eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
<style>
.btns input{
width:100px;
height:40px;
border:0;
}
.btns .current{
background-color: green;
}
.cons div{
width:500px;
height:300px;
background-color: gold;
border:0;
font-size: 30px;
text-align: center;
line-height: 300px;
display: none;
}
.cons .active{
display: block;
}
</style>
</head>
<body>
<div class="btns">
<input type="button" id="btn" value="按钮1" class="current">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</div>
<div class="cons">
<div class="active">这是第一个div</div>
<div>这是第二个div</div>
<div>这是第三个div</div>
</div>
</body>
</html>我的思路：
- 先定义元素来获取div中需要改变的input和div的内容。
- 绑定click事件，主要用this。
- 为当前点击的对象添加样式，结果就是点击过后的样式仍然存在。
- 使用siblings转移选定没有被点击的对象而后移除样式。
- div标签里因为不用点击，只需要按照对应的内容更换样式，所以使用$(this).index()来确定当前所点击对象的索引值，而后使用选择器过滤eq来确定要添加样式的对象，而后添加样式，给其他没有点击的对象移除已经添加的样式。
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $btn = $('#btn');
var $div = $('.box');
$btn.click(function () {
// 淡入
// $div.fadeIn(1000,'swing',function () {
// alert('淡入结束')
// })
// 淡入淡出
// $div.fadeToggle(1000,function () {
// alert('hi')
// })
// })
// 依次展开或卷起某个元素
$div.slideDown(1000, function () {
alert('haha')
});
})
})
</script>
<style>
.box{
width: 300px;
height:200px;
border:0;
background-color: gold;
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击">
<div class="box"></div>
</body>
</html>jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,'swing',function(){
alert('done!');
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $div = $('.box');
var $btn = $('#btn');
var $btn2 = $('#btn2');
var $div2 = $('.box2');
$btn.click(function () {
// $div.animate({'width':200,'height':200});
// 使用回调
$div.animate({'width':200},1000,function () {
$div.animate({'height':200},1000,function () {
$div.animate({'opacity':0.4})
})
})
});
$btn2.click(function () {
$div2.stop().animate({'width':'+=100'});
})
})
</script>
<style>
.box,.box2{
width:100px;
height:100px;
background-color: gold;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击">
<div class="box">1</div>
<br>
<br>
<input type="button" id="btn2" value="点击">
<div class="box2">2</div>
</body>
</html>尺寸相关、滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offset()
3、获取浏览器可视区宽度高度
$(window).width();
$(window).height();
4、获取页面文档的宽度高度
$(document).width();
$(document).height();
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})加入购物车动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:150px;
height:50px;
border:1px solid #000;
margin-right:100px;
margin-top:100px;
background-color: cyan;
text-align: center;
line-height: 50px;
float: right;
}
.box em{
color:red;
font-size: 20px;
font-style: normal;
}
.btn{
width:100px;
height:50px;
background-color: gold;
border:0;
float: left;
margin-top:300px;
margin-left:300px;
}
.point{
width:16px;
height:16px;
background-color:red;
display: none;
border-radius: 50%;
opacity: 0.5;
position: fixed;
left:0;
top: 0;
z-index: 9999;
}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $box = $('.box');
var $count = $('.box em');
var $btn = $('.btn');
var $point = $('.point');
var $w01 = $btn.outerWidth();
var $h01 = $btn.outerHeight();
var $w02 = $box.outerWidth();
var $h02 = $box.outerWidth();
$btn.click(function () {
var oPos01 = $btn.offset();
var oPos02 = $box.offset();
$point.css({
'left': oPos01.left + $w01 / 2 - 8,
'top': oPos01.top + $h01 / 2 - 8
});
$point.show();
$point.animate({
'left': oPos02.left + parseInt($w02 / 2) - 8,
'top': oPos02.top + parseInt($h02 / 2) - 8
},function () {
$point.hide()
var iNum = $count.html();
$count.html(parseInt(iNum)+1);
})
})
})
</script>
</head>
<body>
<div class="box">购物车<em>0</em></div>
<input type="button" value="加入购物车" class="btn">
<div class="point"></div>
</body>
</html>jquery属性操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
2、prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var $con = $('.con');
var $box = $('.box');
// 读取a链接里面的内容
console.log($con.html());
// div标签中添加一个span
$box.html('<span>haha</span>');
// 读取a链接的title属性
// console.log($con.prop('title'));
// 为a链接的href添加值。
$con.prop({'href':'http://www.baidu.com'});
})
</script>
</head>
<body>
<a href="#" id="a" title="链接" class="con">这是一个链接</a>
<div class="box"></div>
</body>
</html>jquery循环
对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：
$(function(){
$('.list li').each(function(i){
$(this).html(i);
})
})
......
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
手风琴效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript">
// $(function(){
//
// var $li = $('#accordion li');
//
// $li.click(function(){
//
// //alert($(this).html());
// $(this).animate({'left':21*$(this).index()});
//
// //点击的li前面的li向左运动到各自的位置
// $(this).prevAll().each(function(){
//
// //这里的$(this)指的是循环选择的每个li
// $(this).animate({'left':21*$(this).index()});
//
// })
//
//
// // 第5个li在右边的left值 727-21*1 等同于 727-21*(5-$(this).index())
// // 第4个li在右边的left值 727-21*2 等同于 727-21*(5-$(this).index())
// // 第3个li在右边的left值 727-21*3 等同于 727-21*(5-$(this).index())
//
// $(this).nextAll().each(function(){
//
// $(this).animate({'left':727-21*(5-$(this).index())});
//
// })
//
//
//
// })
//
//
// })
$(function () {
var $li = $('#accordion li');
$li.click(function () {
$(this).animate({'left':21*$(this).index()});
// 点击的li前面的li向左运动到相应的位置
$(this).prevAll().each(function () {
$(this).animate({"left":21*$(this).index()});
});
// 往右运动
$(this).nextAll().each(function () {
$(this).animate({'left':727-21*(5-$(this).index())});
})
})
});
</script>
<title>手风琴效果</title>
</head>
<body>
<div id="accordion">
<ul>
<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
<li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
<li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
<li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
<li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
</ul>
</div>
</body>
</html>
jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单
绑定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
总而言之：就是子元素把事件往父元素上传，如果父元素绑定了事件，则执行，并继续上传，若父元素没有绑定事件，则直接上传。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})
合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>jquery元素节点操作
创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点
$('#div1').remove();滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。
函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整页滚动</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var $screen = $('.pages_con');
var $pages = $('.pages');
var $len = $pages.length;
var $h = $(window).height();
var $points = $('.points li');
var timer = null;
var $nowscreen = 0;
$pages.css({'height':$h});
$pages.eq(0).addClass('moving');
$points.click(function(){
$nowscreen = $(this).index();
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
$screen.animate({'top':-$h*$nowscreen},300);
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
})
$(window).mousewheel(function(event,dat){
clearTimeout(timer);
timer = setTimeout(function(){
if(dat==-1)
{
$nowscreen++;
}
else
{
$nowscreen--;
}
if($nowscreen<0)
{
$nowscreen=0;
}
if($nowscreen>$len-1)
{
$nowscreen=$len-1;
}
$screen.animate({'top':-$h*$nowscreen},300);
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
},200)
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1 ">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>