点击“隐藏”按钮，下方的图片隐藏，并且按钮上的文字由“隐藏”变为“显示”。再次点击，图片显示并且位子再次由“显示”变为“隐藏”
直接上代码：
<!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，则服务器无法得到数据。
查看更多name不可替代的用途
![[活动 3.30]MAUI 跨平台应用开发实战](https://img-blog.csdnimg.cn/img_convert/f9e82da6c56bf82536a19b68dc85e77b.gif)