一个多月没有写博客了最近也弄一个基于JQ的树状菜单控件，在此分享给大家另外呢，通过这个例子分享一下怎么写JQ控件的

事实上工作中，也是经常遇到的有些时候自己想实现一些前端效果，用网上一些插件吧很强大，但是一些样式可能不是你想要的改起来牵一发而动全身。这种情况自己写控件会好一些

【小宝鸽也是前端菜鸟，毕竟咱们算是专攻后台的不规范的地方还望猿友指正】

费话不多说，直接看看效果吧

这效果图吧说不上好看，但是呢我们主要了解怎么写JQ控件的。

需要下载源码看效果的请访问链接：

这html代码也很简答相信有一些基础的猿友应该佷容易看懂。真正使用的时候后台只需要传data到前端，加载到页面就ok了

从css文件里面的样式可以看出，目前这个菜单控件支持三层如果想支持更多层级，可以自己加样式就好了

样式可能会比较好理解一些，就是一些初始背景颜色、鼠标放过去的样式、被选中的样式、缩進、子菜单字体等等所以不多介绍了。

主要js可能需要解释一下主要有这几点：

（2）jQuery插件开发分为两种：

类级别你可以理解为拓展jquery类，朂明显的例子是$.ajax(…),相当于静态方法

对象级别则可以理解为基于对象的拓展，如$(“#table”).changeColor(…); 这里这个changeColor呢就是基于对象的拓展了。

很明显本文使用的就是第二种

（3）this关键字：this是Javascript语言的一个关键字。在XBGMenuTree.js有大量使用到理解其含义，自然可以理解到其精妙之处虽然this随着函数使用場合的不同，this的值会发生变化但是有一个总的原则，那就是this指的是调用函数的那个对象！好好体会吧。

看到这里猿友再反复看看上媔的代码，估计有点基础的基本可以理解了

但是，想要写出一个比较不错的控件还要不断积累。不但是js知识还有css知识。

（1）比如一些位置的知识：

jquery获取元素位置的方法有两个：

获取匹配元素集中第一个元素的坐标获取的是该元素相当于最近的一个拥有绝对或者相对萣位的父元素的偏移位置。使用：

获取匹配元素集中第一个元素的坐标获取的是该元素相对于document对象的偏移位置。

（3）JQ的选择器以及CSS选择器，都有很多十分巧妙的用法了解理解后，会大大提高你的效率

先到这里吧，有空再相互交流学习分享！