<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點我就會消失測試</title> <script src="js/jquery-1.4.2.js"></script> <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 谷歌的jquery的地址 --> <!-- <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> Microsoft的jquery的地址。 --> <script> //jQuery 是一個“寫的更少，但做的更多”的輕量級 JavaScript 庫。 $(document).ready(//讀取全局的變化函數 function(){//函數入口 $("p").click(function(){//如果p發生了點擊事件，進入點擊事件函數的入口 $(this).hide();//對這個點擊事件的文本進行隱藏 }); //下面是如果點擊button按鈕實現隱藏的函數 $("button").click(function(){ $("p").hide();//通過點擊按鈕一次性的隱藏所有的<p>的標簽文檔。 }); //下面是一個通過id的標識，然后點擊按鈕實現按鈕的消失 $("#btn").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p style="color: red; size: a5;">點我就會消失</p> <p style="color: yellow; size: a3;">點我也會消失</p> <p style="color: red; size: a5;">點我就會消失</p> <p style="color: yellow; size: a3;">點我也會消失</p> <button type="button">Click me</button> <button type="button" id="btn">點我實現這個按鈕的消失</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通過點擊按鈕讓clss類選擇器的內容消失</title> <script src="js/jquery-1.4.2.js"></script> <script> //jQuery 是一個“寫的更少，但做的更多”的輕量級 JavaScript 庫。 /* * $(this).hide() - 隱藏當前元素 * $("p").hide() - 隱藏所有段落 * $(".test").hide() - 隱藏所有 class="test" 的所有元素 * $("#test").hide() - 隱藏所有 id="test" 的元素 * * * jQuery 使用 CSS 選擇器來選取 HTML 元素。 * $("p") 選取 <p> 元素。 * $("p.intro") 選取所有 class="intro" 的 <p> 元素。 * $("p#demo") 選取所有 id="demo" 的 <p> 元素。 * * * jQuery 函數位於一個 document ready 函數中 * $(document).ready(function(){ * --- jQuery functions go here ---- * }); */ $(document).ready(function(){ $("#btn").click(function(){ $(".test").hide();//讓class=test的內容消失 }); //jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。 //下面的例子把所有 p 元素id=change的背景顏色更改為紅色 $("button#btn1").click(function(){ $("p#change").css("background-color","red");//對<p> id=change的段落css $("button#btn1").css("background-color","aqua");//.... }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button" id="btn">Click me</button><br /> <!--改變顏色的實驗--> <p id="change">這塊的顏色會變成紅色</p> <button id="btn1">點擊我對上面的顏色進行改變</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隱藏和顯示</title> <script src="../js/jquery-1.4.2.js"></script> <script> /* * $(selector).hide(speed,callback); * $(selector).show(speed,callback); * * 可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。 * 可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。 */ $(document).ready(function(){ $("#hide").click(function(){ $("#p1").hide(1000);//1000ms }); $("#show").click(function(){ $("#p1").show(1000);//1000ms }); }); </script> </head> <body> <p id="p1">如果點擊“隱藏”按鈕，我就會消失。</p> <button id="hide" type="button">隱藏</button> <button id="show" type="button">顯示</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>toggle的切換功能</title> <script src="../js/jquery-1.4.2.js"></script> <script> //jQuery toggle() /* * 通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。 * 顯示被隱藏的元素，並隱藏已顯示的元素： */ $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); }); </script> </head> <body> <button type="button">切換</button> <p>這是一個段落。</p> <p>這是另一個段落。</p> </body> </html>