為了把JQuery搞熟悉，看著菜鳥教程，一個一個例子打，邊看邊記，算是一晚上的一個小總結吧。加油，我很本但是我很勤奮啊。系統的瞭解它，就要花時間咯。 ...
為了把JQuery搞熟悉，看著菜鳥教程，一個一個例子打，邊看邊記，算是一晚上的一個小總結吧。加油，我很本但是我很勤奮啊。系統的瞭解它，就要花時間咯。
<!DOCTYPE html> <html> <head> <title>JQuery常見效果</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // $(function(){ // $('p').click(function(){ // $(this).hide(); // }) // }) // 複雜一點的隱藏樣式 // $(function(){ // $('.hide').click(function(){ // $(this).parents('.ex').hide('slow'); // }) // }) // 註意.hide(speed,callback) .show(speed,callback) // speed規定顯示或隱藏的速度，可以取'slow','fast'或者 // 毫秒。 // slow和fast一定不要忘記引號。 // callback是顯示或隱藏完成後所執行的函數名稱。 // $(function(){ // $('#hide').click(function(){ // $('p').hide(); // }) // $('#show').click(function(){ // $('p').show(); // }) // }) // $(function(){ // $('#box').click(function(){ // $(this).hide(2000,function(){ // // 讓這個盒子在兩秒隱藏後顯示出來 // $(this).show(2000,function(){ // $(this).css('background-color','yellow'); // }); // }) // }) // }) // toggle(speed,callback),切換元素的可見狀態，用法和show // ，hide相同 // $(document).ready(function(){ // $('#box').click(function(){ // $('.p1').toggle(); // }) // }) // 接下來便是淡入淡出效果 // fadeIn(speed,callback);用於淡入已隱藏的元素 // $(function(){ // $('#fadein').click(function(){ // $('#box1').fadeIn(); // $('#box2').fadeIn('slow'); // $('#box3').fadeIn('4000',function(){ // $(this).css('background-color','yellow'); // }); // }) // }) // 相反fadeOut(speed,callback);用於淡出可見元素， // 用法和fadeIn(speed,callback)一致 // $().ready(function(){ // $('#fadein').click(function(){ // $('#box1').fadeOut(6000); // $('#box2').fadeOut(3000); // $('#box3').fadeOut(1000); // }) // }) // 接下來便是fadeToggle(speed,callback),同理切換元素的可見性 // 如果元素已淡入，則fadeToggle()會向元素添加淡出效果 // 如果元素已淡出，則fadeToggle()會向元素添加淡出效果 // $(document).ready(function(){ // $('#fadein').click(function(){ // $('#box1').fadeToggle(1000); // $('#box2').fadeToggle(3000); // $('#box3').fadeToggle(6000); // }) // }) // 接下來便是fadeTo(speed,opacity,callback); // 意思是准許漸變為給定的不透明度(必需要規定效果的時長，不然 //沒有效果，方法無效) $(function(){ $('#fadein').click(function(){ $('#box1').fadeTo(2000,0.5); $('#box2').fadeTo(2000,0.7); $('#box3').fadeTo(4000,0.2); }) }) </script> <style type="text/css"> /*.ex{ padding: 10px; background-color: red; border: 1px solid yellow; }*/ </style> </head> <body> <!-- 第一個簡單的隱藏效果 --> <!-- <p>第一次點擊</p> <p>第二次點擊</p> <p>第三次點擊</p> --> <!-- <h1>你好</h1> <div class="ex"> <button class="hide">點我隱藏</button> <p>安徽<br> 一個美麗的地方 </p> </div> <h2>Hellow</h2> <div class="ex"> <button class="hide">點我隱藏</button> <p>商貿<br> 8棟611寢室</p> </div> --> <!-- 定義一個段落，加上顯示和隱藏的按鈕 --> <!-- <p>點擊按鈕，切換效果</p> <button id="hide">隱藏</button> <button id="show">顯示</button> --> <!-- 下麵來寫一個可以用到hide(speed,callback) --> <!-- <div id="box" style="width: 200px;height: 400px;background-color: red;"> </div> --> <!-- <button id="box">隱藏/顯示</button> <p class="p1">這是一大段文本</p> --> <button id="fadein">開關</button> <div id="box1" style="display:block;width: 100px;height: 100px;background-color: red;"></div> <div id="box2" style="display:block;width: 100px;height: 100px;background-color: red;"></div> <div id="box3" style="display:block;width: 100px;height: 100px;background-color: red;"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>淡入淡出</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // fadeIn例子 // $(function(){ // $('#button').click(function(){ // $('#box1').fadeIn(1000); // $('#box2').fadeIn(2000); // $('#box3').fadeIn(4000); // }) // }) // fadeOut例子 // $(document).ready(function(){ // $('#button').click(function(){ // $('#box1').fadeOut(1000); // $('#box2').fadeOut(4000); // $('#box3').fadeOut(6000); // }) // }) // fadeToggle用法 // $().ready(function(){ // $('#button').click(function(){ // $('#box1').fadeToggle('slow'); // $('#box2').fadeToggle('fast'); // $('#box3').fadeToggle(); // }) // }) // fadeTo用法 $().ready(function(){ $('#button').click(function(){ $('#box1').fadeTo(4000,0.5); $('#box2').fadeTo(1000,0.5); $('#box3').fadeTo(8000,0.5); }) }) </script> </head> <body> <button id="button">點擊我</button> <div id="box1" style="display:none;width: 200px;height: 200px;background-color: red;"></div> <div id="box2" style="display:none;width: 200px;height: 200px;background-color: yellow;"></div> <div id="box3" style="display:none;width: 200px;height: 200px;background-color: blue;"></div> </body> </html>
