1. css方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="../jQuery.min.js"></script>
<!--
css()
1. 参数只写属性名, 那么返回的是属性值; $(this).css('color') => green...
2. 参数是 属性名, 属性值, 并且用逗号分隔, 属性必须加引号, 属性值如果是数字则可以不加单位和引号;
3. 若是复合属性, 则必须采取驼峰命名法;
4. 设置多个样式(以对象的形式传递参数);
-->
</head>
<body>
<div>123</div>
<script>
$(function() {
console.log($('div').css('width')); // 200px
// $('div').css('width', '300px'); // 宽度被修改为300px
// $('div').css('width', 250); // 宽度被修改为250px
$('div').css({ // 设置多个样式(以对象的形式传递参数)
width: 400,
height: 400,
backgroundColor: 'blue' //若是复合属性, 则必须采取驼峰命名法, 正确
// background-color: 'blue'; //错误, 不能按照css的写法
});
});
</script>
</body>
</html>
2. 类操作样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
.current {
background-color: blue;
}
.one {
color: purple;
font-size: 20px;
background-color: pink;
}
.two {
color: blue;
}
</style>
<script src="../jQuery.min.js"></script>r
</head>
<body>
<!--
1. addClass('className'); //相当于追加类名, 不影响之前的类名(原生的js赋值类名会发生覆盖)
2. removeClass('className');
3. toggleClass('className');
-->
<div class="current"></div>
<span class="one">HelloWorld</span>
<script>
$(function() {
$('div').click(function() {
//1.addClass();
// $(this).addClass('current');
//2.removeClass();
// $(this).removeClass('current');
// 3.toggleClass()： 如下所示：如果存在current类名，就去掉; 如果不存在，就给添加上;
$(this).toggleClass('current');
});
});
</script>
<!-- 原生的js赋值类名会发生覆盖; -->
<script>
var span = document.querySelector('span');
span.className = 'two';
</script>
</body>
</html>
3. 显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jQuery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--
show();
hide();
toggle();
-->
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$('button').eq(1).click(function() {
$('div').hide('slow', function() {
alert('callback,last execute!'); //回调函数
});
});
$('button').eq(0).click(function() {
$('div').show(1000);
});
$('button').eq(2).click(function(){
$('div').toggle(1000);
});
});
</script>
</body>
</html>
4. 上拉下滑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jQuery.min.js"></script>
<style>
div {
display: none;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<!--
1. slideDown()： 下拉滑动;
2. slideUp()： 上拉滑动;
3. slideToggle(): 切换滑动;
4. hover(): 事件切换;
-->
<div></div>
<script>
$(function () {
/*
// 1. 鼠标点击触发下拉上滑效果;
$('button').eq(0).click(function() {
$('div').slideDown(500);
});
$('button').eq(1).click(function() {
$('div').slideUp(500);
});
*/
/*
// 2. 鼠标经过时触发第一个函数, 鼠标离开时触发第二个函数
$('button').hover(function() {
$('div').slideDown();
}, function() {
$('div').slideUp();
});
*/
/*
// 3. 单击发生切换效果(原先的隐藏变显示, 原先的显示变隐藏)
$('button').eq(2).click(function() {
$('div').slideToggle('slow');
});
*/
// 4. hover(): 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
$('button').hover(function () {
$('div').slideToggle('slow');
});
});
</script>
</body>
</html>
5. 停止动画队列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="../jQuery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
/*
动画或效果队列：
动画或效果一旦触发就会执行, 如果多次触发, 就会造成过个动画或效果排队执行;
方法：
stop();
*/
$(function() {
/*
//1. 问题： 多次快速经过不同按钮, 引起动画排队, 运行即知;
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});
*/
// 2. 解决方案： stop() 用于停止动画效果, stop()写到动画或者效果前面, 相当于停止结束上一次的动画;
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
</html>
6. 淡入淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 150px;
height: 300px;
background-color: red;
display: none;
}
</style>
<script src="../jQuery.min.js"></script>
</head>
<body>
<!--
1. fadeIn(); 淡入：就是出现的意思
2. fadeOut(); 淡出：就是消失隐藏的意思
3. fadeToggle();
4. fadeTo();
-->
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
//1. 淡入 fadeIn()
$("button").eq(0).click(function() {
$("div").fadeIn(1000);
});
//2. 淡出 fadeOut(): 类似于消失隐藏的效果
$("button").eq(1).click(function() {
$("div").fadeOut(1000);
});
//3. 淡入淡出切换 fadeToggle()
$("button").eq(2).click(function() {
$("div").fadeToggle(1000);
});
//4. 修改透明度 fadeTo() 这个速度和透明度要必须写
//用1000毫秒缓慢的将div的透明度调整到0.66, 大约2/3的可见度
$("button").eq(3).click(function() {
$("div").fadeTo(1000, 0.66);
});
});
</script>
</body>
</html>
7. 自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jQuery.min.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--
animate();
-->
<button>动起来</button>
<div></div>
<script>
$(function () {
$("button").click(function() {
$("div").animate({
left: 200,
top: 300
}, 1000);
});
});
</script>
</body>
</html>
