JQuery笔记(三) jquery的用途

  近期jquery的学习经历了一些反复:开始时觉得非常强大,比js好用,和css关系密切,一句话:完美。等到把《锋利的JQuery》看完,又有点不知道用它来干嘛了。Ajax功能强大,但我并不需要每个项目都用到;选择器方便、事件处理方便,但我似乎并没有那么多的客户端逻辑需要写。渐渐的,开始怀疑这个东西是不是又是一个看上去很美,实际上用不到的东西。

  不过,最近我算找到了我能够用到JQuery的地方:界面控制。我一直想找到一种比较适合自己的B/S的界面控制方式,要求是简单和灵活。看了很多博客的自定义界面的方法后,我对那种通过写描述串的方式印象深刻,于是进行了模仿,基本实现了一套模板和页面替换机制,几经改进,但用起来感觉还是比较麻烦。问题是,不够直观,期望达到的“所有工作在描述串中完成”的目标一遇到具体问题,就不得不从前改到后。而且,数据和界面仍然无法彻底分开,数据获取时,要考虑到界面的表现,要定义适当的样式。界面模板也充满了复杂的css。

  而jquery却可以实现这样的效果:所有的数据获取功能在服务器端完成,而界面控制,放到js代码中,在客户端去实现,即使界面控制失败了,重要的数据仍然可以看到。JQuery的优势(和css关系密切,强大的控制功能)恰好可以胜任。

  今天尝试了一下最常用的一个东西:折叠菜单。实现了以下功能:

  1. 数据是纯粹的DIV,UL结构,没有任何的特定的东西,如:特定的命名方式、内嵌的处理代码等。
  2. 实现了最多三级的菜单折叠(给定的数据有几级就显示几级)
  3. 自动查找图标。按照菜单的位置编码自动查找图标,找到就显示。一级菜单的图标形如tb0.jpg,tb1.jpg…;二级的形如tb00.jpg,tb01.jpg…
  4. 展开菜单后则自动将同级的其他菜单折叠,节省空间
  5. 自定义图标大小,缩进距离,三级菜单字体大小等
  6. 初始化时展开指定的菜单
<ul id="zdcd" style="display:none">
   <li>
      <a href="#">菜单功能1</a>
      <ul>
        <li><a href ="#">子菜单功能1</a></li>
        <li><a href ="#">子菜单功能2</a></li>
        <li><a href ="#">子菜单功能3</a></li>             
      </ul>
   </li>
   <li>
      <a href="#">菜单功能1</a>
      <ul>
        <li><a href ="#">子菜单功能1</a>
            <ul>
                <li><a href ="#">子菜单功能11</a></li>
                <li><a href ="#">子菜单功能21</a></li>
                <li><a href ="#">子菜单功能31</a></li>             
            </ul>
        </li>
        <li><a href ="#">子菜单功能2</a></li>
        <li><a href ="#">子菜单功能3</a></li>             
      </ul>
   </li>
   <li>
      <a href="#">菜单功能1</a>
      <ul>
        <li><a href ="#">子菜单功能1</a></li>
        <li><a href ="#">子菜单功能2</a></li>
        <li><a href ="#">子菜单功能3</a></li>             
      </ul>
   </li>
</ul>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

微信小程序中的form表单数据如何获取

知晓程序员,专注微信小程序开发的程序员! 前言:微信小程序中,form表单提交是比较常见的,今天来说一下form表单提交时,该如何获取表单项的数据。 知识点:...

92060
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

1.1K20
来自专栏DeveWork

WordPress 添加个性化的博客宠物(妹纸篇)

某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

28350
来自专栏别先生

Intellij Idea中Backspace无法使用,Ctrl+c/Ctrl+d等等快捷键无法使用的问题的解决

1:作为一个强迫症的我使用习惯了Eclipse,可能是对快捷键的依赖性,都说Idea是开发Java的最好工具,下载,安装等等(过程省略,百度很多方法),这里说一...

37460
来自专栏腾讯AlloyTeam的专栏

Node 直出理论与实践总结

直出是什么?到底是怎样的性能优化?本文将结合从在浏览器输入url,到展示最终页面的过程来对其进行一步步分析,并将在手Q web 中的实际应用实践进行总结。

86100
来自专栏无原型不设计

【Mockplus教程】收藏和重用

1. 制作模板 选择需要制作为模板的页面,鼠标右击,弹出的菜单中选择“加入到模板收藏”,然后选择相应 的模板库,如果没有模板库会提示新建一个。 加入成功...

27340
来自专栏IT技术精选文摘

有货移动Web端性能优化探索实践

在移动互联网的时代里,对于一个web站点来说,移动端的用户体验尤为重要。现代web站点的设计和开发都是以移动优先作为第一原则,我们也专门为了移动端的web站点做...

389100
来自专栏王磊的博客

VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

一、IDE的选择:   VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下.   WebStorm缺点:性能方面VsC...

44650
来自专栏阿炬.NET

jQuery EasyUI 1.3.2 离线API、Demo

31950
来自专栏QQ音乐技术团队的专栏

【QQ音乐web团队】:ReactJS 服务端同构实践

最近在项目中接入了 ReactJS 并在服务端做了同构直出。关于 ReactJS 服务端同构业界已经有不少分享,这篇文章会主要注重实践的内容,把实现细节和遇到的...

36570

扫码关注云+社区

领取腾讯云代金券