web基础学习之路

第八周第四天笔记之jQuery知识点

2018-09-14  本文已影响0人  果木山

jQuery知识点

1 基础知识

2 jQuery选择器

3 jQuery选项卡制作实例

4 取值赋值合体

5 原生JS与jQuery

6 浏览器可视区域数据

7 jQuery中DOM操作

8 数据交互

9 动画运动

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>动画</title>
     <style>
         .wrap{
             width: 300px;
             margin: 20px auto;
         }
         .wrap button{
             width: 100%;
             height: 50px;
             line-height: 50px;
             background-color: lightseagreen;
             cursor: pointer;
         }
         .wrap div{
             width: 100%;
             height: 300px;
             background-color: red;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <button>点击动画</button>
     <div></div>
 </div>
 <script src="jquery/jquery.js"></script>
 <script>
     //1 原生JS的原理设置;
     var bOk=true;
     $(".wrap button").click(function () {
         if(bOk){
             $(".wrap div").slideDown(3000,function () {
                 alert(1)
             });
         }else{
             $(".wrap div").slideUp(2000,function () {
                 alert(1)
             });
         }
         bOk=!bOk;
     });
     //2 jQuery运动库设置
     $("button").click(function () {
         //1) 直接用slideToggle来实现滑下滑上
         $(".wrap div").slideToggle(3000,function () {
             alert(1)
         });
         //2 分别设置滑下滑上,可以在中间添加延迟时间;
         $(".wrap div").stop().slideDown(3000).delay(3000).slideUp(5000);
     })
 </script>
 </body>
 </html>

10 事件

11 插件

上一篇 下一篇

猜你喜欢

热点阅读