jQuery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
参数：
1、什么属性做动画，属性设置{param1: value1, param2: value2}
2、动画执行的时间，单位毫秒
3、动画曲线：
swing（默认值）开始和结束慢，中间快
linear匀速
可省略不写
4、回调函数，动画完成之后要做的事情，可无限嵌套
*/
$('#div1').animate({
width: 200,
height: 200},
1000,
function(){
// alert('动画完了！');
$(this).animate(
{marginLeft: 500},
1000,
function(){
$(this).animate(
{marginTop: 500},
1000,
)
}
)
}
);
})
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
jQuery循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循环</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //给全部的li设置内容和样式
$('.list li').html('111');
$('.list li').css({background:'gold'});
//第一个参数index是索引值
$('.list li').each(function(index) {
// alert(index);//弹出索引值
//$(this)是每一个li
$(this).html(index);
});
})
</script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
元素绝对位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绝对位置</title>
<style type="text/css">
.con{
width: 600px;
height: 600px;
margin: 50px auto 0;
}
.box{
width: 100px;
height: 100px;
background-color: gold;
margin-bottom: 10px;
}
.pos{
margin-left: 500px;
}
.pop{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
left:0;
top: 0;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos');
//offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果
var pos = $pos.offset();
// console.log(pos);
// alert(pos.left + "," + pos.top);
var w = $pos.outerWidth();
var h = $pos.outerHeight();
// alert(w);
$('.pop').css({left:pos.left + w,top:pos.top});
$pos.mouseover(function() {
$('.pop').show();
});
$pos.mouseout(function() {
$('.pop').hide();
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
<div class="box"></div>
<div class="box pos"></div>
<div class="box"></div>
</div>
<div class="pop">提示信息！</div>
</body>
</html>
鼠标移入移出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入移出</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
margin: 100px auto 0;
}
.son{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*进入子元素也触发*/
/*$('#div1').mouseover(function() {
$(this).animate({marginTop: 50});//.stop()
});
$('#div1').mouseout(function() {
$(this).animate({marginTop: 100});//.stop()
});*/
/*进入子元素不触发*/
/*$('#div1').mouseenter(function() {
$(this).stop().animate({marginTop: 50});//
});
$('#div1').mouseleave(function() {
$(this).stop().animate({marginTop: 100});//
});*/
/*通过hover（mouseenter+mouseleave）实现简写*/
$('#div1').hover(function() {
$(this).stop().animate({marginTop: 50});
}, function() {
$(this).stop().animate({marginTop: 100});
});
})
</script>
</head>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
</html>
jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery其他事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// //JS原生写法
// window.onload = function(){
// }
// //jQuery写法，等同于上面写法
// $(window).load(function(){
// })
// //ready的写法
// $(document).ready(function(){
// })
// //ready的简写
// $(function(){
// })
// 窗口改变尺寸的时候，会高频触发
$(window).resize(function() {
console.log('3');
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以触发自定义事件，也可以触发原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
// $('#btn1').trigger('hello');
})
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮2" id="btn2">
</body>
</html>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
.grandfather{
width: 300px;
height: 300px;
background-color: green;
position: relative;
}
.father{
width: 200px;
height: 200px;
background-color: gold;
}
.son{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 400px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').click(function() {
alert(4);
});
$('.grandfather').click(function() {
alert(3);
});
$('.father').click(function() {
alert(2);
});
$('.son').click(function(event) {//event代表当前事件
alert(1);
// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
// alert("X轴坐标：" + event.clientX);
// //阻止事件冒泡
// event.stopPropagation();
//合并阻止操作：把阻止冒泡和阻止默认行为合并
return false;
});
//阻止右键菜单
$(document).contextmenu(function(event){
// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
// event.preventDefault();
//合并阻止
return false;
})
})
</script>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
弹框-阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器弹框</title>
<style type="text/css">
.pop_con{
display: none;/*默认不显示，用定时器显示*/
}
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;/*使用固定定位*/
left: 50%;/*左上角位于页面中心*/
top: 50%;
margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
margin-top: -150px;
z-index: 9999;/*弹窗在最前面*/
}
/*遮罩样式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*设置透明度30%，兼容IE6、7、8*/
opacity: 0.3;
filter: alpha(opacity=30);
z-index: 9990;/*遮罩在弹窗后面*/
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
$('#pop').show();
return false;
});
$('#shutoff').click(function() {
$('#pop').hide();
});
//点弹框以外的地方，也能让弹框消失
$(document).click(function(){
// setTimeout(function(){
// $('#pop').hide();
// },2000);
$('#pop').hide();
});
$('.pop').click(function() {
return false;
});
//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
$('#link1').click(function() {
return false;
});
})
</script>
</head>
<body>
<h1>首页标题</h1>
<p>页面内容</p>
<a href="http://www.baidu.com" id="link1">百度网</a>
<input type="button" name="" value="弹出" id="btn">
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
<a href="#" id="shutoff">关闭</a>
<input type="text" name="">
</div>
<!-- 遮罩层 -->
<div class="mask"></div>
</div>
</body>
</html>
网友评论