jQuery效果——隱藏和顯示、淡入淡出、滑動
jquery(javascript庫，極大簡化了javascript程式設計)
jquery選擇器
元素選擇器：
<html> <head> <meta charset="utf-8"/> <script src="jquery(1).js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).click(function(){ $("p").hide(); }); }); </script> </head> <body> <h1>標籤</h1> <p>i</p> <p>love</p> <p>you</p> <button onclick="click()">點我</button> </body> <html>
<html> <head> <meta charset="utf-8"/> <script src="jquery(1).js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h1>標籤</h1> <p>i</p> <p>love</p> <p>you</p> <button>點我</button> </body> <html>
css選擇器：
一個屬性：例如：$("p").css("background-color","red");
$("p").css("border","3px solid red");
多個屬性： $("p").css({background:'#ccc',color:'blue'});
jquery效果——隱藏和顯示（使用hide()、show()方法）
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").hide();
});
$(".tg").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<input></input>
<p>如果你點選隱藏按鈕，我將會消失了。</p>
<button class="wg">隱藏</button>
<button class="tg">顯示</button>
</body>
</html>
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的speed引數規定隱藏、顯示的速度，可以取以下值：“slow”、“fast”、或毫秒。
可選的callback引數是隱藏或顯示完成之後所執行的函式名稱。
例如，帶有speed引數的hide()方法
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<input></input>
<button class="wg">隱藏</button>
<p>如果你點選隱藏按鈕，我將會1000毫秒後消失了。</p>
</body>
</html>
使用toggle()方法來切換hide()和show()方法。
顯示被隱藏的元素，並隱藏已顯示的元素：
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<button class="wg">隱藏/顯示</button>
<p>我可以隱藏，也可以顯示。</p>
</body>
</html>語法：$(selector).toggle（speed,callback）;
可選的speed引數規定隱藏、顯示的速度，可以取以下值：“slow”、“fast”、或毫秒。
可選的callback引數是隱藏或顯示完成之後所執行的函式名稱。
可選的callback引數，具有以下三點說明：
1. $(selector)選中的元素的個數為n個，則callback函式會執行n次。
2.callback函式名後加括號，會立即執行函式體，而不是等到隱藏/顯示完成後才執行。
3.callback既可以是函式名，也可以是匿名函式。
jQuery效果——淡入淡出
jquery擁有下面四種fade方法：
1.fadeIn()方法 用於淡入已隱藏的元素。
語法：$(selector).fadeIn(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeIn("slow");
$(".div2").fadeIn();
$(".div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeIn()使用不同引數的效果。</p>
<button class="wg">點選淡入div元素</button>
<div class="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
注意：display:none;與display:block; 的區別。
2.fadeOut()方法：用於淡出可見元素。
$(selector).fadeOut(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeOut("slow");
$(".div2").fadeOut();
$(".div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeOut()使用不同引數的效果。</p>
<button class="wg">點選淡出div元素</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
3.fadeToggle()方法
可以在fadeIn()和fadeOut()方法間進行切換。
如果元素已淡出，則fadeToggle()會向元素新增淡入元素。
如果元素已淡入，則fadeToggle()會向元素新增淡出元素。
語法：$(selector).fadeToggle(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeToggle("slow");
$(".div2").fadeToggle();
$(".div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeToggle()使用不同speed引數的效果。</p>
<button class="wg">點選淡出或淡入</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
4.fadeTo()方法
允許漸變為給定的不透明都度（值介於0與1之間)
語法：$(selector).fadeTo(speed,opacity,callback);
opacity引數將淡入淡出效果設定為給定的不透明度（值介於0與1之間）
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeTo("slow",0.15);
$(".div2").fadeTo("slow",0.4);
$(".div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeTo()不同透明度的效果</p>
<button class="wg">點選我讓顏色變淡</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
jQuery效果——滑動
1.slideDown()方法 用於向下滑動元素
語法：$(selector).slideDown(speed,callback);
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">點我滑下面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>
2.slideUp()方法 用於向上滑動元素
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">點我拉起面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>
注意使用slideUp()和slideDown()的區別：display:none;
3.slide Toggle()方法
用於slideUp()和slideDown()方法之間進行切換。
如果元素向下滑動，則slideToggle()可向上滑動它們。
如果元素向上滑動，則slideToggle()可向下滑動它們。
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">點我拉起面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>