Web前端学习笔记—— jQuery之样式、动画
jQuery操作样式
CSS操作
-
功能：设置或者修改样式，操作的是style属性。
-
操作单个样式
// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 将背景色修改为灰色
- 设置多个样式
// 参数是一个对象，对象中包含了需要设置的样式名和样式值
$obj.css(obj);
// 使用案例
$('#one').css({
'background':'gray',
'width':'400px',
'height':'200px'
});
- 获取样式
// name:需要获取的样式名称
$obj.css(name);
// 案例
$('div').css('background-color');
注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
- 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
- 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
class操作
- 添加样式类
// name：需要添加的样式类名，注意参数不要带点.
$obj.addClass(name);
// 例子,给所有的div添加one的样式。
$('div').addClass('one');
- 移除样式类
// name:需要移除的样式类名
$obj.removeClass('name');
// 例子，移除div中one的样式类名
$('div').removeClass('one');
- 判断是否有某个样式类
// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name)
// 例子，判断第一个div是否有one的样式类
$('div').hasClass('one');
- 切换样式类
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');
案例
- tab栏切换案例 [07-tab栏切换.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
style>
<script src="jquery-1.12.2.js">script>
<script>
//有些事现在不做,以后就没有机会了
//有些事现在不做,是为了以后做的更好
script>
<script>
//页面加载的事件
$(function () {
//获取所有的li标签,添加鼠标进入的事件
$(".tab>li").mouseenter(function () {
//设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素的类样式
$(this).addClass("active").siblings("li").removeClass("active");
//设置鼠标进入的li对应的div的类样式
//获取当前鼠标进入的li的索引值
var index=$(this).index();
//获取下面的所有的div
$(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
});
});
script>
head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆span>li>
<li class="tab-item">国妆名牌<span>◆span>li>
<li class="tab-item">清洁用品<span>◆span>li>
<li class="tab-item">男士精品li>
ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/>a>
div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/>a>
div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/>a>
div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/>a>
div>
div>
div>
body>
html>
jQuery动画
- jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。
- 演示动画效果 [08-演示jQuery动画（animate）.html]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
div {
width: 300px;
height: 200px;
background-color: mediumvioletred;
}
style>
<script src="jquery-1.12.1.js">script>
<script>
/*
*
* show和hide方法有参数
* 参数1:时间----1000毫秒---1秒
* 参数2:回调函数---动画执行完毕后才执行
*
* */
$(function () {
//点击第一个按钮显示div
$("#btn1").click(function () {
$("#dv").show(5000,function () {
alert("完了");
});
});
//点击第二个按钮隐藏div
$("#btn2").click(function () {
$("#dv").hide(5000,function () {
alert("好了");
});
});
});
script>
head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<div id="dv">div>
body>
html>
三组基本动画
- 显示(show)与隐藏(hide)是一组动画：
- 滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
- 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
$obj.show([speed], [callback]);
// speed(可选)：动画的执行时间
// 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
// 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
// 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
// callback(可选):执行完动画后执行的回调函数
slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
div {
width: 300px;
height: 200px;
background-color: mediumvioletred;
}
style>
<script src="jquery-1.12.1.js">script>
<script>
/*
*
* show和hide方法有参数
* 参数1:时间----1000毫秒---1秒
* 参数2:回调函数---动画执行完毕后才执行
*
* 参数和上面的是一样
* slideDown()滑出
* slideUp()滑入
* slideToggle()切换滑入和滑出
*
* fadeIn()淡入
*
* fadeOut()淡出
*
* fadeToggle()切换淡入和淡出
*
* fadeTo(时间,透明值结束);
*
*
* slow 比较慢的
* fast 比较快的
* normal
*
*
*
*
* */
//
// $(function () {
//
// //点击第一个按钮显示div
// $("#btn1").click(function () {
// $("#dv").slideDown(500,function () {
// alert("显示了");
// });//滑出
// });
// //点击第二个按钮隐藏div
// $("#btn2").click(function () {
// $("#dv").slideUp(500,function () {
// alert("隐藏了");
// });//滑入
// });
// //第三个按钮
// $("#btn3").click(function () {
// $("#dv").slideToggle(5000);
// });
// });
$(function () {
//点击第一个按钮显示div
$("#btn1").click(function () {
$("#dv").fadeIn(5000);//淡入
});
//点击第二个按钮隐藏div
$("#btn2").click(function () {
$("#dv").fadeOut(5000);//淡出
});
//第三个按钮
$("#btn3").click(function () {
//$("#dv").fadeToggle(5000);//切换
$("#dv").fadeTo("fast",0.2);
});
});
script>
head>
<body>
<input type="button" value="显示" id="btn1"/>
<input type="button" value="隐藏" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<div id="dv">div>
body>
html>
自定义动画
- animate: 自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动） 可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titletitle>
<style>
img{
position: absolute;
}
style>
<script src="jquery-1.12.1.js">script>
<script>
//参数1:键值对----css属性和值
//参数2:时间---1000毫秒---1秒
//参数3:回调函数
$(function () {
$("#im").animate({"width":"300px","height":"300px","left":"100px","top":"100px"},3000).animate({"width":"30px","height":"30px","left":"10px","top":"600px"},300).animate({"width":"50px","height":"50px","left":"800px","top":"20px","opacity":0.5},2000);
});
script>
head>
<body>
<img src="images/bird.png" alt="" id="im" />
body>
html>
动画队列与停止动画
- 在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
// stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
// 第一个参数：是否清除队列
// 第二个参数：是否跳转到最终效果
案例
- 开机动画案例 [09-开关机动画.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
style>
<script src="vendor/jquery.js">script>
<script>
$(function () {
$("#closeButton").click(function () {
//让下面的div高度变为0
$(this).siblings(".bd").slideUp(500, function () {
//让整个box的宽度编程0
$(this).parent().animate({"width":0},500);
});
});
});
script>
head>
<body>
<div class="box" id="box">
<span id="closeButton">span>
<div class="hd" id="headPart">
<img src="images/t.jpg" alt=""/>
div>
<div class="bd" id="bottomPart">
<img src="images/b.jpg" alt=""/>
div>
div>
body>
html>
- 下拉菜单-动画 [10-下拉菜单-动画.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(images/bg.jpg);
}
.wrap li{
background-image: url(images/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
style>
<script src="jquery-1.11.1.js">script>
<script>
jQuery(document).ready(function () {
//需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
//需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；
//需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
$(".wrap>ul>li").mouseover(function () {
$(this).children("ul").stop().slideDown();
});
//需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").stop().slideUp();
});
});
script>
head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单1a>li>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
ul>
li>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单1a>li>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
ul>
li>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单1a>li>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
ul>
li>
ul>
div>
body>
html>