互联开发的细节之美.docxVIP

互联网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是有一定规律的，例如以下：didivdidivdidiv就是讲这些元素的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结构：div .../divjQuery结构：$(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的时候，很多时候都觉得还是有缺陷的，因为它只能绑定一个事件，如果你在下面再写上一句绑定别的事件的处理机制时，上一个是不会执行的，只会执行最后绑定的事件，这样就会令我们很困惑。下面，我来介绍一下可以摆脱这种困扰的方法，自认为还是比较完美的。虽然它有明文规定不