点击“隐藏”按钮，下方的图片隐藏，并且按钮上的文字由“隐藏”变为“显示”。再次点击，图片显示并且位子再次由“显示”变为“隐藏”
直接上代码：
<!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=" 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，则服务器无法得到数据。