FrontEnd-Basis-10th
周五，晴，记录生活分享点滴
参考博客1：https://www.cnblogs.com/yuanchenqi/articles/5663118.html
参考博客2：https://www.cnblogs.com/5poi/p/6362208.html
jQuery 2
页面载入
当页面载入成功后再运行的函数事件 使用后可以在开头位置写入jq代码
$(document).ready(function(){
do something...
});
// 简写
$(function($) {
do something...
});
事件操作指令
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
event object 对象
所有的事件函数都可以传入event参数方便处理事件
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法：
event.pageX //事件发生时，鼠标距离网页左上角的水平距离
event.pageY //事件发生时，鼠标距离网页左上角的垂直距离
event.type //事件的类型
event.which //按下了哪一个键
event.data //在事件对象上绑定数据，然后传入事件处理函数
event.target //事件针对的网页元素
event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡
实例 拖动面板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
动画效果
基本
在动画完成后,可选地触发一个回调函数
$("p").show() //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide() //隐藏显示的元素
$("p").toggle(); //切换 显示/隐藏
$("p").stop() //停止所有在指定元素上正在运行的动画
实例 显示与隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$('#hide').click(function(){
$('p').hide(1000);
})
$('#show').click(function(){
$('p').show(1000);
})
$('#toggle').click(function(){
$('p').toggle(1000);
})
})
</script>
</head>
<body>
<p style="">hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
</body>
</html>
实例 回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$('#hide').click(function(){
$('p').hide(1000,function(){
alert(1);
});
})
$('#show').click(function(){
$('p').show(1000);
})
$('#toggle').click(function(){
$('p').toggle(1000);
})
})
</script>
</head>
<body>
<p style="">hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
</body>
</html>
淡入淡出
$("p").fadeIn("900"); //用900毫秒时间将段落淡入
$("p").fadeOut("900"); //用900毫秒时间将段落淡出
$("p").fadeToggle("900"); //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒时间将段落的透明度调整到0.6
实例 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
$("#id2").fadeIn(1000);
$("#id3").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
$("#id2").fadeOut(1000);
$("#id3").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
$("#id2").fadeToggle(1000);
$("#id3").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
$("#id2").fadeTo(1000,0.5);
$("#id3").fadeTo(1000,0);
});
});
</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; color: rgb(153, 153, 119);">></div>
<div id="id2" style="display:none; width: 80px;height: 80px; color: rgb(153, 153, 119);">></div>
<div id="id3" style="display:none; width: 80px;height: 80px; color: rgb(153, 153, 119);">></div>
</body>
</html>
滑动
$("p").slideDown("900"); //用900毫秒时间将段落滑下
$("p").slideUp("900"); //用900毫秒时间将段落滑上
$("p").slideToggle("900"); //用900毫秒时间将段落滑上，滑下
实例 滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
$(document).ready(function(){
$("#flipshow").click(function(){
$("#content").slideDown(1000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#toggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#flipshow,#content,#fliphide,#toggle{
padding: 5px;
text-align: center;
background-color: blueviolet;
border:solid 1px red;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="toggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
实例 京东轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
ul{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
padding: 0;
}
.outer{
width:790px ;
height: 340px;
margin: 0 auto;
border: darkturquoise dashed 6px;
position: relative;
cursor: pointer;
}
.outer:hover .btn{
display: block;
}
.outer .img ul li img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.outer .b-slider{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -10%;
cursor:default;
}
.outer .b-slider .num{
text-align: center;
border-radius: 25px;
font-size: 0;
background-color: hsla(0,0%,100%,.3);
height: 20px;
}
.outer .b-slider .num li{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: white;
text-align: center;
margin: 4px 5px;
}
.outer .b-slider .num li.active{
background-color: #db192a;
}
.btn{
position: absolute;
top: 50%;
margin-top: -30px;
width: 30px;
height: 60px;
background: rgba(0,0,0,.1);
text-align: center;
line-height: 60px;
color: white;
font-weight: bolder;
display: none;
cursor: pointer;
}
.btn:hover{
background: rgba(0,0,0,.6);
}
.outer .right{
right: 0;
}
</style>
<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function(){
//生成底部标签:
var size = $('.img img').size();
for (var i= 1;i<=size;i++){
$('.b-slider .num').append('<li></li>');
}
$('.num li').first().addClass('active');
$('.img li').first().show().siblings().hide();
$('.num li').mouseover(function(){
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).index();
i = index;
$('.img li').eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500);
})
var time = setInterval(move,3000);
i = 0;
function move(){
i++;
if(i==size){i=0;}
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.img li').eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$('.outer').hover(function(){
clearInterval(time);
},function(){
time = setInterval(move,3000);
});
$('.right').click(function(){
move();
})
$('