《互联网Web开发的细节之美9P》由会员分享，可在线阅读，更多相关《互联网Web开发的细节之美9P（8页珍藏版）》请在金锄头文库上搜索。
1、互联网险睡韵勺细节之美目录封面目录:01jQuery匹配选择页面元素 .:02-完美诠释jQuery live函数02 -jQuery模拟移动设备转屏事件 03-web前端开发用户体验之Tab标签的优化 05-CSS3.0简单常用效果实现06-Jscroll定义完美的浏览器滚动条 :06 -移动web开发（手指下的js,拖拽事件处理）:07 -Dreamweaver插件Zen Coding,实现快速化编辑网页 08- 小计08-jQuery匹配选择页面元素前些日子有一同事问我一个关于jQuery选择的问题，今日突然想起，觉得还是记下吧，以免下次有需求的时候不至于慌张。写之前先来抱怨一下，天天玩
2、jq，现在原生的js完全不会啊，有木有啊昨天收到一 SB任务，在Discuz上面加一段banner切换效果，但是必须得使用原生js,理由是怕与 Discuz自身js冲突。好吧，原生就原生吧，撕了马甲我还能不认识么。勉勉强强的写好，经测试，问题居多，慌张啊，纠结啊，各种不安份，折腾一上午总算弄好，效果强差人意。抱怨完成，言归正传。他的这个问题是这样的：页面中有好多元素，其ID或者CLASS是有一定规律的，例如以下：111111112222222233333333就是讲这些元素的 class都是包含某一段字符的，比如以上案例就是包含了class_这么一段，然后下面的问题是，如何通过jq选择器把cl
3、ass包含这段字符的元素全部选出来。其解决方法如下：$(classA=class_).css(color,#FOO);/ 开头是这个值，针对以上案例$(class$=class_).css(color,#FOO);/ 结尾是这个值$(class!=class_).css(color,#FOO);/ 不能是这个值$(class*=class_).css(color,#FOO);/ 模糊匹配这样，所有class包含class_”的元素的文字颜色都变成红色了，满足了要求。完美诠释jQuery live函数live函数是jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件 处理
4、函数(比如 click事件)。也能绑定自定义事件。目前支持click, dblclick, mousedown,mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup 。 还不支持 blur, focus, mouseenter, mouseleave, change, submit。与 bind()不同的是，live()一次只能绑定一个事件。这一切听起来是多么的优雅，但是这些专业的词汇你可能还是不太了解，下面我来举个例子：html结构：jQuery 结构：$(fun ctio n()$(.demo).click(fu
5、 nctio n()$(this).appe nd(123););/动态的向div.demo里面添加三个内容索引递增的span元素$(.demo).childre n(spa n).die ().li ve(mouseover,fu ncti on()alert(测试信息鼠标移入事件););/这里就能体现live的作用，当span元素使用bind或者是直接绑定 hover、mouseover 的时候，事件是不执行的，因为span元素是动态添加的。而live函数就能够给将来元素绑定事件处理函数。)这样在我们的开发中能够利用live函数做出更加出乎想象的事情。当我们了解了 live的时候，很多时候
6、都觉得还是有缺陷的，因为它只能绑定一个事件，如果你在下面再写上一句绑定别的事件的处理机制时，上一个是不会执行的，只会执行最后绑定的事件，这样就会令 我们很困惑。下面，我来介绍一下可以摆脱这种困扰的方法，自认为还是比较完美的。 虽然它有明文规定不允许，但是可能不走正道，想想歪点子，这样又给了live的面子，又不使我们困惑，多好！Html结构：jQuery 结构：$(fun ctio n()$(.demo).click(fu nctio n()$(this).appe nd(123););/动态的向div.demo里面添加三个内容索引递增的span元素$(.demo).childre n(spa
7、n).die().live(mouseover,fu nction()alert(测试信息鼠标移入事件););/这是第一个给动态的span元素绑定事件$(.firstEve nt).childre n(spa n).die ().li ve(mouseout,fu nction()alert(测试信息鼠标移出事件););/这是第二个给动态的span元素绑定事件)没错，这就达到了我们想要的效果，我们可以利用这样的方式去为span绑定N个超现实的未来事件。jQuery模拟移动设备转屏事件关于移动设备的转屏着实是一个令前端开发者头疼的问题，就相当于PC Web开发上面的IE6,都恨不得吃了它，但是也
8、恰恰是这些可恶可爱的一些些元素，构建成了一个互联网 的大家庭，丰富多彩，五彩斑斓的，改变着人类的世界。而移动设备里面的转屏事件，JS里面好像有专门针对的函数，我也在网上搜索了几下，效果不是很理想。于是通过几次的项目开发，渐渐的形成了我自己的一套可以模拟转屏事件的jQuery方法，虽然在优化很性能上都不是太好，但是我觉得不怎么会影响效果，是的， 如果影响效果我也不会去写它了。先介绍一下它的工作原理，我是通过jQuery时时监听一个在页面上面隐藏的div的宽度有没有变化去判断是否转屏，因为在一个固定的浏览环境下，div的宽度是不会变的只有当移动设备转屏的时候才会发生改变。代码如下：Html部分：J
9、s部分：/判断转屏var oldScreenWidth = parseInt(jQuery(#rotationScreen).css(width);/ 获取初始时候 DIV 的宽度var resizeScree n = set In terval(fu nction()if(parseInt(jQuery(#rotationScreen).css(width) != oldScreenWidth) / 判断 DIV 的宽度的 变化情况resizeLoad();/转屏执行事件oldScreenWidth = parseInt(jQuery(#rotationScreen).css(width);
10、/ 转屏函数执行后重新赋值, 400); II通过每400毫秒观察一次 DIV的宽度来判断有没转屏 /判断转屏web前端开发用户体验之 Tab标签的优化Tab标签是当前 web设计中比较常用也是效率比较高的交互方式，其方便，快捷，实用和高效的特性吸引着广大前端架构师和设计师，架构师无时无刻不在想着如何把 Tab的切换效果做的更佳的绚丽和如何把代码写的更加的简练，设计师们也在为她一件一件的设计着服装，使其更加的出众，用户体验度更高。正因为这样，现下的Tab标签形式五花八门， 千奇百怪的都有，关于她的文章也是数不 胜数，在这篇文章中所要介绍的是 Tab最基础也是最常用的优化效果之一。我们以上面的形
11、式举个例子，当你鼠标移入或者点击Tab标签的时候(此优化方法不针对点击事件)，底下会显示相对应的内容， 这都没有问题，但是当你心情不好或者是很匆忙的时候，你快速的在Tab上面移动着鼠标，这时你注意一下，下面的内容是不是也是跟着快速的切换。如果是， 那就证明你的这个用户体验糟糕透了。大家看看这个网站上面的 Tab标签，鼠标快速移动时 是不是没有切换相对应的内容呢，是的，这才是用户想要的， 这才是前端开发师该做的。由此看的出，出色的前端工程师是注意每个细节，然后做好每个细节。其实这个实现起来倒不是很难，只是用js做了一个延迟效果。下面我将给出思路代码：html部分：管理分享js部分：var tim
12、er;fun ctio n tabout()clearI nterval(timer);function tabover(obj)timer = setTimeout(fu nctio n()/切换代码,200);CSS3.0简单常用效果实现外发光效果：box-shadow: 0 0 10px rgba(O, 0, 0, 0.5);背景透明效果：backgrou nd:#000;backgrou nd:rgba(0, 0, 0, 0.5);Jscroll 定义完美的浏览器滚动条你还在为了浏览器的滚动条的默认样式和不兼容现象而发愁吗，不必发愁，从Jscroll诞生之际，你就不需要再发愁了它能够实
13、现自定义滚动条样式，只要你有好的想法，好的创意，通过它，都可以实现，把滚动条也做的神出鬼没，是页面的整体效果达到最佳！首先， 给予资源下载（Jscroll下载）下面我先贴上一段调用js代码：$（#sales_right）.jscroll（W:10px设置滚动条宽度,BgUrl:url（/templets/img/scrollBg.jpg）设置滚动条背景图片地址,Bg:left 0 repeat-y/设置滚动条背景图片position,颜色等,Bar: Pos:/设置滚动条初始化位置在底部,Bd:Out:#FFF,Hover:#FFF设置滚动滚轴边框颜色：鼠标离开（默认），经过,Bg:Out:r
14、ight 0 repeat-y,Hover:right 0 repeat-y,Focus:right 0 repeat-y/设置滚动条滚轴背景：鼠标离开（默认），经过，点击,Btn:btn:false/是否显示上下按钮 false为不显示,uBg:Out:black,Hover:#fff,Focus:ora nge设置上按钮背景：鼠标离开（默认），经过，点击,dBg:Out:black,Hover:#fff,Focus:ora nge/ 设置下按钮背景：鼠标离开（默认），经 过，点击,Fn:function（）/滚动时候触发的方法）;）;上面的每个参数也做了注释，为了达到最好的效果我们可能需要一些图片放上去做优化，上面提供了一个
