前端小练习

$(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;width: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;
    width:100px;
    position:absolute;
}

.divHeight{
   height:300px;
   opacity:0.4
}

.divWidth{
   width:300px;
   opacity:0.4
}

.divShortWidth{
   width: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({ width:'400px',opacity:'0.8'},"slow");
        div.animate({ width:'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({ width:'400px',opacity:'0.8'},"slow");
    }
    function collapseDiv(){
        div.animate({ width:'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:\Users\FrankLi\Desktop\test\背景图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 效果

posted @ 2018-05-14 11:25 云雾散人阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

云雾散人

拓宽技术栈，深入技术栈，永远学徒空杯心态

前端小练习

公告