竞争无处不在,青春永不言败！专业*代码，副业修bug

Talk is cheap , show me the code!


jquery 实例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        window.onload=function(){
        $("#eachBtn").click(function(){
            $(".container>ul>li").each(function(){
                alert($(this).text());
            });
        });
        };
    </script>
</head>
<body>
    <div class="container">
     <ul>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
     </ul>
     <button id="eachBtn">点击each演示</button>
    </div>
</body>
</html>
each演示

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".clickDiv").click(function(){
                $(".dataDiv").toggle(900);
            });
        });
    </script>
    <style>
    div{
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
    }
    </style>
</head>
<body>
    <div class="clickDiv">
      点击这里，隐藏/显示面板
    </div>
    <div class="dataDiv">
      一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
    </div>
</body>
</html>
显示隐藏动画效果hide,show同理

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".clickDiv").click(function(){
                $(".dataDiv").toggle(900,function(){
                    alert("切换完成!");
                });
            });
        });
    </script>
    <style>
    div{
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
    }
    </style>
</head>
<body>
    <div class="clickDiv">
      点击这里，隐藏/显示面板
    </div>
    <div class="dataDiv">
      一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
    </div>
</body>
</html>
比上面多加一个执行完后的callback函数

 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
淡入淡出动画

 上下滑

$("#div1").slideDown();

 

<!DOCTYPE html>
<html>
<head>
<script src="./jquery-2.2.3.min.js"></script>
<script>
$(function(){
  for(i=0;i<=5;i++){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  };
});
</script>
</head>

<body>

<p id="p1">来抓我呀</p>

</body>
</html>
链式动画

 

<html>
 <head>
  <script src="./jquery-2.2.3.min.js"></script>
  <script>
      
      $(function(){
		  var testForm = $('#test-form');
		  var selectAll = testForm.find('label.selectAll>input:checkbox');
		  var selectAllLabel = testForm.find('label.selectAll span.selectAll');
		  var deselectAllLabel = testForm.find('label.selectAll span.deselectAll');
		  var invertSelect = testForm.find('a.invertSelect');
		  var langs = testForm.find('input[name=lang]');
	      selectAll.change(function(){
		     if(selectAll.prop('checked')){
				langs.prop('checked',true);
				selectAllLabel.hide();
				deselectAllLabel.show();
			 }else{
			    langs.prop('checked',false);
				deselectAllLabel.hide();
				selectAllLabel.show();
			 }
		  });
		  
		function isAllChecked(){
			return langs.filter(function(){
						return $(this).is(':checked');
						}).length === 5;
		  }
		// 手动选
		langs.change(function(){
			 if(isAllChecked()){
				selectAll.prop('checked',true);
				selectAllLabel.hide();
				deselectAllLabel.show();
			 }else{
				selectAll.prop('checked',false);
				selectAllLabel.show();
				deselectAllLabel.hide();
			 }
		  });
		// 反选
		invertSelect.click(function(){
		    langs.map(function(){
				$(this).prop('checked',!($(this).prop('checked')));
			});
			langs.change();
		});
	  });
	 
  </script>
 </head>
 <body>
<!-- HTML结构 -->
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>
 </body>
</html>

　　

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

Your attitude not your aptitude will determine your altitude!

如果有来生,一个人去远行,看不同的风景,感受生命的活力！