03 2012 档案
摘要：快捷键在日常的使用还是挺多的，例如熟悉的粘贴ctrl+v，复制 ctrl+c，使用快捷键能提高我们的做事效率，特别是当我们熟悉了一种操作后，再次使用它来进行操作就会变得很方便，很顺手，对于使用键盘的重度用户，键盘永远比鼠标来的快。本文主要提到用js的方法设置tabindex 和js设置组合快捷键1）tabindex： 就是利用tab来轻松的控制页面中的链接和表单元素 它的用法很简单：obj.tabindex = tabindex; 这个tabindex 的值，按照w3c 的规定可以从0开始 一直到32767 这个比较的简单，关键是明白他的作用，这里就不举例了。这里有一篇文章对tabind...
阅读全文
摘要：最近在做一个项目，已经到了后期，通常我们在后期主要是做一些代码优化的工作，本文主要谈谈前端的代码优化方面的一些问题，分为CSS篇和JS篇一、CSS篇 1）内联元素inline，inline元素对一些Css不起作用，例如margin-top，margin-bottom，vertical-align，overflow，height，width如果是内联元素，然后设置这些属性，是根本不会起到作用的，因为内联元素本身是没有高度的。 类似这样的代码: <span style="margin-top:10px; height:100;width:100"><img s
阅读全文
摘要：第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编辑器的所有操作。到底具体什么是range呢，其实简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形，只要我们选定了一个文本，那么这个文本就占有空间了，所以range是有起始和结束位置的。一、关于浏览器的兼容性 目前主要有3种关于range的类似的对象，分别是W3C range 对象，Mozzlia selection ，ie TextRange 关于这三种的区别，请查看文档http://www.quirksmode.org/dom...
阅读全文
摘要：在html4中type 被list-style-type给替代了，start 和value几乎不常用，很少看到有这样的代码，但是html5的新标准这几个属性又重新被捡回来了。1）个人感觉使用type 属性list-style-type 简单，也容易记忆下面来对应下这两个之间的关系 type list-style-type type="1"decimal(默认样式)type="a"lower-alphatype="A"upper-alphatype="i"lower-romantype="I"up
阅读全文
摘要：上文对html5支持的浏览器的拖拽效果进行了分析，本文不采用任何库，来分析下拖拽的过程先想想我们平时拖拽是怎么操作的，大致可以分为几下几个步骤：鼠标按下，鼠标移动，拖拽，被拖动的物件跟着走鼠标松开，物件停止，无拖动了计算距离，拖拽的距离（鼠标移动）对应在事件上就是onmousedown，onmousemove ，开始拖拽onmouseup ，停止拖拽计算相对的拖拽距离下面我们按照这种思路，写一个拖拽效果,假设我们拖动标题，这块的内容就跟着走。首先我们来写一个含有标题和内容的块css为：#doc{border:1px solid #a0b3d6; background:white;positio
阅读全文
摘要：一些网友给我反馈，希望我给下详细的demo，其实我觉得学习知识还是要自己动手，亲身实践下才体会深刻，顾没有提供可以使用的demo给大家直接下载下来看效果了，但是为了大家对我的期望，后面写的一些文章，如有必要，我都会给大家提供demo，供大家参考的。 好了，进入正题，经常在网站上看到各种拖动的效果，很酷，如，百度新首页，接下来我来分析下拖动到底是什么实现的。一、html5现在已经提供支持拖动和拖放的API了，所以，支持html5的浏览器可以不必折腾了，直接使用吧。 关于html5的拖拽api 请查看http://dev.w3.org/html5/spec/dnd.html以下摘录一些 比...
阅读全文
摘要：最近在项目中需要做图片的旋转功能，我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况一、图片旋转的方案1）css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的。 具体代码为：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);上述代码的意思就是将图片顺时针旋转90度，其实可以旋转任意的度数。但是支持css3的浏览器只有chrome，firefox3.6 ，safari，ie浏览器是不支持的。那么IE下该怎么处理呢？于是就有了下面的一种方案2）在IE下通过滤镜来实现旋转 具体代码为..
阅读全文
摘要：我们在项目中一直都是使用JS来控制如果文字内容超过的时候，用...来表示，其实是可以通过CSS来控制的，下面提供几种办法测试的浏览器：ie6，ie7，ie8，chrome17 ，firefox101）css方法 text-overflow-fag{ width:500px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; }该方法在ie6,7,8 chrome17,firefox10 下均测试通过2）网上别人提供的一个负margin定位的方法，我觉得比较好。 ...
阅读全文
摘要：各种网站经常看到页面滚动到可视区域，然后才加载相应的图片资源，他的本质是什么呢？本文来分析一下很简单，就是判断当前元素是否是可视区域内假设：h1 = 滚动条滚去的高度 w1 = 滚动条滚去的宽度 h2 = 屏幕的高度 obj 表示当前对象 {x：当前对象相对于文档左上角的位置x,y:当前对象相对于文档左上角的y}则应该这样判断 在y轴方向上：if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2){loading()} 同理在X轴
阅读全文
摘要：1）nodeType 属性可返回节点的类型。最重要的节点类型是：value 1 表示 元素element ；2表示 属性attr ；3表示文本text；8 表示注释；9表示 文档document，元素所属文档一般用element.ownerDocument||element.document 来兼容2） JS判断网页的渲染模型 document.compatMode如果为：BackCompat：标准兼容模式关闭。如果为：CSS1Compat：标准兼容模式开启。当document.compatMode等于BackCompat时，浏览器客户区宽度(网页视觉区域)是document.body.cli
阅读全文
摘要：项目中经常碰到各种高度，今天再次总结一下1）getboundingClientRect() 这个是IE下特有的一个方法，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，它返回的是一个对象，该对象有是个属性：top，left，right，bottom，其中如果滚动了滚动条，top和left的值可能会为负值，因为他是相对了可视窗口，被卷进去了。2）scrollTop 表示的意思是对象被卷进去的高度，如果是body的对象，那么则表示滚动条卷去的高度，即浏览器上方隐藏的高度。如果是div等对象，那么就表示滚动条滚去该div上方的高度。3）offsetHeight,offsetWi..
阅读全文
摘要：21）在HTTP1.1标准的请求支持（同一个域名）的并行，各个浏览器的下载数为：ie6/7（2）、Firefox3、IE8（6）、Opera10/Chrome3/Safari4（4）22）浮动元素在ie6下的使用要注意：如果不设置宽度，可能会引起问题。23）如果在父级元素和子级元素之间（div > p）有一个HTML注释，在IE7中，子选择器是不会起作用的。24）iframe的使用：iframe默认样式中有边框，隐藏使用display：none ，去掉滚动条和边框可以设置成：scrolling="no" frameborder="no"25）在IE
阅读全文
摘要：1）img 标签如果src设置为空或者#的时候，会多发一次请求，建议设置为 about:blank 。测试浏览器 ie6,ie7,ie8,chrome17,firefox102) try ~catch 中如果使用了setTimeout 的话，会报错的，catch 不到内容的。3）input radio 如果没有设置 name的属性，在ie下是不能被点击到的，另外 input radio，checkbox 不支持及时的change事件，意思是点击或者选定的时候，没有触发change，而是在鼠标离开的时候才触发的，如果要做到这样的效果，必须使用click要代替4）在ie<9下如果使用appl
阅读全文
摘要：doc = document；doc.documentElement.scrollTop, doc.body.scrollTop的区别scrollTop 是指对象被卷去的高度，在body对象上就是指窗口被滚动条卷去的高度，如果在其他的对象上，那么就是容器被滚动条卷去的高度其实doc.documentElement.scrollTop, doc.body.scrollTop 都是指窗口被滚动条卷去的高度，是一个意思。那么为什么还有两个呢？本质：如果页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。如果页面不具有 DTD（或者说没有指定了
阅读全文
摘要：今天来总结下在项目中事件使用的以下问题*DOMContentLoaded在不同浏览器的实现 什么是DOMContentLoaded？ 它是firefox为了处理在页面DOM结构建立后（无需下载js，css，img等图片资源）绑定事件的一个方法，对于IE是没有这个方法的，但是在IE中可以模拟出这个方法来，来达到同样的目的。我们经常使用jquery的 $(document).ready(function(){});或者百度的tangram框架的时候， baidu.dom.ready(function(){})其实是对这个方法在不同浏览器中做了一个封装。在IE中的实现方式，我们可以参考这个文档ht.
阅读全文
摘要：本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源，还是IE事件模型和W3C事件模型不同的处理方式1）W3C事件模型：支持事件捕捉和冒泡addEventListener('type',function(){},bool) removeEventListener('type',function(){},bool)2）IE事件模型：仅支持事件冒泡attachEvent('type',function(){});detachEvent('type',fucntion(){});*如何统一：设置W3C事件绑定函数的第三个参
阅读全文
摘要：今天来分析下extend方法在各种js框架下的设计。这个函数的功能基本都是实现对象的拷贝功能，即将一个对象的所有属属性拷贝到另外一个对象上去，这个函数使用的频率也很高，如果我们要将一个类的所有方法拷贝到另外方法上去，使用这个方法很方便的。1）在百度tangram js 框架中的实现，baidu.extend =baidu.object.extend = function (target, source) { for (var p in source) { if (source.hasOwnProperty(p)) { target[p] = source[p]; } ...
阅读全文
摘要：接着上篇，继续。。1）selector.toggleClass(className),在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在例如：<div class="user">username</div> $('div.user').toggleClass('bing') 第一次我们应用的时候得到<div class="user bing">username</div> 再次应用就还原开始那样的2）selector.text() 得到匹配元素
阅读全文
摘要：今天以一个例子来看看jquery 的文档操作，首先上例子：<!DOCTYPEhtml><html><head><style>p{margin:8px;font-size:16px;}.selected{color:blue;}.highlight{background:yellow;}</style><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head&g
阅读全文
摘要：1）proxy 方法：通俗的讲就是改变函数的作用域，有两种调用方式： （1）jquery.proxy(function,context) function 为将要执行的函数，context为function上下文对象 （2）jquery.proxy(context,name) 函数上下文object对象，name为将要执行的函数。2）delegate 方法：为匹配到的选择器绑定一个或者多个事件 调用方式：delegate(selector,eventType,handler);selector为选择器，eventType 为事件类型(包含一个或者多个事件的字符串)，handler为事件触发执行
阅读全文
摘要：今天抽时间看了下jq，里面的选择器还是很丰富的，下面分别来对他进行分类下：1）首先是基本的选择器，可选择标签 ，样式，id，通配符4种属性的，eg：$(div) 是选择dom文档下所有的div元素，$(.class) 是选择所有dom文档下的所有样式为class的元素，id则必须通过$(#id)这种方式来使用，通配符是指 * ，能匹配所有的元素。2）组合选择器，就是通过各种方法选择的元素组合在一起，返回一个数组元素，各个选择器以，号分隔。3）层级选择器： $(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素，即子孙元素,例如：$(“div span.num”)
阅读全文
摘要：百度前端js库tangram已经开源一年多了。自己也一直在使用这个工具库，这个工具库使用起来是很方便的百度对性能要求是很好的。它对常见的操作都做些了封装和拆分，比如数组，ajax提交，dom操作，方法的操作，事件等的操作，每个函数都是静态的方法，对其他的方法没有依赖关系，可以很方便的对其中的某些功能抽取出来单独使用，同时提供了方法定义和自动抽取的工具，这个都是可以实现的。我觉得对方法的操作，语言层面的封装，事件的封装，dom的操作都挺好的，下面来着重来分析下这些方法的实现方式。1）对方法的封装。提供baidu.fn这个对象（1）定义了抽象方法abstractMethod baidu.fn.ab
阅读全文
摘要：有2个单词很像，如果没有看清楚，就很容易出错，特此记录下：1）数组的 切片操作（slice），看w3c对他的描述：（1）定义：从已有的数组中选定制定的数组（2）返回值：数组（3）注意： 不改变原数组的值，可以用负数作为索引。常见用法：[].slice.call(arguments)，意思就是将参数链接成数组形式2）删除数组元素操作（splice），和上面的单词只有一个字母（p）的区别（1）定义：插入，替换，删除数组中的元素（2）语法：arryobject.splice(index,howmany,ele1,ele2,.....)可以理解为先删除，然后再添加元素，index 是开始位置，从0开始
阅读全文
摘要：也做了很久前端开发了，先总结下web数据交互方式，web数据交互，简单的讲，是client与server端的数据交互，通过http协议交互的。首先看一个传统的页面请求的生命周期：1. 浏览器发送一个HTTP请求到Web服务器。2. Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。3. HTTP响应通过互联网传送到浏览器。4. 浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载引用的CSS和JavaScript文件。5. CSS资源下载后，浏览器解析它们，并将它们应用到DOM树。6. JavaScript资源下载后.
阅读全文
摘要：2011年总体来说是忙碌的一年，在这一年中，经历了几个好朋友的离职，6月份去负责了下团队的技术交流和人员的培训工作，，下半年由原来的coder转变成了项目的负责人。总结这一年的工作，我觉得有一下几点： 1）有分享的心态：分享是提高自己的水平和认识的一个方式，说出自己的想法，和别人分享，可以检验出来自己对这个问题的理解是否正确，是否有出入，如果别人有好的想法的时候，或许是对自己的一个补充。 2）坚持写博客：岁月留下我们的东西真的不是很多，记忆也就那么多，一定要坚持写自己的博客，一周至少写2篇博客，2012年我要将我的博客完善起来。 3）不要砸在项目里面：项目不是我们的生命，当然我们要做好项目..
阅读全文