首页jquery制作网页代码

jquery制作网页代码

时间: 2023-11-29 11:04:36 浏览: 118

以下是一个简单的使用jQuery制作网页的例子： ```html <!DOCTYPE html> <html> <head> <title>jQuery网页制作示例</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style> body { background-color: #f2f2f2; } h1 { color: #333; text-align: center; } ul { list-style-type: none; margin: 0; padding: 0; } li { padding: 10px; margin-bottom: 5px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; } </style> </head> <body> <h1>我的待办事项</h1> <ul id="todo-list"> <li>学习jQuery</li> <li>写作业</li> <li>看电影</li> </ul> <script> // 添加待办事项 $('#todo-list').append('<li>做饭</li>'); // 删除待办事项 $('#todo-list li').eq(1).remove(); </script> </body> </html> ``` 这个例子中，我们使用了jQuery库来操作DOM元素，实现了添加和删除待办事项的功能。具体来说，我们首先在head标签中引入了jQuery库，然后在body标签中创建了一个待办事项列表，其中包含了三个待办事项。接着，我们使用jQuery的append()方法向列表中添加了一个新的待办事项“做饭”，并使用eq()方法和remove()方法删除了第二个待办事项“写作业”。最后，我们在script标签中编写了jQuery代码来实现这些功能。

阅读全文