《互联网Web开发的细节之美.doc》由会员分享，可在线阅读，更多相关《互联网Web开发的细节之美.doc（6页珍藏版）》请在三一文库上搜索。
1、目录封面目录:01.jQuery匹配选择页面元素 ： 02完美诠释jQuery live函数 02 -jQuery模拟移动设备转屏事件03-web前端开发用户体验之Tab标签的优化 05简单常用效果实现06Jscroll 定义完美的浏览器滚动条 ：.06 -移动web开发（手指下的js,拖拽事件处理）:-07Dreamweaver插件Zen Coding,实现快速化编辑网页 08- 小计08-jQuery匹配选择页面元素前些日子有一同事问我一个关于jQuery选择的问题，今日突然想起，觉得还是记下吧，以免下次有需求的时候不至于慌张。写之前先来抱怨一下，天天玩 jq,现在原生的js完全不会啊，有
2、木有啊咋天收到一 SB任务，在Discuz ±面加一段banner切换效果，但是必须得使用原生js,理由是怕与Discuz自身js冲突。好吧，原生就原生吧，撕了马甲我还能不认识么。勉勉强强的写好，经测试，问题居多，慌张啊，纠结啊，各种不安份，折腾一上午总算弄好，效果强差人意。抱怨完成，言归正传。他的这个问题是这样的：页面中有好多元素，其ID或者CLASS是有一定规律的，例如以下：就是讲这些元素的class都是包含某一段字符的，比如以上案例就是包含了classj这么一段，然后下面的问题是，如何通过jq选择器把class包含这段字符的元素全部选出来。ss(” colo 广,” #F00”
3、);其解决方法如下：$("classA='class_'"): css("color","#F00M); ss("color","#F00");ss(”color”,”#F00”)；</div>jQuery 结构：$(fun ctio n()=function(e) ('move').i rm erHTML = O.pageX + O.pageY;('img'). = 0.pageX + *px'('img'). = 0.
4、pageY + 'px'0；这是最基础也是最简单的事件，大家仔细看看就可以了。手指下的js事件资源下载在这里我想请大家注意一下，移动设备也有兼容性的差异，所以并不是你做的效果在每个机型上面都合适，例如上面的例子屮();这句话，有的设备上面不需要加有的设备上面必须得加， 不加的后果是start和endZ间的差值会只有6px的样子，这样就会导致手指拖拽的时候对象不能随 着手指的步伐而跟上，这句话的意思其实就是告诉设备，当我执行手指移动事件的时候，不要再执行别的操作，只管一心做这件事情就OK 了，这样手指移动事件又会变得流畅起来。讲了这么多的废话，再配合案例，相信大家已经对移动设备的
5、web前端开发的拖拽事件了如指掌了，嗯，那我们就一起出发吧，共同打造移动互联网的盛世！Dreamweaver插件Zen Coding,实现快速化编辑网页毫无疑问，当前web开发的一大利器，Dreamweaver,是当之无愧的王者，其人性化的界面和 符合开发者习性的操作都令web开发者深深的对其着迷，但是其优雅Z处不仅仅表现在这些，她还有一个强大的插件组，是的，Zen Coding就是其成员之一，这篇文章只是引导一下大家，并不做Zen Coding的教程，至于使用方法我觉得也还是比较简单的，网上面也是一大把一大把的。Zen Codi ng资源下载下载完成后，只要你装了 DW,双击Zen Codi
6、ng就可以了。假设我们需要编辑一组图片 代码，按照传统的，我们需要一个写上 IMG标签，一个个写IMG的SRC属性，这样会显得 很繁琐，浪费时间，那么这时 Zen Codi ng就可以大显身手了。你可以直接敲上div#head>imgsrc=,as_$,width=,123nheight=H123丁5这段代码，然后使用Zen Coding的快捷键Ctrl+,(注意光标要放到代码的最后处)生成代码。这个 时候你就看到了奇迹的发生，是的，以上代码的含义就是在一个ID为head的div下有5个src为as_索引，宽度为123PX,高度为123PX,的IMG。<div id=HheadH&
7、gt;<img src="as_1M width=H123n height=n123u><img src=,as_2n width=”123“ height=”123“><img src=Has_3M width=,123H height=H123H> <img srcas_4” width=”123” heights 23”><img src=nas_5M width=,123u height=n123H></div>Zen Coding功能强大，只要你懂她，能灵活运用，相信在开发web的时候能为你节省下许多宝 贵的时间！小记：互联网Web开发篇一细节体现完美，其实做每件事情都是一样的，都需要注重细节，每 个大的东西都是又小的细节构成，所以，做好了细节，你的人生讲更加精彩，你开发的web应用也更 加岀色！