互联网Web开发的细节之美.docx

互联网Web开发的细节之美目录封面目录. 01jQuery匹配选择页面元素. 02完美诠释jQuery live函数 02jQuery模拟移动设备转屏事件 03web前端开发用户体验之Tab标签的优化 05CSS3.0简单常用效果实现 06Jscroll定义完美的浏览器滚动条. 06移动web开发(手指下的js，拖拽事件处理) . 07Dreamweaver插件Zen Coding，实现快速化编辑网页 08小计 08jQuery匹配选择页面元素前些日子有一同事问我一个关于jQuery选择的问题，今日突然想起，觉得还是记下吧，以免下次有需求的时候不至于慌张。写之前先来抱怨一下，天天玩jq，现在原生的js完全不会啊，有木有啊昨天收到一SB任务，在Discuz上面加一段banner切换效果，但是必须得使用原生js，理由是怕与Discuz自身js冲突。好吧，原生就原生吧，撕了马甲我还能不认识么。勉勉强强的写好，经测试，问题居多，慌张啊，纠结啊，各种不安份，折腾一上午总算弄好，效果强差人意。【/】(导航下的效果) 抱怨完成，言归正传。他的这个问题是这样的：页面中有好多元素，其ID或者CLASS是有一定规律的，例如以下：111111112222222233333333就是讲这些元素的class都是包含某一段字符的，比如以上案例就是包含了“class_”这么一段，然后下面的问题是，如何通过jq选择器把class包含这段字符的元素全部选出来。其解决方法如下：$(class=class_).css(color,#F00); /开头是这个值，针对以上案例$(class$=class_).css(color,#F00); /结尾是这个值$(class!=class_).css(color,#F00); /不能是这个值$(class*=class_).css(color,#F00); /模糊匹配这样，所有class包含“class_”的元素的文字颜色都变成红色了，满足了要求。完美诠释jQuery live函数live函数是jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave, change, submit。与bind()不同的是，live()一次只能绑定一个事件。 这一切听起来是多么的优雅，但是这些专业的词汇你可能还是不太了解，下面我来举个例子：html结构： .jQuery结构：$(function() $(.demo).click(function() $(this).append(123););/动态的向div.demo里面添加三个内容索引递增的span元素$(.demo).children(span).die().live(mouseover,function() alert(测试信息_鼠标移入事件););/这里就能体现live的作用，当span元素使用bind或者是直接绑定hover、mouseover的时候，事件是不执行的，因为span元素是动态添加的。而live函数就能够给将来元素绑定事件处理函数。)这样在我们的开发中能够利用live函数做出更加出乎想象的事情。当我们了解了live的时候，很多时候都觉得还是有缺陷的，因为它只能绑定一个事件，如果你在下面再写上一句绑定别的事件的处理机制时，上一个是不会执行的，只会执行最后绑定的事件，这样就会令我们很困惑。下面，我来介绍一下可以摆脱这种困扰的方法，自认为还是比较完美的。虽然它有明文规定不允许，但是可能不走正道，想想歪点子，这样又给了live的面子，又不使我们困惑，多好！Html结构： .jQuery结构：$(function() $(.demo).click(function() $(this).append(123); ); /动态的向div.demo里面添加三个内容索引递增的span元素 $(.demo).children(span).die().live(mouseover,function() alert(测试信息_鼠标移入事件); ); /这是第一个给动态的span元素绑定事件 $(.firstEvent).children(span).die().live(mouseout,function() alert(测试信息_鼠标移出事件); ); /这是第二个给动态的span元素绑定事件)没错，这就达到了我们想要的效果，我们可以利用这样的方式去为span绑定N个超现实的未来事件。jQuery模拟移动设备转屏事件关于移动设备的转屏着实是一个令前端开发者头疼的问题，就相当于PC Web开发上面的IE6，都恨不得吃了它，但是也恰恰是这些可恶可爱的一些些元素，构建成了一个互联网的大家庭，丰富多彩，五彩斑斓的，改变着人类的世界。而移动设备里面的转屏事件，JS里面好像有专门针对的函数，我也在网上搜索了几下，效果不是很理想。于是通过几次的项目开发，渐渐的形成了我自己的一套可以模拟转屏事件的jQuery方法，虽然在优化很性能上都不是太好，但是我觉得不怎么会影响效果，是的，如果影响效果我也不会去写它了。先介绍一下它的工作原理，我是通过jQuery时时监听一个在页面上面隐藏的div的宽度有没有变化去判断是否转屏，因为在一个固定的浏览环境下，div的宽度是不会变的只有当移动设备转屏的时候才会发生改变。代码如下：Html部分：Js部分：/判断转屏var oldScreenWidth = parseInt(jQuery(#rotationScreen).css(width); /获取初始时候DIV的宽度var resizeScreen = setInterval(function() if(parseInt(jQuery(#rotationScreen).css(width) != oldScreenWidth) /判断DIV的宽度的变化情况 resizeLoad(); /转屏执行事件 oldScreenWidth = parseInt(jQuery(#rotationScreen).css(width); /转屏函数执行后重新赋值 , 400); /通过每400毫秒观察一次DIV的宽度来判断有没转屏/判断转屏web前端开发用户体验之Tab标签的优化Tab标签是当前web设计中比较常用也是效率比较高的交互方式，其方便，快捷，实用和高效的特性吸引着广大前端架构师和设计师，架构师无时无刻不在想着如何把Tab的切换效果做的更佳的绚丽和如何把代码写的更加的简练，设计师们也在为她一件一件的设计着服装，使其更加的出众，用户体验度更高。正因为这样，现下的Tab标签形式五花八门，千奇百怪的都有，关于她的文章也是数不胜数，在这篇文章中所要介绍的是Tab最基础也是最常用的优化效果之一。我们以上面的形式举个例子，当你鼠标移入或者点击Tab标签的时候（此优化方法不针对点击事件），底下会显示相对应的内容，这都没有问题，但是当你心情不好或者是很匆忙的时候，你快速的在Tab上面移动着鼠标，这时你注意一下，下面的内容是不是也是跟着快速的切换。如果是，那就证明你的这个用户体验糟糕透了。大家看看/index.v3.htm这个网站上面的Tab标签，鼠标快速移动时是不是没有切换相对应的内容呢，是的，这才是用户想要的，这才是前端开发师该做的。由此看的出，出色的前端工程师是注意每个细节，然后做好每个细节。其实这个实现起来倒不是很难，只是用js做了一个延迟效果。下面我将给出思路代码：html部分： 管理分享 js部分：var timer;function tabout() clearInterval(timer);function tabover(obj) timer = setTimeout(function() /切换代码 ,200);CSS3.0简单常用效果实现外发光效果：box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);背景透明效果：background:#000;background:rgba(0, 0, 0, 0.5);Jscroll定义完美的浏览器滚动条你还在为了浏览器的滚动条的默认样式和不兼容现象而发愁吗，不必发愁，从Jscroll诞生之际，你就不需要再发愁了它能够实现自定义滚动条样式，只要你有好的想法，好的创意，通过它，都可以实现，把滚动条也做的神出鬼没，是页面的整体效果达到最佳！首先，给予资源下载(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:right 0 repeat-y,Hover:right 0 repeat-y,Focus:right 0 repeat-y/设置滚动条滚轴背景：鼠标离开(默认)，经过，点击,Btn: btn:false/是否显示上下按钮 false为不显示,uBg:Out:black,Hover:#fff,Focus:orange/设置上按钮背景：鼠标离开(默认)，经过，点击,dBg:Out:black,Hover:#fff,Focus:orange/设置下按钮背景：鼠标离开(默认)，经过，点击,Fn:function()/滚动时候触发的方法););上面的每个参数也做了注释，为了达到最好的效果我们可能需要一些图片放上去做优化，上面提供了一个BgUrl参数，这个我们可以放滚动条的背景图片，但是这个得注意一下，因为他只能提供一个图片，但往往我们需要多个图片对滚动条进行修饰，那这就得把好多个图片放到一张图片上，然后通过Bg参数来调用，类似以上案例。只要你耐点心，想象会调出完美的滚动条的！移动web开发(手指下的js，拖拽事件处理)大家都知道现在移动互联网的发展迅速，随之的移动web前端开发也当然是如今最热点的话题之一了，那说到移动web前端开发那最基本的首当是手指触发的一些事件的处理，手指拖拽,手指移动等事件。试想一下，当我们拿到智能手机或者是平板电脑的时候，第一件想干的事是什么，当然是手指去操作它，没错，那现在就用我们的手指一起去蹂躏它吧。在移动设备上面，关于手指这块js支持：ontouchstart、ontouchmove、ontouchend等事件，通过这些事件的配合，可有做出很复杂的手指事件，先给一段代码：document.ontouchstart = function(e) document.getElementById(start).innerHTML = e.touches0.pageX + , + e.touches0.pageY; e.preventDefault();document.ontouchmove = function(e) document.getElementById(move).innerHTML = e.touches0.pageX + ,+ e.touches0.pageY;document.getElementById(img).style.left = e.touches0.pageX + px;document.getElementById(img).style.top = e.touches0.pageY + px;e.preventDefault();这是最基础也是最简单的事件，大家仔细看看就可以了。手指下的js事件资源下载在这里我想请大家注意一下， 移动设备也有兼容性的差异，所以并不是你做的效果在每个机型上面都合适，例如上面的例子中e.preventDefault();这句话，有的设备上面不需要加有的设备上面必须得加，不加的后果是start和end之间的差值会只有6px的样子，这样就会导致手指拖拽的时候对象不能随着手指的步伐而跟上，这句话的意思其实就是告诉设备，当我执行手指移动事件的时候，不要再执行别的操作，只管一心做这件事情就OK了，这样手指移动事件又会变得流畅起来。讲了这么多的废话，再配合案例，相信大家已经对移动设备的web前端开发的拖拽事件了如指掌了，嗯，那我们就一起出发吧，共同打造移动互联网的盛世！Dreamweaver插件Zen Coding，实现快速化编辑网页 毫无疑问，当前web开发的一大利器，Dreamweave