源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

跟我一起学写jQuery插件开发方法(附完整实例及下载)

  • 时间:2020-05-08 07:33 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:跟我一起学写jQuery插件开发方法(附完整实例及下载)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好。而前端开发过程中,JavaScript技能又是必不可少的。所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧。这是我写的一个jQuery插件。”我想基本上你的人生大事就能很快解决。 [b]先想好做个什么功能[/b] 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些。不要想一口就吃个胖子,咱也吃不了。咱还是捡个瘦的下手吧。但是,这个功能也不能太无聊,如果无聊到几乎没用处,就算做好了也是扔到马桶里,不会持续更新,也便不会持续进步了。 我最终选择的是:美化表格,让表格的奇偶行颜色不同,然后鼠标移到某行上,某行可以高亮显示。功能简单又实用,不错,不错。呵呵~~ [b]不急着写,先想想实现原理[/b] 还不急,先想想实现原理。必要的时候,先写出简单的实现的原型。 我的这个美化表格的例子,实现原理倒是简单,无非就是找到表格的奇偶行,然后添加不同的class,活动行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再去掉这个class即可。 [b]一个通用的框架[/b] 在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。
[url=http://api.jquery.com/jQuery.extend/]http://api.jquery.com/jQuery.extend/[/url] 开始下半身吧 ok,上半身填补完了,咱就可以填补下半身吧。无非就是找到基数行和偶数行(感谢jQuery提供了类似tr:even这种写法,使其及其简单),然后添加上相应的class。然后再给所有的tr,绑定mouseover和mouseout事件即可。下半身代码如下:
[url=http://demo.jb51.net/js/tableUI/index.html]演示地址[/url] [url=http://xiazai.jb51.net/201004/yuanma/tableUI.rar]实例下载地址[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部