• 前端小练习


    $(this).hide();
    $(this).css("display","none");

    等价

    方法一:
    $('#id').css('display','none');
    $('#id').css('display','block');
    方法二:
    $('#id').hide();
    $('#id').show();
     
    区别于 bind()

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    // 事件处理函数的第一个参数是一个事件对象 $('#foo').click(function(event){ event.stopPropagation(); // do sth. });

    阻止表单提交   e.preventDefault();

    替换没找到的图片,真 tn 的聪明

    $("img").error(function(){
    $(this).replaceWith("<p><b>图片未加载成功!</b></p>");
    });

    $.each($("p"),function(){
               alert($(this).text());
           })
        
           $("p").each(function(){
               alert($(this).text());
           })
    遍历
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <title>Title</title>
        <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
        <script type="text/javascript">
          $(function(){
           $("input").blur(function(e){
                    alert("blur");
                  });
                  
                  $("input:text").focus(function(){
                    alert("focus");
                  });
          });
          
          
        </script>
    </head>
    <body>
    <input type="text" placeholder="占位符" focus=false/>
      <div class="Container" style="height:800px;50%;background-color:red;opacity:0.8;"><div class="subContainer"></div></div>   
      
      <div class="SecondContainer"></div>
    </body>
    </html>
    事件
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("form").submit(function(e){
        e.preventDefault();
        alert("Submit was prevented!");
      });
      $("button").click(function(){
        $("form").submit();
      });  
    });
    </script>
    </head>
    <body>
    <form name="input" action="" method="get">
    First name: 
    <input type="text" name="FirstName" value="Mickey" size="20">
    <br />Last name: 
    <input type="text" name="LastName" value="Mouse" size="20">
    <br />
    <input type="submit" value="Submit">
    </form> 
    <button>触发表单域的 submit 事件</button>
    </body>
    </html>
    阻止表单提交
    <!DOCTYPE html>
    <html>
    <head>
    <title>动画</title>
    <meta charset="utf-8"/>
    
    <style>
    div{
        background:#98bf21;
        height:100px;
        100px;
        position:absolute;
    }
    
    .divHeight{
       height:300px;
       opacity:0.4
    }
    
    .divWidth{
       300px;
       opacity:0.4
    }
    
    .divShortWidth{
       300px;
       opacity:0.8
    }
    
    .divShortHeight{
       height:100px;
       opacity:0.8
    }
    
    
    </style>
    
    <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
    
    <script type="text/javascript">
     $(function(){
        function show(){
            $("div").addClass("divHeight");
            $("div").addClass("divWidth");
            $("div").addClass("divShortWidth");
            $("div").addClass("divShortHeight");
        }
        setInterval(show,3000);    
     });
    </script>
    
    </head>
    
    <body>
      <div></div>
    </body></html>
    动画
    <!DOCTYPE html>
    <html>
    <head>
    <title>动画</title>
    <meta charset="utf-8"/>
    
    <style>
    
    
    
    </style>
    
    <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
    
    <script type="text/javascript">
     $(function(){
        var div=$("div");
        function show(){
            div.animate({ height:'373px',opacity:'0.4'},"slow");
            div.animate({ '400px',opacity:'0.8'},"slow");
            div.animate({ '50px',opacity:'0.8'},"slow");
            div.animate({ height:'50px',opacity:'0.4'},"slow");
        }
        //setInterval(show,300);    
        
        function extendDiv(){
            div.animate({ height:'373px',opacity:'0.4'},"slow");
            div.animate({ '400px',opacity:'0.8'},"slow");
        }
        function collapseDiv(){
            div.animate({ '50px',opacity:'0.8'},"slow");
            div.animate({ height:'50px',opacity:'0.4'},"slow");
        }
        div.mouseover(extendDiv);
        div.mouseout(collapseDiv);
     });
    </script>
    
    </head>
    
    <body>
      <div><img src="C:UsersFrankLiDesktop	est背景图16.jpg"/></div>
    </body></html>
    动画2
    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".ex .hide").click(function(){
        $(this).parents(".ex").toggle("slow");
      });
      $("h3").click(function(){
        $(this).next(".ex").show("slow");
    });
    });
    </script>
    <style type="text/css"> 
    div.ex
    {
    background-color:#e5eecc;
    padding:7px;
    border:solid 1px #c3c3c3;
    }
    </style>
    </head>
     
    <body>
    
    <h3>中国办事处</h3>
    <div class="ex">
    <button class="hide" type="button">隐藏</button>
    <p>联系人:张先生<br /> 
    北三环中路 100 号<br />
    北京</p>
    </div>
    
    <h3>美国办事处</h3>
    <div class="ex">
    <button class="hide" type="button">隐藏</button>
    <p>联系人:David<br /> 
    第五大街 200 号<br />
    纽约</p>
    </div>
    
    </body>
    </html>
    Slide 效果
    如果有来生,一个人去远行,看不同的风景,感受生命的活力。。。
  • 相关阅读:
    uni-app拒绝授权后再次授权
    vue触底操作
    vue滚动条滚到到底部触发的方法
    pagination插件使用例子
    修改后台返回数据的字段
    v-cloak指令的作用
    修改checkbox样式
    获取selected的值
    前端工程师必备的几个实用网站
    html发展史简介(摘抄)
  • 原文地址:https://www.cnblogs.com/Frank99/p/9035218.html
Copyright © 2020-2023  润新知