jquery项目实战_我做了一个开源项目,本着帮助他人的目的

6f17d04cf0c34920dad6b14c1a115162.png

不要努力成为一个成功的人,而要成为一个有价值的人。 —— 爱因斯坦

1.

每次全栈做项目的时候,往往前端最费时间,对于一个注重用户体验的人来说,一个按钮的颜色、大小或是布局,就要纠结好久。

犹记得,因为画不好一个首页,导致项目迟迟不想往下走的扎心,直到发现了 bootstrap …

前端的知识点并不复杂,但在样式这块总也学不好,并非不会写 CSS,而是做出来的东西,总是差点意思,渐渐也失去了信心,认为自己不是这块料,天生缺少艺术细胞。

好在,这是一个开源世界,你不擅长的东西,也许别人早就做好了。正是由于这些优秀插件的存在,才让我有精力,在保证基本视觉体验的前提下,更多时间去思考产品逻辑,快速开发迭代产品功能,让项目在最短时间内上线。

2.

为了回馈这些插件的帮助,同时,帮助更多的人,我发起了一个开源项目—— JS 前端插件文档库协作项目。计划整理并记录那些优秀的 JS 前端插件库,形成实战类文档,希望能帮助到更多的人。

单看文档库,可能有些枯燥无味,如果有在线演示就更直观了,于是,我就简单的做了在线演示 JS 插件在线演示[1]

有些插件的功能非常复杂,可调控的参数也多,文档介绍并不能面面俱到,如果能自己调试就好了,于是,我将源代码开源,并教你快速部署在本地,方便调试。代码仓库:JS 插件文档库示例代码 · GitHub[2],方便的话,点个 star 再走。

3.

截止目前为止,我已经整理了基于 jQuery & bootstrap 的若干插件,你说 jQuery 都已经过时,还整理干啥?技术有进步,会有淘汰,但是知识不会,知识永远是累积的,整理出来,总能对一些人产生帮助。对他人有帮助,就是价值。

该文档库起于 jQuery,但不止于 jQuery,后面将逐渐加入基于 Vue 的插件,逐渐去完善 JS 前端插件知识库。

但是,个人的力量毕竟有限,期待你的加入,一起维护该文档库,做出自己的一点贡献,哪怕就会一个也行。

文档放在了语雀 · 专业的云端知识库[3]上,在文档的编辑以及协作上,它有不错的用户体验,期待你加入。

以上~

References

[1] JS 插件在线演示: http://js.90byte.com/

[2] JS 插件文档库示例代码 · GitHub: https://github.com/pengloo53/js-plugin-example

[3] 语雀 · 专业的云端知识库: https://www.yuque.com/dashboard


扩展链接:文档库介绍

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,一个实用的 jQuery 项目是一个简单的待办事项列表。下面是一个简单的待办事项列表项目的示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>待办事项列表</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>待办事项列表</h1> <form> <input type="text" id="new-todo" placeholder="添加新的待办事项"> <button id="add-btn">添加</button> </form> <ul id="todo-list"> </ul> <button id="clear-btn">清空已完成的事项</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="app.js"></script> </body> </html> ``` CSS代码: ```css .completed { text-decoration: line-through; } ``` JavaScript代码: ```javascript $(document).ready(function() { var todoList = $('#todo-list'); var newTodo = $('#new-todo'); var addBtn = $('#add-btn'); var clearBtn = $('#clear-btn'); // 添加新的待办事项 addBtn.click(function() { var todoText = newTodo.val().trim(); if (todoText.length > 0) { var newTodoItem = $('<li>').text(todoText); newTodoItem.click(function() { $(this).toggleClass('completed'); }); todoList.append(newTodoItem); newTodo.val(''); } }); // 清空已完成的事项 clearBtn.click(function() { $('#todo-list .completed').remove(); }); }); ``` 这个项目中,我们创建了一个简单的待办事项列表,用户可以添加新的待办事项,标记已完成的事项,以及清空已完成的事项。我们使用了 jQuery 来获取 HTML 元素,处理用户输入,以及更新待办事项列表。 希望这个示例项目能够帮助你更好地学习和掌握 jQuery
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值