jQuery效果总结

1、

.html .js
<div  class="aa"></div> $(".aa").
<div  id="aa"></div> $("#aa").
jQuery 隐藏/显示  .hide()   .show()    .toggle()
jQuery 淡入淡出    .fadeIn()   .fadeOut()   .fadeToggle()
jQuery 滑动  .slideDown()  .slideUp()     .slideToggle()
jQuery 动画  
多个属性 .animate({left:'250',opacity:'0.5',height:'150px'});  
相对  .animate({left:'250px',height:'+=150px'});
使用预定义 .animate({height:'toggle'});
队列功能

  .animate({height:'300px',opacity:'0.4'},"slow");

 .animate({weight:'300px',opacity:'0.8'},"slow");

 .animate({height:'100px',opacity:'0.4'},"slow");

 .animate({weight:'100px',opacity:'0.8'},"slow");

jQuery stop()    .stop   
jQuery  Callback

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

jQuery  Chaining  $("#p1").css("color","red").slideUp(2000).slideDown(2000);

.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   
	<script src="jquery-2.1.4.min.js"></script>
	<script src="app.js"></script>
	<link rel=stylesheet href="app.css" type="text/css">
  </head>
  
  <body>
   	<h1>Hello</h1>
   	<p>Hello</p>
   	<a>Hello</a>
   	<p>Hello</p>
   	<button id="show" type="button">显示</button>
   	<button id="hidden" type="button">隐藏</button>
   	<button id="toggle" type="button">切换</button><br>
   <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>
   	<button id="fadeIn" type="button">点这里,三个正方形可以渐入</button>
   	<button id="fadeOut" type="button">点这里,三个正方形可以渐出</button>
   	<button id="fadeToggle" type="button">点这里,三个正方形渐入渐出切换</button>
   	<button id="fadeTo" type="button">渐出至一定的透明度</button><br/>
   	<div class="div4">
   			好好学习,<br>
   			天天向上。<br>
   	</div>
   	<p class="div5">
   			点击这里,div4滑出。
   	</p>
   	<p class="div6">
   			点击这里,div4滑入。
   	</p>
   	<p class="div7">
   			点击这里,div4滑出滑入。
   	</p>
   	<button id="animate1" type="button">开始动画</button><br><br>
   	<div class="div8" style="background:#98bf21;height:80px;width:500px;position:relative;">
   		默认地,所有 HTML 元素都有一个静态位置,且无法移动。<br>
		如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!<br>
   	</div>
   	
   	<button id="animate2" type="button">animate操作多个动画属性</button><br><br>
   	<button id="animate3" type="button">animate相对动画属性</button><br><br>
   	<button id="animate4" type="button">animate使用预定义的值</button><br><br>
   	<button id="animate5" type="button">animate队列功能</button><br><br>
   	<br><br><br><br><br><br>
   <button id="animate6" type="button">animate队列功能   增加文字的字号</button><br><br>
   	<div class="div9" style="background:#98bf21;height:100px;width:200px;position:absolute;">
   		jQuery
   	</div>
   	<br><br><br><br><br><br><br>
   	<button id="stop" type="button">停止滑动</button>
   	<div class="div10">
   		div10        点这里,向下滑动
   	</div>
   	<div class="div11">
   		div11      hello world!
   	</div>
   	<button id="callback" type="button">callback</button>
   	<div class="div12">
   		div12      callback
   	</div>
   	
   	<div class="div13">
   		div13      chaining
   	</div> 
   	<button id="chaining" type="button">chaining</button> 
   	
  </body>
</html>

      .js             后面一个是  .css

$(document).ready(function(){
	
	alert("文档加载完毕");
	
//	$("button").click(function(){
//		$("p").css("background-color","red");
//		$("a").hide();
//	});
	
	$("#hidden").click(function(){
		$("p").hide(1000);
	});
	$("#show").click(function(){
		$("p").show(2000);
	});
	$("#toggle").click(function(){
		$("p").toggle(3000);
	});
	$("#fadeIn").click(function(){
		$("#div1").fadeIn();
		$("#div2").fadeIn(2000);
		$("#div3").fadeIn(5000);
	});
	$("#fadeOut").click(function(){
		$("#div1").fadeOut(5000);
		$("#div2").fadeOut(2000);
		$("#div3").fadeOut();
	});
	$("#fadeToggle").click(function(){
		$("#div1").fadeToggle(5000);
		$("#div2").fadeToggle(2000);
		$("#div3").fadeToggle();
	});
	$("#fadeTo").click(function(){
		$("#div1").fadeTo("slow",0.15);
		$("#div2").fadeTo("slow",0.4);
		$("#div3").fadeTo("slow",0.7);
	});
	$(".div5").click(function(){
		$(".div4").slideUp("slow");
	});
	$(".div6").click(function(){
		$(".div4").slideDown("slow");
	});
	$(".div7").click(function(){
		$(".div4").slideToggle();
	});
	$("#animate1").click(function(){
		$(".div8").animate({left:'600px'});
	});
	$("#animate2").click(function(){
		$(".div8").animate({
			left:'250px',
			opacity:'0.5',
			height:'150px',
			width:'150px',
		});
	});
	$("#animate3").click(function(){
		$(".div8").animate({
			left:'250px',
			height:'+=150px',
			width:'+=150px',
		});
	});
	$("#animate4").click(function(){
		$(".div8").animate({
			height:'toggle'
		});
	});
	$("#animate5").click(function(){
		$(".div8").animate({height:'300px',opacity:'0.4'},"slow");
		$(".div8").animate({width:'1000px',opacity:'0.8'},"slow");
		$(".div8").animate({height:'100px',opacity:'0.4'},"slow");
		$(".div8").animate({width:'500px',opacity:'0.8'},"slow");
	});
	$("#animate6").click(function(){
		$(".div9").animate({left:'200px'},"slow");
		$(".div9").animate({fontSize:'3em'},"slow");
	});
	$(".div10").click(function(){
		$(".div11").slideToggle(10000);
	});
	$("#stop").click(function(){
		$(".div11").stop();
	});
	$("#callback").click(function(){
		$(".div12").hide(1000,function(){
			alert("The paragraph is now hidden");
		});
	});
	$("#chaining").click(function(){
		$(".div13").css("color","red").slideUp(2000).slideDown(2000);
	});
	$(selector).click(function(){
		$(this).hide();
		
	});//	触发或将函数绑定到被选元素的点击事件


	$(selector).dblclick(function(){
		
	});	//触发或将函数绑定到被选元素的双击事件


	$(selector).focus(function(){
		
	});	//触发或将函数绑定到被选元素的获得焦点事件


	$(selector).mouseover(function(){
		
	});	//触发或将函数绑定到被选元素的鼠标悬停事件
});//	将函数绑定到文档的就绪事件(当文档完成加载时)

div.div4,p.div5,p.div6,p.div7,div.div10,div.div12{
			margin:0px;
			padding:5px;
			text-align:center;
			background:#e5eecc;
			border:solid 1px #c3c3c3;
		}
		div.div4{
			height:120px;
		}
		div.div11{
			padding:50px;
			background:#e5eecc;
			border:solid 1px #c3c3c3;
			display:none;
		}

 



你可能感兴趣的:(jQuery效果总结)