前端神器之jquery
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的特点：
1.jQuery 是一个 JavaScript 库。 2.jQuery 极大地简化了 JavaScript 编程。 3.jQuery 很容易学习。
查找元素
1.选择器
基本选择器
$("div").css("color","red")
$("*").css("color","red")
$("#p1").css("color","red") $(".outer").css("color","red") $(".inner,p,div").css("color","red") 层级选择器 $(".outer p").css("color","red")
$(".outer>p").css("color","red")
$(".outer+p").css("color","red")
$(".outer~p").css("color","red") 基本筛选器 $("li:first").css("color","red")
$("li:eq(0)").css("color","red") //序号
$("li:gt(2)").css("color","red") //大于
$("li:even").css("color","red") //偶数
$("li:lt(2)").css("color","red") //小于 属性选择器
$("[alex='sb'][id='p1']").css("color","red") 表单选择器
$("[type='text']").css("width","200px")
$(":text").css("width","400px")
2.筛选器
筛选器
$("li").eq(2).css("color","red");
$("li").first().css("color","red");
$("li").last().css("color","red"); 查找筛选器 $(".outer").children("p").css("color","red");
$(".outer").find("p").css("color","red"); $("li").eq(2).next().css("color","red");
$("li").eq(2).nextAll().css("color","red");
$("li").eq(2).nextUntil("#end").css("color","red"); $("li").eq(4).prev().css("color","red");
$("li").eq(4).prevAll().css("color","red");
$("li").eq(4).prevUntil("li:eq(0)").css("color","red"); console.log($(".outer .inner p").parent().html())
$(".outer .inner p").parents().css("color","red");
$(".outer .inner p").parentsUntil("body").css("color","red");
实例：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show(this)">show</button>kjdksnakdnaskldsdkldladksladdkaldadkal
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel(this)">cancel</button>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
function show(self) {
$(self).parent().siblings().removeClass('hide');
}
function cancel(self) {
// $(self).parent().addClass('hide');
// $(self).parent().prev().addClass('hide');
// $(self).parent().parent().children('.model,.shade').addClass('hide');
$(self).parent().prev().addClass('hide').next().addClass('hide');
} </script>
</body>
</html>
实例：层次菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
background-color: #a47e3c;
width: 30%;
height: 500px;
}
.content div{
float: left;
height: 500px;
background-color: #0077cc;
width: 70%;
display: none;
}
.item .title{
background-color: #4cae4c;
line-height: 40px;
}
.hide{
display: none;
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con current">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con next hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con next1 hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
<div>tab文字内容四</div>
<div>tab文字内容五</div>
<div>tab文字内容六</div>
<div>tab文字内容七</div>
<div>tab文字内容八</div>
<div>tab文字内容九</div>
</div> <script>
function show(self) {
$(self).next().slideDown().parent().siblings().children('.con').slideUp();
// $(self).next().removeClass('hide');
// $(self).parent().siblings().children('.con').addClass('hide');
// $('#contents div').eq($(self).parent().index()).addClass('active').siblings().removeClass('active');
}
$('.item .current div').click(function () {
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
}); $('.item .next div').click(function () {
$('#contents div').eq($(this).index()+3).addClass('active').siblings().removeClass('active');
}); $('.item .next1 div').click(function () {
$('#contents div').eq($(this).index()+6).addClass('active').siblings().removeClass('active');
}); // function show1(self) {
// $(self).next().removeClass('hide');
// $(self).parent().siblings().children('.con').addClass('hide');
// $('#contents div').eq($(self).parent().index()+3).addClass('active').siblings().removeClass('active');
// }
// function show2(self) {
// $(self).next().removeClass('hide');
// $(self).parent().siblings().children('.con').addClass('hide');
// $('#contents div').eq($(self).parent().index()+6).addClass('active').siblings().removeClass('active');
// }
</script>
</div>
</body>
</html>
操作元素
1.属性操作
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
<script>
console.log($('.div1').hasClass('fei'));
console.log($('.div1').attr('con'));
console.log($('.div1').attr('con','c2')); console.log($(':checkbox:first').attr('checked'));
console.log($(':checkbox:last').attr('checked')); console.log($(':checkbox:first').prop('checked'));
console.log($(':checkbox:last').prop('checked')); console.log($('div').prop('con')); //定制属性
console.log($('div').prop('class')); //固有属性 console.log($('#id1').html());
console.log($('#id1').text());
console.log($('#id1').html('<h1>zhang</h1>'));
console.log($('#id1').text('<h1>zhang</h1>')); console.log($(':text').val()); //必须是固有属性
console.log($(':text').next().val());
console.log($(':text').val('789')); $('#id1').css({'color':'red','background-color':'blue'});
</script>
2.CSS操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
}
.div1,.div2{
width: 200px;
height: 1000px;
}
.div1{
border: 6px solid #ffff00;
padding: 10px;
margin:2px;
background-color: #4cae4c;
}
.div2{
background-color: #0077cc;
}
.outer{
position: relative;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
//相对于视口的偏移量
console.log($('.div1').offset().top);
console.log($('.div1').offset().left); console.log($('.div2').offset().top);
console.log($('.div2').offset().left);
//相对于已定位父级的偏移量
console.log($('.div1').position().top);
console.log($('.div1').position().left); console.log($('.div2').position().top);
console.log($('.div2').position().left); // console.log($('body').scrollTop())
console.log($('.div1').height('300'));
console.log($('.div1').innerHeight()); //包括padding
console.log($('.div1').outerHeight()); //包括border和padding
console.log($('.div1').outerHeight(true)); //包括border和padding和margin </script>
</body>
</html>
3.文档处理
//创建一个标签对象
$("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty()
$("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>ppppp</p>
</div>
<button>add</button>
<script src="js/jquery-3.1.1.js"></script>
<script>
$('button').click(function () {
// $('.c1').append('<h1>hello</h1>');
var $ele = $('<h1></h1>');
$ele.html('hello world');
$ele.css('color','red');
//内部插入
// $('.c1').append($ele);
// $ele.appendTo('.c1');
// $('.c1').prepend($ele);
// $ele.prependTo('.c1');
// 外部插入
// $('.c1').after($ele);
// $ele.insertAfter('.c1');
// $('.c1').before($ele);
//替换
// $('p').replaceWith($ele);
//删除与清空
// $('.c1').empty();
// $('.c1').remove();
//复制
var $ele1 = $(self).clone();
$('.c1').after($ele1); })
</script>
</body>
</html>
克隆练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div> <script src="js/jquery-3.1.1.js"></script>
<script>
function add(self) {
var $clone = $(self).parent().clone();
$clone.children('button').text('-').attr('onclick','remove(this)');
$('.outer').append($clone);
}
function remove(self) {
$(self).parent().remove();
}
</script>
</body>
</html>
实例：全反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<button onclick="selectall()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px;">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table> <script>
function selectall() {
$(':checkbox').each(function () {
$(this).prop('checked',true);
})
}
function cancel() {
$(':checkbox').each(function () {
$(this).prop('checked',false);
})
}
function reverse() {
$(':checkbox').each(function () {
$(this).prop('checked',!$(this).prop('checked'));
// if($(this).prop('checked')==false){
// $(this).prop('checked',true);
// }
// else{
// $(this).prop('checked',false)
// }
})
}
</script>
</body>
</html>
实例：左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
background-color: #a47e3c;
width: 30%;
height: 500px;
}
.content div{
float: left;
height: 500px;
background-color: #0077cc;
width: 70%;
display: none;
}
.item .title{
background-color: #4cae4c;
line-height: 40px;
}
.hide{
display: none;
}
.content .active{
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con current">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con next hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con next1 hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
<div>tab文字内容四</div>
<div>tab文字内容五</div>
<div>tab文字内容六</div>
<div>tab文字内容七</div>
<div>tab文字内容八</div>
<div>tab文字内容九</div>
</div> <script>
function show(self) {
$(self).next().slideDown().parent().siblings().children('.con').slideUp();
// $(self).next().removeClass('hide');
// $(self).parent().siblings().children('.con').addClass('hide');
// $('#contents div').eq($(self).parent().index()).addClass('active').siblings().removeClass('active');
}
$('.item .current div').click(function () {
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
}); $('.item .next div').click(function () {
$('#contents div').eq($(this).index()+3).addClass('active').siblings().removeClass('active');
}); $('.item .next1 div').click(function () {
$('#contents div').eq($(this).index()+6).addClass('active').siblings().removeClass('active');
}); // function show1(self) {
// $(self).next().removeClass('hide');
// $(self).parent().siblings().children('.con').addClass('hide');
// $('#contents div').eq($(self).parent().index()+3).addClass('active').siblings().removeClass('active');
// }
// function show2(self) {
// $(self).next().removeClass('hide');
// $(self).parent().siblings().children('.con').addClass('hide');
// $('#contents div').eq($(self).parent().index()+6).addClass('active').siblings().removeClass('active');
// }
</script>
</div>
</body>
</html>
事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){}) 事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件； [selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
<script>
//1.页面加载
// $(document).ready(function () {
// $('ul li').html(6);
// });
// $(function () {
// $('ul li').html(666);
// });
//2.事件绑定简写
$(function () {
$('li').click(function () {
alert('666666');
});
// $('li').unbind('click');
// $('ul li').bind('click',function () {
// alert('666666');
// })
$('button').click(function () {
var $ele=$('<li>');
var len=$('ul li').length;
$ele.html((len+1)*111);
$('ul').append($ele);
}) //3.事件委托
$('ul').on('click','li',function () {
alert('666666');
})
});
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<button>add</button> </body>
</html>
实例：返回顶部-滑轮滚动监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .div2{
width: 100%;
height: 1000px;
}
.div1{
border: 6px solid #ffff00;
padding: 10px;
margin:2px;
width: 40%;
height: 150px;
overflow: scroll;
background-color: #4cae4c;
}
.div2{
background-color: #0077cc;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 90px;
height: 50px;
background-color: gray;
color: white;
text-align: center;
line-height: 50px;
}
.hide{
display: none;
} </style>
</head>
<body>
<div class="div1">
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
<h1>111</h1>
</div>
<div class="div2">
<button onclick="returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
window.onscroll=function () {
console.log($(window).scrollTop());
if($(window).scrollTop()>100){
$('.returnTop').removeClass('hide');
} else{
$('.returnTop').addClass('hide');
}
};
// function returnTop() {
// // $(window).scrollTop(0);
// $('.div1').scrollTop(0);
// }
$('.div2 button').click(function () {
$('.div1').scrollTop(0);
}) </script>
</body>
</html>
动画效果
显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<button onclick="show()">显示</button>
<button ONCLICK="hide()">隐藏</button>
<button onclick="qiehuan()">切换</button> <script src="js/jquery-3.1.1.js"></script>
<script>
function show() {
$('div').show(1000);
} function hide() {
$('div').hide(1000,function () {//回调函数：动画效果完成之后会触发
alert('隐藏了！')
});
}
function qiehuan() {
$('div').toggle(1000);
}
</script>
</body> </html>
滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style> #content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body> <div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div> <div id="content">helloworld</div> </body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000); });
$("#out").click(function(){
$("#id1").fadeOut(1000); });
$("#toggle").click(function(){
$("#id1").fadeToggle(1000); });
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4); });
}); </script> </head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button> <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div> </body>
</html>
扩展方法
<script> $.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。 jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4)); //----------------------------------------------------------------------- $.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
} }
}); $("p").print();
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script src="js/jquery-3.1.1.js"></script>
<script>
//jquery调用方法
// $.each(obj,function () {
//
// });
// $('').each(function () {
//
// });
$.extend({
Myprint:function () {
console.log('hello')
}
});
$.Myprint();
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4)); $.fn.extend({
get_text:function () {
// for(var i=0;i<this.length;i++){
// console.log(this[i].innerHTML)
// }
$.each($(this),function (x,y) {
// console.log(y.innerHTML)
console.log($(y).html())
})
}
});
$('p').get_text();
</script>
</body>
</html>
实例：轮播图
猛击下载 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style>
body{
background-color: black;
}
.main{
position: relative;
width: 1000px;
height: 400px;
overflow: hidden;
margin: 100px auto;
}
.main ul.img li{
position: absolute;
top: 0;
left: 0;
list-style: none;
} .main ul li img{
width: 1000px;
height: 400px;
}
.main .dom{
position: absolute;
bottom: 20px;
left: 340px;
/*width: 200px;*/
list-style: none;
}
.main .dom li{
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: white;
margin-left: 40px;
text-align: center;
line-height: 18px;
opacity: 90%;
cursor: pointer;
}
.btn{
display: none;
background-color: lightgray;
position: absolute;
top: 40%;
width: 30px;
height: 60px;
cursor: pointer;
color: white;
font-size: 30px;
text-align: center;
line-height: 60px;
opacity: 0.7;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.main:hover .btn{
display: block;
}
.main ul.dom .active{
background-color: red;
}
.hide{
display: none;
}
</style>
<body>
<div class="main">
<ul class="img">
<li><a href=""><img src="data:images/beijing3.png" alt=""></a></li>
<li class="hide"><a href=""><img src="data:images/beijing2.png" alt=""></a></li>
<li class="hide"><a href=""><img src="data:images/beijing1.png" alt=""></a></li>
<li class="hide"><a href=""><img src="data:images/xiaomen.png" alt=""></a></li>
</ul>
<span class="btn left"><</span>
<span class="btn right">></span>
<ul class="dom">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
</div> <script src="jQuery/js/jquery-3.1.1.js"></script>
<script> //通过jquery自动创建按钮标签
var img_num = $('.img li').length;
for(var i=0;i<img_num;i++){
$('.dom').append('<li></li>');
}
$('.dom li').eq(0).addClass('active'); //手动轮播
var num = 0;
$('.dom li').mouseover(function () {
num = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
// $('.img li').eq(index).show().siblings().hide();
// $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
$('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}) //自动轮播
var clock = setInterval(auto_play,3000);
function auto_play() {
if (num==img_num-1){
num=-1;
}
num++;
$('.dom li').eq(num).addClass('active').siblings().removeClass('active');
$('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
function play_L() {
if (num==0){
num=img_num;
}
num--;
$('.dom li').eq(num).addClass('active').siblings().removeClass('active');
$('.img li').eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
} //鼠标悬浮
$('.main').hover(function () {
clearInterval(clock);
},function () {
clock = setInterval(auto_play,3000);
}); //button加定播
$('.right').click(auto_play);
$('.left').click(play_L); </script>
</body>
</html>
前端神器之jquery的更多相关文章
- 前端神器之Sublime Text2/3简单明了使用总结
为什么叫神器呢? 我总结如下: 第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~).一般IDE比如WebStorm(它也是一款神器来着),Aptana(也比 ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- ORACLE恢复神器之ODU/AUL/DUL
分享ORACLE数据库恢复神器之ODU.DUL和AUL工具. ODU:ORACLE DATABASE UNLOADER DUL:DATA UNLOADER AUL:也称MyDUL 关于三种工具说明: ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- 知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- python三大神器之virtualenv pip, virtualenv, fabric通称为pythoner的三大神器。
python三大神器之virtualenv pip, virtualenv, fabric通称为pythoner的三大神器. virtualenv virtualenv------用来建立一个虚拟 ...
随机推荐
- Java 集合系列（二）—— ArrayList
ArrayList ArrayList 是通过一个数组来实现的,因此它是在连续的存储位置存放对象的引用,只不过它比 Array 更智能,能够根据集合长度进行自动扩容. 假设让我们来实现一个简单的能够自 ...
- Filebeat使用内置的mysql模块收集日志存储到ES集群并使用kibana存储
Filebeat内置了不少的模块,可以直接使用他们对日志进行收集,支持的模块如下: [root@ELK-chaofeng07 logstash]# filebeat modules list Enab ...
- 《常见排序算法--PHP实现》
原文地址: 本文地址:http://www.cnblogs.com/aiweixiao/p/8202360.html Original 2018-01-02 关注 微信公众号 程序员的文娱情怀 1.概 ...
- 【Python 22】52周存钱挑战2.0（列表list和math函数）
1.案例描述 按照52周存钱法,存钱人必须在一年52周内,每周递存10元.例如,第一周存10元,第二周存20元,第三周存30元,直到第52周存520元. 记录52周后能存多少钱?即10+20+30+. ...
- C#基础知识之类和结构体
虽然项目中一直在使用类.结构体等类型,仔细琢磨,还真无法系统的说出个所以然.记录一下类.结构体.类和结构体区别 一.类 对于类,大家都特别熟悉.简单的介绍一下类的结构,然后记录一下Class需要注意的 ...
- Java 8 中为什么要引出default方法
(原) default方法是java 8中新引入进的,它充许接口中除了有抽象方法以外,还可以拥用具有实现体的方法,这一点跟jdk8之前的版本已经完全不一样了,为什么要这样做呢? 拿List接口举例,在 ...
- day 1总结-python基础
第一天的复习 目录:1.编程语言的区分 2.python的优缺点 3.python环境的搭建,版本之间的大致区别 4.代码的注释规则 5.变量 6.常量 7.基本程序交互 8.基础数据类型 9.基础循 ...
- redis分页摘抄
Redis 笔记与总结8 PHP + Redis 信息管理系统(分页+好友关注) 分页 要对列表页进行分页,需要知道: ①用户总数 $count ② 页大小 $pageSize:用户自定义 ③ 当前页 ...
- Linux：Day12(上) 进程
内核的功用:进程管理.文件系统.网络功能.内存管理.驱动程序.安全功能 Process:运行中的程序的一个副本. 存在生命周期 Linux内核存储进程信息的固定格式 :task struct 多个任务 ...
- eclipse 创建springboot项目
eclipse创建springboot项目的三种方法: 引自:https://blog.csdn.net/mousede/article/details/81285693