【无标题】jQuery

最新推荐文章于 2024-09-30 10:36:33 发布

祈茒

最新推荐文章于 2024-09-30 10:36:33 发布

阅读量761

点赞数

分类专栏： jQuery 文章标签： java

本文链接：https://blog.csdn.net/T279zhengyiming/article/details/123694326

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           #aa {
               width: 200px;
               height: 200px;
               background-color: aqua;
               position: absolute;
               top: 50px;
               left: 50px;
           }

           p {
               text-align: center;
               background-color: brown;
           }
       </style>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           //1.1加载DOM两种方式（区别）
           window.onload = function() {
               console.info("js方式");
           }

               // 1.3合成事件/事件切换(悬停)
               ---hover()悬停控制元素[div]的显示和影藏
               $("#aa").hide();
               $("#aa").hover(function(){
                   $("#aa").show();//显示
                   },function(){
                       $("#aa").hide();//隐藏
               })

$("#aa").toggle(1000);//1s

//---toggle()点击控制元素[div]的显示和隐藏

               // 1.4事件的传播(事件冒泡)   小p->中div->大body
               // 依次增加点击事件
               $("p").click(function(){
                   console.info("p被点击了");
               })
               $("div").click(function(){
                   console.info("div被点击了");
                   return false;
               })
               $("").click(function(){
                   console.info("body被点击了");
               })
               1.5事件event的坐标[pagex,pagey]
               $("#aa").on("click",function(e){
                   console.info(e.pagex,e.pageY);
               })

               // 1.6事件的移除
               按钮只能点击一次[2]
               $("#btn").click(function(){
                   console.info(44944);
                   //将该点击事件移除
                   $("#btn").unbind("click");
                   $("#btn").prop("disabled",true);
               })
               // 一次事件
               $("#btn").one("click",function(){
                   console.info(44944);
                   //将按钮禁用
               $("#btn").prop("disabled",true);
               })
               // 按钮点击偶数次可行奇数次不行
               var i=1;
               $("#btn").click(function(){
                   if(i%2==0){
                       console.info(44944,i);
                   }
                   i++;
               })

               // 2.1基本动画[回调函数]
               $("#aa").hide();
               $("#xx").click(function(){
                   $("#aa").slideDown(1000);
                   })
               })
               $("#yy").click(function(){
                   $("#aa").slideUp(2000);
               })
               $("#zz").click(function(){
                   $("#aa").slideToggle(1000);
               })
               // 2.2滑动动画
               $("#aa").hide();
               $("#xx").click(function() {
                   $("#aa").slideDown(1000);
               })
           })
           $("#yy").click(function() {
               $("#aa").slideUp(2000);
           })
           $("#zz").click(function() {
               $("#aa").slideToggle(1000);
           })

           //2.3淡入淡出(透明度)
           $("#aa").hide();
           $("#xx").click(function() {
           $("#aa").fadeIn(1000);
           })
           })
           $("#yy").click(function() {
               $("#aa").fadeOut(2000);
           })
           $("#zz").click(function() {
           $("#aa").dadeToggle(1000);
           })

           //2.4自定义动画
           //缩放
           $("#bb").on("click",function(){
               $("#aa").animate({
                   width:100px,
                   height:300px;

               },1000);
           }）
           //移动
           $("#bb").click(function(){
               $("aa").animate({
                   left:100,
                   top:100
               },2000)
           })

           //在自身基础上移动
           $("#bb").click(function(){
               $("aa").animate({
                   left:"+=5",
                   top:"+=10""
               },2000)
           })

           })



       </script>

</head>
<body>

       <a style="text-decoration: none;" href="#">显示</a>
       <input type="button" id=btn" value="点我试试" />
       <button id="xx">显示(展开)(淡入)</button>
       <button id="yy">影藏(收缩)(淡出)</button>
       <button id="zz">显示/隐藏(展开&收缩)(淡入&淡出)</button>
       <button id="ss">变变变</button>
       <div id="aa">
           <br />
           <br />
           <p>这是一巴掌</p>
       </div>
   </body>
</html>