jQuery是什么？
jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JQuery效果-隐藏和显示
.show()让隐藏的元素显示。效果为：同时修改元素的高度、宽度、opacity属性
.hide()让显示的元素隐藏，与show相反
.toggle() 方法用来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 ????????<script type="text/javascript"> 8 ????????????$(document).ready(function(){ 9 ??????????????$("#hide").click(function(){10 ????????????????$("p").hide();11 ??????????????});12 ??????????????$("#show").click(function(){13 ????????????????$("p").show();14 ??????????????});15 ????????????});16 ????????</script>17 ????</head>18 ????<body>19 ????????<p>如果你点击“隐藏” 按钮，我将会消失。</p>20 ????????<button id="hide">隐藏</button>21 ????????<button id="show">显示</button>22 ????</body>23 </html>
JQuery效果-淡入淡出
.fadeIn() 让隐藏的元素淡入显示
.fadeOut() 让显示的元素淡出隐藏，修改透明度
. fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
.fadeTo(时间,最终透明度,函数)同fadeToggle，接受第二个参数，表示达到最终透明度
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 ????????<script type="text/javascript"> 8 ????????????$(document).ready(function(){ 9 ????????????????$("button").click(function(){10 ????????????????????$("#div1").fadeToggle();11 ????????????????????$("#div2").fadeToggle("slow");12 ????????????????????$("#div3").fadeToggle(3000);13 ????????????????});14 ????????????});15 ????????</script>16 ????</head>17 ????<body>18 ????????<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>19 ????????<button>点击淡入/淡出</button>20 ????????<br><br>21 ????????<div id="div1" style="width:80px;height:80px;background-color:red;"></div>22 ????????<br>23 ????????<div id="div2" style="width:80px;height:80px;background-color:green;"></div>24 ????????<br>25 ????????<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>26 ????</body>27 </html>JQuery效果-滑动
.slideDown() 让隐藏的元素显示，效果为从上往下，增加高度；
.slideUp() 让显示的元素隐藏，效果为从下往上，减小高度；
. slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 ????????<style type="text/css"> ?8 ????????????#panel,#flip 9 ????????????{10 ????????????????padding:5px;11 ????????????????text-align:center;12 ????????????????background-color:#e5eecc;13 ????????????????border:solid 1px #c3c3c3;14 ????????????}15 ????????????#panel16 ????????????{17 ????????????????padding:50px;18 ????????????????display:none;19 ????????????}20 ????????????</style>21 ????????<script type="text/javascript">22 ????????????$(document).ready(function(){23 ??????????????$("#flip").click(function(){24 ????????????????$("#panel").slideToggle("slow");25 ??????????????});26 ????????????});27 ????????</script>28 ????????29 ????</head>30 ????<body>31 ????????<div id="flip">点我，显示或隐藏面板。</div>32 ????????<div id="panel">Hello world!</div>33 ????</body>34 </html>JQuery效果-animate()方法
.animate({最终样式属性，键值对对象},
动画事件,
动画效果("linear","swing"),
动画执行完后的回调函数)
自定义动画注意事项：
参数一的对象中，键必须使用驼峰法则
只有数值类型的属性能够使用动画，非数值类型的属性不能使用动画
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????????<script type="text/javascript" src="js/jquery-3.1.1.js" ></script> 7 ????????<script type="text/javascript"> 8 ????????????$(document).ready(function(){ 9 ??????????????$("button").click(function(){10 ????????????????var div=$("div"); ?11 ????????????????div.animate({left:‘100px‘},"slow");12 ????????????????div.animate({fontSize:‘3em‘},"slow");13 ??????????????});14 ????????????});15 ????????</script>16 ????????17 ????</head>18 ????<body>19 ????????<button>开始动画</button>20 ????????<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 21 ????????如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>22 ????????<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>23 24 ????</body>25 </html> ?1 <!DOCTYPE html> ?2 <html> ?3 ????<head> ?4 ????????<meta charset="UTF-8"> ?5 ????????<title></title> ?6 ????????<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/> ?7 ??????????8 ????????<style type="text/css"> ?9 ????????????*{ 10 ????????????????margin: 0px; 11 ????????????????padding: 0px; 12 ????????????} 13 ?????????????14 ????????????#body{ 15 ????????????????width: 100%; 16 ????????????????height: 700px; 17 ????????????????max-width: 500px; 18 ????????????????margin: 0 auto; 19 ????????????????background-color: #FAE738; 20 ????????????????overflow: hidden; 21 ????????????} 22 ?????????????23 ????????????#tips{ 24 ????????????????margin-top: 40px; 25 ????????????????text-align: center; 26 ????????????????color: white; 27 ????????????????font-size: 36px; 28 ????????????????font-weight: bold; 29 ????????????} 30 ?????????????31 ????????????#imgs{ 32 ????????????????width: 90%; 33 ????????????????margin: 20px auto; 34 ????????????????display: flex; 35 ????????????????justify-content: space-around; 36 ????????????} 37 ?????????????38 ????????????#jieguo{ 39 ????????????????width: 90%; 40 ????????????????margin: 30px auto; 41 ????????????????display: flex; 42 ????????????????justify-content: space-around; 43 ????????????} 44 ?????????????45 ????????????#jieguo .jieguo div{ 46 ????????????????height: 30px; 47 ????????????????width: 89px; 48 ????????????????line-height: 30px; 49 ????????????????text-align: center; 50 ????????????????color: white; 51 ????????????} 52 ?????????????53 ????????????#jieguo .jieguo img{ 54 ????????????????height: 89px; 55 ????????????} 56 ?????????????57 ????????????#jieguo .pk{ 58 ????????????????height: 120px; 59 ????????????????line-height: 120px; 60 ????????????????font-size: 48px; 61 ????????????????font-weight: bold; 62 ????????????} 63 ?????????????64 ????????????#score,#scoreFen{ 65 ????????????????text-align: center; 66 ????????????????font-size: 24px; 67 ????????????????color: red; 68 ????????????????padding-top: 10px; 69 ????????????} 70 ?????????????71 ????????</style> 72 ????</head> 73 ????<body> 74 ????????<div id="body"> 75 ????????????<div id="tips"> 76 ????????????????请选择 77 ????????????</div> 78 ?????????????79 ????????????<div id="imgs"> 80 ????????????????<img src="img/jiandao.png" id="jiandao" /> 81 ????????????????<img src="img/shitou.png" id="shitou" /> 82 ????????????????<img src="img/bu.png" id="bu" /> 83 ????????????</div> 84 ?????????????85 ????????????<div id="jieguo"> 86 ????????????????<div class="jieguo"> 87 ????????????????????<div>您选择了</div> 88 ????????????????????<img src="img/daiding.png" id="myImg" /> 89 ????????????????</div> 90 ?????????????????91 ????????????????<div class="pk">PK</div> 92 ?????????????????93 ????????????????<div class="jieguo"> 94 ????????????????????<div>系统选择了</div> 95 ????????????????????<img src="img/daiding.png" id="computer" /> 96 ????????????????</div> 97 ????????????</div> 98 ?????????????99 ????????????<div id="score">100 ????????????????等待结果中....101 ????????????</div>102 ????????????103 ????????????<div id="scoreFen">104 ????????????????<span>00</span>：<span>00</span>105 ????????????</div>106 ????????</div>107 ????????108 ????????<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>109 ????????<script type="text/javascript">110 ????????????$("#imgs img").click(function(){111 ????????????//console.log($(this).attr("src")); ???//点击获取img的src112 ????????????var src1=$(this).attr("src");113 ????????????//console.log(src1);114 ????????????imgSrc(src1); ???//调用函数115 ????????});116 ????????var imgs=["img/jiandao.png","img/shitou.png","img/bu.png"];117 ????????function imgSrc(src1){118 ????????????$("#myImg").attr("src",src1);119 ????????????120 ????????????var id=setInterval(function(){121 ????????????????var num=parseInt(Math.random()*3);122 ????????????????console.log(num);123 ????????????????$("#computer").attr("src",imgs[num]);124 ????????????},20);125 ????????126 ????????????setTimeout(function(){127 ????????????????clearInterval(id);128 ????????????????129 ????????????????var my=imgs.indexOf(src1);130 ????????????????var com=imgs.indexOf($("#computer").attr("src"));131 ????????????????if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){132 ????????????????????$("#score").html("恭喜您赢了");133 ????????????????????var count=parseInt($("#scoreFen span:eq(0)").text())+1;//每赢一次分数加1134 ????????????????????count=count<10?"0"+count:count;135 ????????????????????$("#scoreFen span:eq(0)").text(count);//显示分数136 ????????????????}else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){137 ????????????????????$("#score").html("平局！再战一轮吧！");138 ????????????????}else{139 ????????????????????$("#score").html("哈哈你输啦！！！");140 ????????????????????var cf = parseInt($("#scoreFen span:eq(1)").text())+1;141 ????????????????????cf = cf<10 ? "0"+cf : cf;142 ????????????????????$("#scoreFen span:eq(1)").text(cf);143 ????????????????}144 ????????????????145 ????????????},500);146 ????????}147 ????????</script>148 ????</body>149 </html>
一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏
原文地址：http://www.cnblogs.com/lgc-17862800193/p/7583250.html