jQuery效果總結

時間 2019-11-07

標籤 jquery 效果總結欄目 JQuery 简体版

原文原文鏈接

一、css

.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");html .animate({weight:'300px',opacity:'0.8'},"slow");jquery .animate({height:'100px',opacity:'0.4'},"slow");app .animate({weight:'100px',opacity:'0.8'},"slow");ide

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:ui

<!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
this

$(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;
		}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。