首页创建一个HTML页面，使用<script>标记直接引入jQuery文件；插入一个img，显示指定路径的图片；定义3个button；使用jQuery分别获取这3个button，并通过事件方法绑定click()事件，实现单击第1个button以1000毫秒速度显示img图片, 单击第2个button以1000毫秒速度隐藏img图片, 单击第3个button以1000毫秒速度显示或隐藏img图片。

创建一个HTML页面，使用<script>标记直接引入jQuery文件；插入一个img，显示指定路径的图片；定义3个button；使用jQuery分别获取这3个button，并通过事件方法绑定click()事件，实现单击第1个button以1000毫秒速度显示img图片, 单击第2个button以1000毫秒速度隐藏img图片, 单击第3个button以1000毫秒速度显示或隐藏img图片。

时间: 2024-02-26 20:58:05 浏览: 61

使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

我们介绍了一款HTML5文件上传的jQuery插件：jQueryHTML5 uploader，今天我们将开发一个简单的叫uploadcenter的图片上传程序，允许用户使用拖拽方式来上传电脑上的图片，使用现在浏览器支持新的HTML5 API。图片将会有一个预览和进度条，都由客户端控制。目前，图片都保存在服务器上的一个目录里，当然你可以自己加强相关功能。使用HTML5上传文件其实综合使用了3种技术，新的FileReader

好的，以下是你要求的HTML页面代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery练习</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { var img = $("img"); var btn1 = $("button:eq(0)"); var btn2 = $("button:eq(1)"); var btn3 = $("button:eq(2)"); btn1.click(function() { img.show(1000); }); btn2.click(function() { img.hide(1000); }); btn3.click(function() { img.toggle(1000); }); }); </script> </head> <body> <img src="path/to/image.jpg"> <button>显示图片</button> <button>隐藏图片</button> <button>显示/隐藏图片</button> </body> </html> ``` 解释一下代码： - 第2行直接引入了jQuery文件； - 第10行到15行使用了jQuery的$()函数来获取img元素和3个button元素； - 第17到23行分别绑定了3个button的click事件，并使用了jQuery的show()、hide()和toggle()方法来控制img元素的显示和隐藏，这些方法的第一个参数是动画的时间，单位是毫秒。希望这个示例能对你有所帮助。

阅读全文