| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | 事件和动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #aa{ width: 200px; height: 200px; background-color: yellow; } p{ text-align: center; background-color: brown; } </style> <!-- 筛选 first() last() eq() filter() has() not--> <!-- 查找 children() parent() find() prevAll() nextAll() siblings() --> <!-- 二 文档处理 --> <!-- 插入 --> <!-- 修改 replaceWith--> <!-- 删除 empty() remove() --> <!-- 三 补充知识点 位置 position 父容器 offset 大容器 返回顶部$("body,html").scrollTop() --> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //一 加载事件 //1.dom加载的两种方法(区别) //js多个会被覆盖 /* window.οnlοad=function(){ console.info("js方式1"); } window.οnlοad=function(){ console.info("js方式2"); } window.οnlοad=function(){ console.info("js方式3"); } */ //jQuery可以写多个,并且都会被执行 /* $(function(){ console.info("jQuery方式1"); }) $(function(){ console.info("jQuery方式2"); }) $(function(){ console.info("jQuery方式3"); }) */ //1.2绑定事件两种方式 $(function(){ //--元素 .on/bind() /* $("#aa").on("click",function(){ alert("呵呵呵"); }) */ /* $("#aa").bind("mouseover",function(){ alert("睡不着") }) */ //--元素,事件名 /* $("aa").click(function(){ alert("干啥"); }) */ // 1.3合成事件/事件切换 /* $("#aa").hide();//隐藏 $("#aa").hover(function(){//鼠标上移事件 $("#aa").show();//显示 },function(){ $("#aa").hide();//隐藏 }) */ //1.3.2 鼠标点击事件,隐藏和显示 要注意版本[版本过高用不了] //以后版本替换成动画效果 /* $("#aa").hide();//隐藏 $("#aa").toggle(function(){//鼠标上移事件 $("#aa").show();//显示 },function(){ $("#aa").hide();//隐藏 }) */ //$("#aa").toggle(1000);//1s //1.4事件的传播 (事件冒泡 ) 小p->中div->大body //依次增加点击事件 /* $("p").click(function(){ close.info("p被点击了"); }) $("div").click(function(){ close.info("div被点击了"); return false;//阻止传播 }) $("body").click(function(){ close.info("body被点击了"); }) */ // 1.5 事件event的坐标 [了解即可 pageX,pageY] /* $("#aa").on("click"function(e){ console.info(e.pageX,e.pageY); }) */ //1.6 事件的移除 //按钮只能点击一次 /* $("#btn").click(function(){ console.info(44944);//做一系列的事 //将点击事件移除 $("#btn").unbind("onclick"); //将按钮禁用 $("#btn").prop("disabled",true); }) */ //只能点击一次 /* $("#btn").one("click",function(){ console.info(123); $("#btn").prop("disabled",true); }) */ //--按钮点击偶数可行 奇数不行 /* var i=1; $("#btn").click(function(){ if(i%2==0){ console.info("1234",i); } }) */ //二 动画 //2.1 基本动画 /* $("#aa").hide();//默认隐藏 $("#xx").click(function(){ $("#aa").show(1000,function(){ alert("来了老弟"); });//ls }) $("#yy").click(function(){ $("#aa").hide(2000);//ls }) $("#yyxx").click(function(){ $("#aa").toggle(1000);//ls }) */ //2.2 滑动动画 /* $("#aa").hide();//默认隐藏 $("#xx").click(function(){ $("#aa").slideDown(1000);//ls }) $("#yy").click(function(){ $("#aa").slideUp(2000);//2s }) $("#yyxx").click(function(){ $("#aa").slideToggle(1000);//ls }) */ //2.3 淡入 淡出(透明度) /* $("#aa").hide();//默认隐藏 $("#xx").click(function(){ $("#aa").fadeIn(1000);//ls }) $("#yy").click(function(){ $("#aa").fadeOut(2000);//2s }) $("#yyxx").click(function(){ $("#aa").fadeToggle(1000);//ls }) */ //2.4自定义动画 //--缩放 /* $("#zz").on("click",function(){ $("#aa").animate({ width:100, height:300 },1000); }) */ //--移动 $("#zz").click(function(){ $("#aa").animate({ left:+=5, top:+=10 },2000); }) }) </script> </head> <body> <input type="button" name="" id="btn" value="点我试试" /> <input type="button" name="" id="xx" value="显示(展开)(淡入)" /> <input type="button" name="" id="yy" value="隐藏(收回)(淡出)" /> <input type="button" name="" id="yyxx" value="显示/隐藏(展开和收缩)(淡入或者淡出)" /> <input type="button" name="" id="zz" value="变变变" /> <a style="text-decoration: none;" href="#">显示</a> <div id="aa"> <br /> <br /> <p>这是一巴掌</p> </div> </body> </html> |
884
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
