1.JQ操作类
1 <input type="button" value="添加类" id="add" /> 2 <input type="button" value="移除类" id="remove" /> 3 <input type="button" value="判断类" id="has" /> 4 <input type="button" value="切换类" id="toggle" /> 5 <div class="box" class="color">我是div盒子</div> 6 <script src="./jquery-1.12.4.js"></script> 7 <script> 8 $(function(){ 9 // 添加类 10 $("#add").click(function(){ 11 // 设置单个类 12 // $(".box").addClass("bgc"); 13 14 // 一次性添加多个类 添加多个类 把全部的类放在一个字符串里 用空格隔开 15 // 如果不加空格 默认一个类 16 // 和classList添加类的区别:classList添加多个类传参 用双引号包括起来 每个类之间用逗号隔开 17 $(".box").addClass("font30 w300 h300 bgc"); 18 }) 19 // 移除类 20 $("#remove").click(function(){ 21 22 // 参数什么都不传 那么就表示移除全部的的类 包括原本设置默认的样式 23 // 和classList添加类的区别:classList添加多个类传参 用双引号包括起来 每个类之间用逗号隔开 24 25 $(".box").removeClass(); 26 }) 27 // 判断类 28 $("#has").click(function(){ 29 // 判断元素是否拥有某个类 如果有就返回true 否则false 30 console.log($(".box").hasClass("bgc")); 31 }) 32 // 切换类 33 $("#toggle").click(function(){ 34 // 判断元素是否拥有某个类 如果有就返回true 否则false 35 $(".box").toggleClass("font30"); 36 }) 37 }) 38 </script>
2.JQ动画
JQ动画分为以下几类：
1.动画的显示隐藏
1 <body> 2 <input type="button" value="显示" id="show" /> 3 <input type="button" value="隐藏" id="hide" /> 4 <input type="button" value="切换" id="toggle" /> 5 <div class="one"></div> 6 </body> 7 <script src="./jquery-1.12.4.js"></script> 8 <script> 9 $(function(){ 10 /* show()方法 有两个参数 11 可以填毫秒数 也可以填代表时间的字符串"slow" "normal" "fast" 12 参数二 动画执行完毕之后 他的回调函数 13 */ 14 $("#show").click(function(){ 15 // 如果show方法不参加任何参数 就表示没有有动画 16 // $(".one").show(); 17 18 // 只要给了参数 那么就会有动画 19 $(".one").show("nomal"); 20 21 // $(".one").show("slow",function(){ 22 // alert("我的动画走完了") 23 // }) 24 }) 25 26 // 隐藏 27 $("#hide").click(function(){ 28 $(".one").hide(1000,function(){ 29 alert("结束了"); 30 }); 31 }) 32 // 切换 33 $("#toggle").click(function(){ 34 $(".one").toggle(1000); 35 }) 36 }) 37 </script>
2.动画滑入滑出
1 <body> 2 <input type="button" value="滑入" id="slideDown" /> 3 <input type="button" value="滑出" id="slideUp" /> 4 <input type="button" value="切换" id="slideToggle" /> 5 <div class="one"></div> 6 </body> 7 <script src="./jquery-1.12.4.js"></script> 8 <script> 9 $(function(){ 10 // 滑入 11 // slideDown 有两个参数 12 // 参数1 动画时间长 可以填毫秒数 也可以填代表时间的字符串"slow" "normal" "fast" 13 // 参数二 动画执行完毕之后 他的回调函数 14 $("#slideDown").click(function(){ 15 // 如果slideDown 不写参数 那么就相当于给了一个默认的时长 normal 16 $(".one").slideDown(); 17 $(".two").slideDown("normal"); 18 }) 19 // 滑出 20 $("#slideUp").click(function(){ 21 $(".one").slideUp(1000,function(){ 22 alert("结束了"); 23 }); 24 }) 25 // 切换 26 $("#slideToggle").click(function(){ 27 $(".one").slideToggle(2000,function(){ 28 alert("结束了"); 29 }); 30 }) 31 }) 32 </script>
3..动画淡入淡出
1 <body> 2 <input type="button" value="淡入" id="fadeIn" /> 3 <input type="button" value="淡出" id="fadeOut" /> 4 <input type="button" value="切换" id="fadeToggle" /> 5 <input type="button" value="淡入到哪里" id="fadeTo"/> 6 <div class="one"></div> 7 8 </body> 9 <script src="./jquery-1.12.4.js"></script> 10 <script> 11 $(function(){ 12 // 淡入 13 $("#fadeIn").click(function(){ 14 $(".one").fadeIn(1000,function(){ 15 alert("风花雪月") 16 }); 17 }) 18 // 淡出 19 $("#fadeOut").click(function(){ 20 $(".one").fadeOut(1000,function(){ 21 alert("花前月下") 22 }); 23 }) 24 // 切换 25 $("#fadeToggle").click(function(){ 26 $(".one").fadeToggle(1000,function(){ 27 alert("风和日丽") 28 }); 29 }) 30 // 淡入到哪里 第二个参数表示淡入目标透明度 31 $("#fadeTo").click(function(){ 32 $(".one").fadeTo(1000,0.5) 33 }); 34 }) 35 </script>
4.动画队列
<body>
<input type="button" value="开始" id="start" />
<input type="button" value="结束" id="stop" />
<div class="box"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
// 动画队列 在同一元素上执行多个动画 那么对于这个动画来说 只会执行当前的动画
// 后面的动画都会被放进动画队列,等前面的动画执行完毕后,才会执行后面的动画
$(function(){
// 开始动画
$("#start").click(function(){
$(".box").slideDown(2000).slideUp(2000)
})
// 停止动画
$("#stop").click(function(){
/* stop()是用来停止动画的 有两个参数
参数1 是否清除队列
参数2 是否跳转到动画的最终效果
如果两个参数都不写 那么默认的两个参数都是false
*/
// $(".box").stop(false,true);
// $(".box").stop(true,false);
// $(".box").stop(true,true);
// $(".box").stop(false,false);
$(".box").stop();
})
})
</script>
5.自定义动画
1 <body> 2 <input type="button" value="移动到800" id="move800" /> 3 <div id="box"></div> 4 5 <script src="./jquery-1.12.4.js"></script> 6 <script> 7 $(function(){ 8 // 给按钮点击事件 让盒子从0移动到800 9 /* 10 animate方法有四个参数 11 参数1 是必填项 为一个对象 里面填的是需要用来做动画的属性 12 参数2 可选项 动画时长 400 13 参数3 可选项 运动曲线 匀速 linear 缓动 swing（默认值） 14 参数4 可选项 动画执行完毕的回调函数 15 */ 16 $("#move800").click(function(){ 17 // 自定义动画 18 $("#box").animate({ 19 left : 800, 20 height : 300, 21 width : 300, 22 opacity : 0.6 23 },3000,"linear",function(){ 24 // 第一个动画执行完毕之后 25 $("#box").animate({ 26 left : 200, 27 height : 150, 28 width : 50, 29 top : 300, 30 opacity : 1 31 },2000,function(){ 32 $("#box").animate({ 33 left : 800, 34 height : 200, 35 width : 100, 36 top : 100, 37 opacity : 1 38 },2000,) 39 }) 40 }) 41 }) 42 }) 43 </script>