沉淀，再出发：jQuery的初步了解和入门
沉淀，再出发：jQuery的初步了解和入门
一、前言
对于后端开发者来说，是不是真的不需要了解前端的开发经过和相关技术，从我个人的角度来说，我觉得如果不了解或者接触很少，极有可能造成开发的时候语言交流的障碍，并且影响自己对整个系统性能的理解，这在程序员的职业生涯之中是非常不利的，因为再向上层发展就涉及到了从整个系统架构的角度来分析性能和技术的取舍了，在这个层面上，必须要有全栈开发的能力，这样才能担当重任。但是现在的开发通过json等手段，在某种程度上将前后端僵硬的分割开来，其实是对于我们理解整个系统和提升性能非常不利的。因此，我们有必要了解前端的相关知识，并且能够理解其中的本质，这样当我们分析用户使用UI来访问服务器以及数据库的整个数据传输和处理的过程是非常有利的。那么在前端的开发之中，无外乎是使用三剑客（HTML+CSS+JS）再配合上一些其他的先进技术，比如ajax,bootstrap，jQuery等额外的‘插件’和性能提升工具，使得在开发层面、运行层面都能达到一定的灵活性、稳定性和效率。那么这次我们就来看看jQuery的本质吧。
二、jQuery本质
了解一件事物，第一件事情就是理解其本质，如果不能达到这种程度，那么永远都理解不了也使用不好。其实jQuery的本质就是一个JavaScript的类库，设计的最初设想就是简化JavaScript每次启动和事件响应，数据绑定，选择器等最常用的功能，将这些东西封装起来，使得变量在jQuery和DOM之间不断地转换，从而完成链式编程，隐式迭代等功能，使得前端的开发更加的便捷和可靠。那么从这个角度来理解，我们也可以完全开发出这样的一个JavaScript库，并且自己使用了，从本质上来说是完全一样的。
既然是这样就会有版本，相对于1.1.xxx 版本来说，2.2.xxx 版本不再支持IE6、7、8的兼容性了。同样的也会有压缩版和非压缩版的区别，这在很多库里面都是常见的，其中命名标记中带min的是压缩版的，打开之后发现各种对齐都没有，这个是在我们部署的时候使用的，同样的还有一个非压缩版，便于我们开发的时候调试使用。
同样的相比于jQuery来说，JavaScript的缺点有：
1.window.onload 事件有个事件覆盖的问题，我们只能写一个
2.代码容错性差
3.浏览器兼容性问题
4.书写很繁琐，代码量多
5.代码很乱，各个页面到处都是
6.动画效果，我们很难实现
2.1、使用jQuery
a、引包：要把我们的jQuery源文件拿到我们的项目里面来，在我们的页面中引用jQuery文件
<script src="jquery-1.11.1.min.js"></script>
b、入口函数
<script>
// 1. 入口函数的方式
$(document).ready(function () { $("#demo").click(function () {
$("div").show(1000).html("我是内容");
});
}); // 2.简化版
$(function () { });
</script>
c、事件处理程序
1.事件源
Js方式：document.getElementById(“id”)
jQuery方式：$(“#id”)
2.事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
区别：jQuery的事件不带on
3.事件处理程序
Js 书写方式:
document.getElementById(“id”).onclick = function(){
// 语句
}
jQuery 书写方式:
$(“#id”).click(function(){
// 语句
});
2.2、jQuery的一些注意事项
$问题
a)Js命名归法：下划线、字母、$、数字
b)但是不能以数字作为开头
var $ = “我是$符号”;
jQuery的两个变量：$ 和 jQuery
jQuery占用了我们两个变量：$ 和 jQuery js入口函数跟jQuery入口函数的区别：
1.Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行
2.jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。 Js创建对象
三种方式：
1.var obj = {};
2.var obj1 = new Object();
3.var obj2 = Object.create();
1跟2的区别：推荐使用第一个方式，第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题
2.3、jQuery基本选择器
规律：$(selector).css(“background”,”red”);
2.4、mouseover事件跟mouseenter事件的区别
mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件，鼠标经过的时候只会触发一次。
2.5、DOM对象跟jQuery对象相互转换
jQuery对象转换成DOM对象:
方式一：$(“#btn”)[0]
方式二：$(“#btn”).get(0)
DOM对象转换成jQuery对象：
$(document) -> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“btn”);
btn -> $(btn);
2.6、其他注意事项
动画：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle、animate
DOM操作：.css()、addClass(“className”)、removeClass()、toggleClass()、 .attr()、removeAttr()、
.val()、.html(“<p></p>”)、text()、node.append(“<p>我是追加的内容</p>”)、prePend()
元素操作：
高度和宽度
$(“div”).height(); // 高度
$(“div”).width(); // 宽度
.height()方法和.css(“height”)的区别：返回值不同，.height()方法返回的是 数字类型(20)，
.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候
坐标值：
$(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位
$(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置
滚动条（滚动事件）：
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
jQuery事件：
绑定
click/mouseenter/blur/keyup
// 绑定事件
bind：$node.bind(“click”,function(){});
// 触发一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});
解绑
unbind、undelegate、off
触发
click: $(“div”).click();
trigger：触发事件，并且触发浏览器默认行为
triggerHandler：不触发浏览器默认行为
jQuery事件对象介绍
event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默认行为
三、案例分析
mouseenter跟mouseover事件的区别：
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>
右下角的弹出广告：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ad {
position: fixed;
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(imgs/ad.jpg);
display: none;
}
.ad span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(imgs/h.jpg);
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$(".ad")
.slideDown("normal")
.slideUp("slow")
.fadeIn(1000)
.children("span").click(function () {
$(this).parent().fadeOut();
});
});
</script>
</head>
<body>
<div class="ad">
<span></span>
</div>
</body>
</html>
tab切换：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;}
.wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;}
.tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;}
.tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer;
border-top:4px solid #fff;}
.tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; }
.products{ width: 1002px;border:1px solid #ddd;height: 476px;}
.products .main{float: left;display: none;}
.products .main.selected{display: block;}
.tab li.active{border-color: red; border-bottom: 0;}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tab li").mouseenter(function(){
var $this = $(this),
index = $this.index();
$this.addClass("active").siblings("li").removeClass("active"); $(".products div").eq(index).addClass("selected").siblings("div").removeClass("selected");
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div> </body>
</html>
服饰精品广告：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
} .wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left,#center,#right{
float: left;
}
#left li , #right li{
background: url(images/lili.jpg) repeat-x;
}
#left li a,#right li a{
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover,#right li a:hover{
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#left li").mouseenter(function () {
$("#center li").eq($(this).index()).show().siblings("li").hide();
}); $("#right li").mouseenter(function () {
$("#center li").eq($(this).index() + 9).show().siblings("li").hide();
});
});
</script>
</head>
<body>
<div class="wrapper"> <ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250" /></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男靴</a></li>
</ul> </div>
</body>
</html>
层级轮播图：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul, ol {
list-style: none;
} .wrap {
width: 650px;
height: 250px;
margin: 100px auto 0;
position: relative;
overflow: hidden;
} .wrap img {
display: block;
} .wrap ul {
height: 250px;
z-index: 1;
position: relative;
} .wrap ol {
height: 30px;
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
} .wrap > ul > li {
position: absolute;
top: 0;
left: 0;
} .wrap > ol > li {
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border: 1px solid white;
margin-right: 5px;
background: Gray;
} .wrap > ol > li:hover {
cursor: pointer;
} .wrap li.active {
padding: 2px;
color: orange;
margin-top: -4px;
border: 1px solid orange;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
var zIndex = 0;
$(".wrap > ol > li").mouseenter(function () {
zIndex++;
$(this).addClass("active").siblings().removeClass("active");
$(".wrap > ul > li")
.eq($(this).index())
.css({
"z-index": zIndex,
"left": 650
})
.animate({
"left": 0
}, 1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li style="z-index:1;"><img src="data:images/01.jpg" alt=""/></li>
<li><img src="data:images/02.jpg" alt=""/></li>
<li><img src="data:images/03.jpg" alt=""/></li>
<li><img src="data:images/04.jpg" alt=""/></li>
<li><img src="data:images/05.jpg" alt=""/></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
手风琴效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
} .wrap {
width: 1010px;
margin: 100px auto 0;
}
.wrap li{
width: 200px;
height: 400px;
float: left;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$(".wrap li").each(function (i,ele) {
$(ele).css("background","url(images/"+ (i + 1) +".jpg)");
}).mouseenter(function () {
$(this).stop().animate({width : 600},500).siblings("li").stop().animate({ width: 100},500);
}).mouseleave(function () {
$(".wrap li").stop().animate({width:200},500);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
图片导航效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style: none;}
img{display: block; border:0;}
.wrapper{width: 752px; border:1px solid #ccc;
padding: 10px 0 0 10px;
font-family: arial;
overflow: hidden;
margin:100px auto; }
.wrapper li{
float: left;
margin:0 10px 10px 0;
width: 178px;
height: 125px;
overflow: hidden;
position: relative;
}
.wrapper li div,.wrapper li p{
width:178px;
height: 25px;
position: absolute;
font-size:14px;
text-align: center;
line-height: 25px;
color:white;
left:0;
bottom:-25px;
_bottom:-26px;
}
.wrapper li div{
background-color:#000;
}
.wrapper li p{
background: url(images/bg.png) no-repeat 5px 0;
} </style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var div = $("<div></div>"),speed = 388,$p = $(".wrapper p");
$p.before(div);
$(".wrapper div").fadeTo(0,0.5);
$p.each(function(index,ele){
var y = index * 25;
$(ele).css("background-position","5px -" + y + "px");
}); $(".wrapper li").hover(function(){
$(this).children("div,p").stop().animate({"bottom":0},speed);
},function(){
$(this).children("div,p").stop().animate({"bottom":-26},speed);
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><a href="###"><img src="data:images/01.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/02.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/03.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/04.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/05.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/06.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/07.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
<li><a href="###"><img src="data:images/08.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
</ul>
</div>
</body>
</html>
侧边栏：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>防京东侧边栏</title>
<style type="text/css">
*{
margin:0;padding:0;
}
ul{list-style: none;}
.top,.dian,.jia,.fu,.mei,.bottom{
width: 1210px;
margin: 0 auto;
}
.subnav
{
position: fixed;
width: 38px;
height: 200px;
top:200px;
left:50%;
margin-left:605px;
display: none;
}
.subnav li{
height: 36px;
border:1px solid #DEDEDE;
margin-bottom: 5px;
font-size:0;
background: url(images/bg.png) no-repeat;
}
.subnav li:hover,.subnav li.current,.back
{
border:1px solid #ED5759;
background: #FDEEEE; /* 只有冲突的时候才会出现层叠 */
/* 背景颜色 背景图片 背景位置 背景平铺 背景固定 */
/* css 层叠样式表 */
font-size:12px;
color: #ED5759;
padding-left: 6px;
padding-top: 2px;
height: 34px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 展示默认背景
var num = 0, $subbnav = $(".subnav"),$sideBarMenu = $(".subnav li");
$sideBarMenu.each(function (index, ele) {
num = index * 55;
$(ele).css("background-position", "0 -"+num + "px");
}); var TOP = 0;
// 滚动效果
$(window).scroll(function () {
TOP = $(document).scrollTop(); if(TOP >= $(".mei").offset().top){
$sideBarMenu.eq(3).addClass("current").siblings().removeClass();
} else if(TOP >= $(".fu").offset().top){
$sideBarMenu.eq(2).addClass("current").siblings().removeClass();
} else if(TOP >= $(".jia").offset().top){
$sideBarMenu.eq(1).addClass("current").siblings().removeClass();
} else if(TOP >= $(".dian").offset().top){
$sideBarMenu.eq(0).addClass("current").siblings().removeClass();
} else if(TOP > 0){
$subbnav.fadeIn();
}else{
$subbnav.fadeOut();
}
}); $sideBarMenu.click(function () {
$("html,body").stop().animate({
// 给具有相同效果的元素添加 共同的样式 jd
"scrollTop" : $(".jd").eq($(this).index()).offset().top
},1000);
}); $(".back").click(function () {
//$(document).scrollTop(0);
$("html,body").animate({"scrollTop":0},300); // html,body ?
});
});
</script>
</head>
<body>
<div class="top">
<img src="data:images/top.png" alt="" />
</div>
<div class="jd dian">
<img src="data:images/dian.png" alt="" />
</div>
<div class="jd jia">
<img src="data:images/jia.png" alt="" />
</div>
<div class="jd fu">
<img src="data:images/fu.png" alt="" />
</div>
<div class="jd mei">
<img src="data:images/mei.png" alt="" />
</div>
<div class="bottom">
<img src="data:images/bottom.png" alt="" />
</div>
<div class="subnav">
<ul>
<li>电脑数码</li>
<li>家电通讯</li>
<li>服饰精品</li>
<li>美容珠宝</li>
</ul>
<div class="back">返回</div>
</div>
</body>
</html>
固定导航栏：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>防腾讯固定导航栏</title>
<style type="text/css">
*{margin:0;padding:0;}
.main{
width: 1000px;
margin:0 auto;
margin-top: 20px;
}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
var H = $(".top").height();
$(window).scroll(function () {
var docSccrollTop = $(document).scrollTop();
if(docSccrollTop > H){
$(".nav").css({"position":"fixed","top":0});
// 此时 nav的位置固定，如果不设置 main部分的margin-top的话，将有一部分内容被挡住 nav的高度+开始设置的20
$(".main").css("margin-top",106);
}else{
$(".nav").css({"position":"static"}); /*静态定位*/
$(".main").css("margin-top",20);
}
});
});
</script>
</head>
<body>
<div class="top">
<img src="data:images/top.png" />
</div>
<div class="nav">
<img src="data:images/nav.png" /> </div>
<div class="main">
<img src="data:images/main.png" />
</div>
</body>
</html>
轮播图：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
width: 670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 根据ol下li的索引号，匹配ul下相对应li的索引号
$(".wrapper ol li").mouseenter(function () {
$(this).addClass("current").siblings().removeClass("current");
$(".wrapper ul li").eq($(this).index()).fadeIn("fast").siblings().fadeOut();
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><img src="data:images/1.jpg" alt=""/></li>
<li><img src="data:images/2.jpg" alt=""/></li>
<li><img src="data:images/3.jpg" alt=""/></li>
<li><img src="data:images/4.jpg" alt=""/></li>
<li><img src="data:images/5.jpg" alt=""/></li>
<li><img src="data:images/6.jpg" alt=""/></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
两侧广告：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left,.right{
position: absolute;
top:80px;
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function () {
var scrollTop = $(document).scrollTop(); $(".left,.right").stop().animate({"top" : scrollTop + 50},600);
});
});
</script>
</head>
<body>
<div class="left"><img src="data:images/1.gif" alt=""/></div>
<div class="right"><img src="data:images/2.gif" alt=""/></div>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
<p>我们的开始，是很长的电影</p>
</body>
</html>
四、总结
简单地介绍了一下jQuery，其实jQuery中精髓的东西还有很多，通过对JavaScript的改写，jQuery再加上bootstrap和ajax绝对是前端的神器,大大的方便了前端的开发，并且在效率上面也做了很多的优化，学有余力的最好看一下源码，这样更加能够加深对jQuery的理解了。
沉淀，再出发：jQuery的初步了解和入门的更多相关文章
- 沉淀再出发：ELK使用初探
沉淀再出发:ELK使用初探 一.前言 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. 最近ElasticSearch可以说是非常火的一款开源软 ...
- 沉淀再出发：PHP的中级内容
沉淀再出发:PHP的中级内容 一.前言 前面我们介绍了PHP的简单的语法知识以及相关的用法,接下来我们将PHP+mysql以及PHP+ajax结合起来进行研究. 二.PHP+mysql ...
- 沉淀再出发:用python画各种图表
沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...
- 沉淀再出发:在python3中导入自定义的包
沉淀再出发:在python3中导入自定义的包 一.前言 在python中如果要使用自己的定义的包,还是有一些需要注意的事项的,这里简单记录一下. 二.在python3中导入自定义的包 2.1.什么是模 ...
- 沉淀再出发:java中的equals()辨析
沉淀再出发:java中的equals()辨析 一.前言 关于java中的equals,我们可能非常奇怪,在Object中定义了这个函数,其他的很多类中都重载了它,导致了我们对于辨析其中的内涵有了混淆, ...
- 沉淀再出发:web服务器和应用服务器之间的区别和联系
沉淀再出发:web服务器和应用服务器之间的区别和联系 一.前言 关于后端,我们一般有三种服务器(当然还有文件服务器等),Web服务器,应用程序服务器和数据库服务器,其中前面两个的概念已经非常模糊了,但 ...
- 沉淀再出发:jetty的架构和本质
沉淀再出发:jetty的架构和本质 一.前言 我们在使用Tomcat的时候,总是会想到jetty,这两者的合理选用是和我们项目的类型和大小息息相关的,Tomcat属于比较重量级的容器,通过很多的容器层 ...
- 沉淀再出发:dubbo的基本原理和应用实例
沉淀再出发:dubbo的基本原理和应用实例 一.前言 阿里开发的dubbo作为服务治理的工具,在分布式开发中有着重要的意义,这里我们主要专注于dubbo的架构,基本原理以及在Windows下面开发出来 ...
- 沉淀再出发:OpenStack初探
沉淀再出发:OpenStack初探 一.前言 OpenStack是IaaS的一种平台,通过各种虚拟化来提供服务.我们主要看一下OpenStack的基本概念和相应的使用方式. 二.OpenStack的框 ...
随机推荐
- Nginx 反向代理(http转htpps，并支持80端口继续提交post请求)
项目是一个web server + 多个client的形式,client由用户安装在自己的电脑上 由http升级为https后,我们通过在Nginx做了80端口重定向443的配置,使用户通过访问htt ...
- ThreadPoolExecutor 杂记
When a new task is submitted in method execute(Runnable), and fewer than corePoolSize threads are ru ...
- ES6 读书笔记
一.let和const命令 二.变量的解构赋值 三.字符串的扩展 四.数值的扩展 五.正则的扩展 六.数组的扩展 七.函数的扩展 八.对象的扩展 九.symbol 十.proxy和reflect 十一 ...
- DataGridView 获取当前单元格
获取DataGridview控件中的当前单元格,是通过DataGridview的Rows属性和Column属性的索引来取得的,他们的索引都是从0开始的. Private void datagridvi ...
- "类工厂模式"改写SqlHelper
看到标题您一定很疑惑,23种经典设计模式什么时候多了一个"类工厂模式",稍等,请听我慢慢道来. 实践是检验真理的唯一途径.最近用了"类工厂模式"改写了我公司的S ...
- qq iOS环境配置及调用
1.下载官方iOS sdk:地址:相关文档 2. 将iOS SDK中的TencentOpenAPI.framework和TencentOpenApi_IOS_Bundle.bundle文件拷贝到应用开 ...
- java读取项目或包下面的属性文件方法
1.使用java.util.Properties类的load()方法 //文件在项目下.不是在包下!! InputStream in = new BufferedInputStream(newFile ...
- Grpc helloworld demo的经验
GreeterGrpc.java这个文件是插件protoc-gen-grpc-java生成的 刚开始直接用类似如下的指令无法生成GreeterGrpc.java文件 protoc --java_ou ...
- 《JavaWeb从入门到改行》过滤器学习笔记
>"; display: block; height: 0; clear: both; visibility: hidden; } #sitemap, #sitemap ul{disp ...
- 在Ubuntu 14.04.1 LTS 上安装gettext失败
使用apt-get install -f,因为有额外的依赖.