點擊“隱藏”按鈕，下方的圖片隱藏，並且按鈕上的文字由“隱藏”變為“顯示”。再次點擊，圖片顯示並且位子再次由“顯示”變為“隱藏”
直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點擊后字體圖片發生改變</title> </head> <body> <form name="form"> <input id="btn" name="btn" type="button" value="隱藏" onclick="buhao()"> </form> <img id="img" src="美女.jpg" style="width: 25%;"> <script rel="stylesheet" type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function buhao() { if(document.form.btn.value=="隱藏"){ document.form.btn.value = "顯示"; $("#img").fadeOut(1000); console.log("顯示"); }else { document.form.btn.value = "隱藏"; $("#img").fadeIn(1000); console.log("隱藏"); } }; </script> </body> </html>
效果截圖：
----------------------------------------分割線--------------------------------------
在表單form中，我一開始用的是id屬性，而不是name屬性，卻怎么也得不到結果，一開始我還納悶，最后發現form表單是用name發送request的，而不是id。
這說明id和name還是有很多區別的。
通常name和id的解釋：ID就像是一個人的身份證號碼，而Name就像是他的名字，ID顯然是唯一的，而Name是可以重復的
這句話是沒錯，但是很操蛋的就是，這句話給我帶來一個誤解：id是可以替代name的
但是：name有很多用途不是id能夠替代的
首先，表單form在提交數據時用的就是name，而不是id。因為在表單form中可能會對應多個控件（如：radio、CheckBox），而id必須保持唯一，所以必須用name。另外，瀏覽器會根據name來設定發送到服務器的request，如果用id，則服務器無法得到數據。