互联网Web开的细节之美.docxVIP

互联网Web开发的细节之美 目录 封面目录………………………………………………………………………………………………………..………… 01 jQuery匹配选择页面元素……………………………………………………………………………..………… 02 完美诠释jQuery live函数………………………………………………………………………………………… 02 jQuery模拟移动设备转屏事件………………………………………………………………………………… 03 web前端开发用户体验之Tab标签的优化……………………………………………………………… 05 CSS3.0简单常用效果实现………………………………………………………………………………………… 06 Jscroll——定义完美的浏览器滚动条………………………………………………………………………. 06 移动web开发(手指下的js，拖拽事件处理) …………………………………………………………. 07 Dreamweaver插件Zen Coding，实现快速化编辑网页…………………………………………… 08 小计…………………………………………………………………………………………………………………………… 08 jQuery匹配选择页面元素 前些日子有一同事问我一个关于jQuery选择的问题，今日突然想起，觉得还是记下吧，以免下次有需求的时候不至于慌张。 写之前先来抱怨一下，天天玩jq，现在原生的js完全不会啊，有木有啊~昨天收到一SB任务，在Discuz上面加一段banner切换效果，但是必须得使用原生js，理由是怕与Discuz自身js冲突。好吧，原生就原生吧，撕了马甲我还能不认识么。勉勉强强的写好，经测试，问题居多，慌张啊，纠结啊，各种不安份，折腾一上午总算弄好，效果强差人意。【 HYPERLINK / /】(导航下的效果) 抱怨完成，言归正传。他的这个问题是这样的：页面中有好多元素，其ID或者CLASS是有一定规律的，例如以下： didiv didiv didiv 就是讲这些元素的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 ... /div 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的时候，很多时候都觉得还是有缺陷的，因为它只能绑定一个事件，如果你在下面再写上一句绑定别的事件的处