前端之jquery1
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
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>
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
jquery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
可以简写为：
<script type="text/javascript">
$(function(){
......
});
</script>
jquery加载示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript"> window.onload = function () {
var oDiv = document.getElementById('div1');
alert('原生弹出的' + oDiv);
};
/* // ready 比window.onload 要快：
//原因是，window.onload是等标签加载完后，再渲染完之后才运行，
// ready是等标签加载完后就运行 // ready的完整写法：
$(document).ready(function(){
var $div = $('#div1');
alert('jquery弹出的'+$div); })
*/ // ready的简写：
$(function () {
var $div = $('#div1');
alert('jquery弹出的' + $div);
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
jquery加载示例
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似CSS伪类)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
jquery选择器示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $div = $('#div1');
$div.css({'color': 'red'}); var $div2 = $('.box');
$div2.css({'color': 'green'}); var $li = $('.list li');
// 带“-”的样式属性，可以写成驼峰式，也可以写成原始
$li.css({'background-color': 'pink', 'color': 'red'});
});
</script>
</head> <body>
<div id="div1">这是一个div元素</div>
<div class="box">这是第二个div元素</div>
<div class="box">这是第三个div元素</div> <!-- ul.list>li{$}*8 -->
<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>
jquery选择器示例1
选择器过滤和转移示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
/*
var $div = $('div');
$div.css({'backgroundColor':'gold'});
*/ $('div').css({'backgroundColor': 'gold'});
$('div').has('p').css({'fontSize': '30px'});
$('div').eq(4).css({'textIndent': '20px'});
$('div').eq(4).prev().css({'color': 'red'});
$('div').find('.tip').css({'fontSize': '30px'});
})
</script>
</head>
<body>
<div>1</div>
<div><p>2</p></div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div><span>8</span><span class="tip">9</span></div>
</body>
</html>
选择器过滤和转移示例
判断是否选中元素示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$div = $('#div1');
alert($div.length); // 没有选中元素，也不会报错，程序正常运行
$div2 = $('#div2'); alert($div2.length);
// if($div2.length>0) 通过length属性来判断是否选中了元素
})
</script>
</head>
<body>
<div id="div1">div元素</div> </body>
</html>
判断是否选中元素示例
jquery样式操作
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。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式，有就删除，没有就添加
css方法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $div = $('#box'); // 读取属性值
var sTr = $div.css('fontSize');
alert(sTr); // 写属性值
$div.css({'color': 'red', 'backgroundColor': 'pink', 'fontSize': '20px'}); /*
原生js无法读取行间没有定义的css属性值
var oDiv = document.getElementById('box');
alert(oDiv.style.fontSize);
*/
})
</script>
</head>
<body>
<div id="box">div元素</div>
</body>
</html>
css方法示例
样式名操作示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $div = $('.box'); // 在原来样式名的基础上加上“big”的样式名
$div.addClass('big'); // 在原来样式名的基础上去掉“red”的样式名
$div.removeClass('red');
})
</script>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: gold;
}
.big {
font-size: 30px;
}
.red {
color: red;
}
</style>
</head>
<body>
<div class="box red">div元素</div>
</body>
</html>
样式名操作示例
绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
绑定click事件-toggleclass使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// 绑定click事件
$('#btn').click(function () { // if ($('.box').hasClass('col01')) {
// $('.box').removeClass('col01');
// } else {
// $('.box').addClass('col01');
// }
//
// // 简化成下面的写法： $('.box').toggleClass('col01');
})
})
</script>
</head>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: gold;
} .col01 {
background-color: green;
}
</style>
<body>
<input type="button" name="" value="切换样式" id="btn">
<div class="box">div元素</div>
</body>
</html>
绑定click事件-toggleclass使用示例
索引值-选项卡
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此事时可以用index()方法进行获取；
获取元素索引值示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $li = $('.list li'); //alert($li.length); 弹出 8
//alert($li.eq(3).index()); 弹出3
alert($li.filter('.myli').index());
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="myli">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
获取元素索引值示例
选项卡示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.btns input {
width: 100px;
height: 40px;
background-color: #ddd;
border: 0;
} .btns .current {
background-color: gold;
} .cons div {
width: 500px;
height: 300px;
background-color: gold;
display: none;
text-align: center;
line-height: 300px;
font-size: 30px;
} .cons .active {
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $btn = $('.btns input');
var $div = $('.cons div'); $btn.click(function () {
// this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this) // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
$(this).addClass('current').siblings().removeClass('current'); //alert( $(this).index() ; //弹出当前按钮的索引值
// 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
$div.eq($(this).index()).addClass('active').siblings().removeClass('active');
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="active">选项卡一的内容</div>
<div>选项卡二的内容</div>
<div>选项卡三的内容</div>
</div>
</body>
</html>
选项卡示例
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery特殊效果示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-color: gold;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () { /*$('.box').fadeIn(1000,function(){
alert('动画完了！');
});
*/ /*$('.box').fadeToggle(1000,function(){
alert('动画完了！');
});
*/ // $('.box').show(); //$('.box').toggle(); //$('.box').slideDown(); $('.box').slideToggle(1000, function () {
alert('动画完了')
});
})
})
</script>
</head> <body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div>
</body>
</html>
jquery特殊效果示例
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元素
链式调用-层级菜单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<style type="text/css">
body {
font-family: 'Microsoft Yahei';
} body, ul {
margin: 0px;
padding: 0px;
} ul {
list-style: none;
} .menu {
width: 200px;
margin: 20px auto 0;
} .menu .level1, .menu li ul a {
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-decoration: none;
background-color: #3366cc;
color: #fff;
font-size: 16px;
text-indent: 10px;
} .menu .level1 {
border-bottom: 1px solid #afc6f6;
} .menu li ul a {
font-size: 14px;
text-indent: 20px;
background-color: #7aa1ef;
} .menu li ul li {
border-bottom: 1px solid #afc6f6;
} .menu li ul {
display: none;
} .menu li ul.current {
display: block;
} .menu li ul li a:hover {
background-color: #f6b544;
}
</style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.level1').click(function () { //当前点击的元素紧挨的同辈元素向下展开，再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),
// 选择其他同辈元素(li)的子元素ul，然后将它向上收起。
// 通过stop() 可以修正反复点击导致的持续动画的问题
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">水果</a>
<ul class="current">
<li><a href="#">苹果</a></li>
<li><a href="#">梨子</a></li>
<li><a href="#">葡萄</a></li>
<li><a href="#">火龙果</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">海鲜</a>
<ul>
<li><a href="#">蛏子</a></li>
<li><a href="#">扇贝</a></li>
<li><a href="#">龙虾</a></li>
<li><a href="#">象拔蚌</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">肉类</a>
<ul>
<li><a href="#">内蒙古羊肉</a></li>
<li><a href="#">进口牛肉</a></li>
<li><a href="#">野猪肉</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">蔬菜</a>
<ul>
<li><a href="#">娃娃菜</a></li>
<li><a href="#">西红柿</a></li>
<li><a href="#">西芹</a></li>
<li><a href="#">胡萝卜</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">速冻</a>
<ul>
<li><a href="#">冰淇淋</a></li>
<li><a href="#">湾仔码头</a></li>
<li><a href="#">海参</a></li>
<li><a href="#">牛肉丸</a></li>
</ul>
</li>
</ul>
</body>
</html>
链式调用-层级菜单示例
jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
animate动画实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('.box').animate({'width': 600}, 1000, function () {
$('.box').animate({'height': 400}, 1000, function () {
$('.box').animate({'opacity': 0});
});
});
}); $('#btn2').click(function () {
$('.box2').stop().animate({'width': '+=100'});
})
})
</script>
<style type="text/css">
.box, .box2 {
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div> <br/>
<br/>
<input type="button" name="" value="动画" id="btn2">
<div class="box2"></div>
</body>
</html>
animate动画实例
滑动选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.btns input {
width: 100px;
height: 40px;
background-color: #ddd;
border: 0;
outline: none;
} .btns .current {
background-color: gold;
} .cons {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
} .slides {
width: 1500px;
height: 300px;
position: absolute;
left: 0;
top: 0;
} .cons .slides div {
width: 500px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 300px;
font-size: 30px;
float: left;
} .cons .active {
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $btn = $('.btns input');
var $slides = $('.cons .slides'); $btn.click(function () {
// this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this) // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
$(this).addClass('current').siblings().removeClass('current');
$slides.stop().animate({'left': -500 * $(this).index()});
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="slides">
<div>选项卡一的内容</div>
<div>选项卡二的内容</div>
<div>选项卡三的内容</div>
</div>
</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、获取元素相对页面的绝对位置
offse()
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})
获取元素尺寸示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $div = $('.box'); // 盒子内容的尺寸
console.log($div.width());
console.log($div.height()); // 盒子内容加上padding的尺寸
console.log($div.innerWidth());
console.log($div.innerHeight()); //盒子的真实尺寸，内容尺寸+padding+border
console.log($div.outerWidth());
console.log($div.outerHeight()); // 盒子的真实尺寸再加上margin
console.log($div.outerWidth(true));
console.log($div.outerHeight(true));
})
</script>
<style type="text/css">
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid #000;
margin: 20px;
background-color: gold;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
获取元素尺寸示例
获取元素绝对位置示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $div = $('.box');
$div.click(function () {
var oPos = $div.offset(); document.title = oPos.left + "|" + oPos.top;
})
//console.log(oPos);
})
</script>
</head>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
}
</style>
<body>
<div class="box"> </div>
</body>
</html>
获取元素绝对位置示例
加入购物车动画示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .chart {
width: 150px;
height: 50px;
border: 2px solid #000;
text-align: center;
line-height: 50px;
float: right;
margin-right: 100px;
margin-top: 50px;
} .chart em {
font-style: normal;
color: red;
font-weight: bold;
} .add {
width: 100px;
height: 50px;
background-color: green;
border: 0;
color: #fff;
float: left;
margin-top: 300px;
margin-left: 300px;
} .point {
width: 16px;
height: 16px;
background-color: red;
position: fixed;
left: 0;
top: 0;
display: none;
z-index: 9999;
border-radius: 50%;
} </style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $chart = $('.chart');
var $count = $('.chart em');
var $btn = $('.add');
var $point = $('.point'); var $w01 = $btn.outerWidth();
var $h01 = $btn.outerHeight(); var $w02 = $chart.outerWidth();
var $h02 = $chart.outerHeight(); $btn.click(function () {
var oPos01 = $btn.offset();
var oPos02 = $chart.offset();
$point.css({'left': oPos01.left + parseInt($w01 / 2) - 8, 'top': oPos01.top + parseInt($h01 / 2) - 8});
$point.show(); $point.stop().animate({
'left': oPos02.left + parseInt($w02 / 2) - 8,
'top': oPos02.top + parseInt($h02 / 2) - 8
}, 800, function () {
$point.hide();
var iNum = $count.html();
$count.html(parseInt(iNum) + 1);
});
})
});
</script>
</head>
<body>
<div class="chart">购物车<em>0</em></div>
<input type="button" name="" value="加入购物车" class="add">
<div class="point"></div>
</body>
</html>
加入购物车动画
scrollleft-top-悬浮菜单的使用
可视区尺寸-文档尺寸示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
console.log('可视区的宽度：'+$(window).width() );
console.log('可视区的高度：'+$(window).height() );
console.log('文档的宽度'+$(document).width() );
console.log('文档的高度：'+$(document).height() );
})
</script>
</head>
<body>
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
...
<p>文档内容</p>
</body>
</html>
可视区尺寸-文档尺寸示例
置顶菜单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.banner {
width: 960px;
height: 200px;
background-color: cyan;
margin: 0 auto;
}
.menu {
width: 960px;
height: 80px;
background-color: gold;
margin: 0 auto;
text-align: center;
line-height: 80px;
} .menu_back {
width: 960px;
height: 80px;
margin: 0 auto;
display: none;
} p {
text-align: center;
color: red;
} .totop {
width: 60px;
height: 60px;
background-color: #000;
color: #fff;
position: fixed;
right: 20px;
bottom: 50px;
line-height: 60px;
text-align: center;
font-size: 40px;
border-radius: 50%;
cursor: pointer;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$menu = $('.menu');
$menu_back = $('.menu_back');
$totop = $('.totop'); $(window).scroll(function () {
//console.log('abc');
var iNum = $(document).scrollTop();
//document.title = iNum; if (iNum > 200) {
$menu.css({
'position': 'fixed',
'left': '50%',
'top': 0,
'marginLeft': -480
});
$menu_back.show();
} else {
$menu.css({
'position': 'static',
'marginLeft': 'auto'
});
$menu_back.hide();
} if (iNum > 400) {
$totop.fadeIn();
} else {
$totop.fadeOut();
}
});
$totop.click(function () {
$('html,body').animate({'scrollTop': 0});
})
})
</script>
</head>
<body>
<div class="banner"></div>
<div class="menu">菜单</div>
<div class="menu_back"></div>
<div class="totop">↑</div>
<p>文档内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>文档内容</p>
...
<p>文档内容</p>
</body>
</html>
置顶菜单示例
前端之jquery1的更多相关文章
- jQuery .on() and .off() 命名空间
jQuery .on() and .off() 命名空间 博客分类: 生活 前端开发 jQuery1.7开始,jQuery引入了全新的事件绑定机制,jQuery .on() 和 off() 两个函 ...
- 前端项目课程3 jquery1.8.3到1.11.1有了哪些新改变
web项目课程3 jquery1.8.3到1.11.1有了哪些新改变 一.总结 一句话总结:领会官方升级的意思. 1.live(); 2.die(); 3.bind(); 4.u ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 一步步开发自己的博客 .NET版（10、前端对话框和消息框的实现）
关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局.评论功能等等一些本可以使用插件的.好 ...
- web前端性能调优
最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...
- jQuery-1.9.1源码分析系列（十六）ajax——jsonp原理
json jsonp 类型 "json": 把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...
- Bootstrap 快速人门案例——前端最火的插件
今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...
- 前端CDN公共库
通过使用公共的CDN脚本和样式库,可以在一定程度上加速访问.节省服务器流量.提升你的网站用户体验.本文将介绍国内比较常用的几种免费的CDN库,包括百度.新浪.360.又拍和七牛等. 百度CDN公共库 ...
- web前端基础知识-（六）jQuery-补
一.JS正则 1.定义正则表达式 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串: 1)构造函数 var reg=new RegExp('< ...
随机推荐
- 原子类解决i++问题
原子类解决i++问题 import java.util.concurrent.atomic.AtomicInteger; /** * 一个完整的i++,多线程并发安全问题演示.及使用java.util ...
- 为什么老外不愿意用MyBatis？
作者:陈龙 www.zhihu.com/question/309662829 Spring 团队的Josh Long自己在Twitter上做了一个调查.1625次投票,样本量不算大,但也能说明问题.和 ...
- Winform巧用窗体设计完成弹窗数值绑定-以重命名弹窗为例
场景 在WIinform中有一种场景就是对文件进行重命名时需要获取原来的名字并填充窗体中的输入框, 然后在点击保存时还要能获取弹窗中输入框的内容. 比如点击重命名时弹窗 点击确认时获取输入框内容. 注 ...
- [browser window窗口大小 算是screen补充吧]主要因为移动IE游览器 写了个兼容
先上图吧 来上代码 console.log(window.outerWidth + '--' + window.outerHeight);//只读的整数,声明了整个窗口的XY //IE 不支持此属性, ...
- 微信两种签名算法MD5和HMAC-SHA256
在做微信接口开发的过程中, 有时候发现会提示签名校验失败, 一模一样的签名逻辑就是有些接口跑步通, 找了一圈发现挺坑的; 原来是有些接口的signType签名类型有区别, 有些接口signType要求 ...
- 【转载】Android App应用启动分析与优化
前言: 昨晚新版本终于发布了,但是还是记得有测试反馈app启动好长时间也没进入app主页,所以今天准备加个班总结一下App启动那些事! app的启动方式: 1.)冷启动 当启动应用时,后台没有该应用 ...
- start_udev 是不是会写磁盘头
遇到一个案例,在这里记录一下 一套Oracle 11.2.0.4 RAC环境,操作系统是RHEL 6.5,共享磁盘是通过UDEV实现RAW绑定设备名,如下 [root@rac1 opt]# ll /d ...
- jira问题更改项目
1.点击“问题”在问题中,筛选你要修改的问题,以下是以创建用户为搜索条件,然后点击“工具”---移动所有问题 2.选择要移动的问题,选择项目,进行移动
- go语言设计模式之Strategy
package main import ( "flag" "fmt" "image" "image/color" &qu ...
- Codeforces Round #603 (Div. 2)
传送门 感觉脑子还是转得太慢了QAQ,一些问题老是想得很慢... A. Sweet Problem 签到. Code /* * Author: heyuhhh * Created Time: 2019 ...