11 2014 档案

摘要:平淡的描述 在js中,能使用特征监测就尽量不要使用浏览器嗅探。嗅探浏览器目的是判断可否使用这个对象或者API,但是抛开浏览器的各个版本的userAgent不说,还有些浏览器打补丁的情况,造成判断异常复杂,兜了个大的圈子,而特征检测则是直接了当,不存在维护困难的问题。 其次,当不确定某个版本的浏览... 阅读全文
posted @ 2014-11-24 23:48 royalrover 阅读(2376) 评论(0) 推荐(1) 编辑
摘要:边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。首先,我们看看边框的组成结构: 效果图: 可以看到边框的效果,4个等腰梯形。我们设置的各个方向边框高度就是每个等腰梯形的高。可以想象得到,如果div的高度和宽度都为... 阅读全文
posted @ 2014-11-23 21:58 royalrover 阅读(271) 评论(0) 推荐(0) 编辑
摘要:对于早期的w3c浏览器,并没有实现ie的私有方法insertAdjacentHTML(目前已是HTML5标准),可以用appendChild模拟该方法的实现: if(typeof HTMLElement !=='undefined' && !HTMLElement.prototype.insert... 阅读全文
posted @ 2014-11-21 17:30 royalrover 阅读(653) 评论(0) 推荐(0) 编辑
摘要:在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用mouseenter事件来防止子元素的冒泡,这就涉及到事件兼容性的问题了。先比较mouseenter和mouseover的异同点,当从元素外围进入元素内部时同时... 阅读全文
posted @ 2014-11-21 11:20 royalrover 阅读(3403) 评论(0) 推荐(0) 编辑
摘要:---恢复内容开始---浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从文档流中取出并对该元素尽量向左或者向右移动,周围的内容将会环绕该元素。所以,浮动会对兄弟元素的布局造成影响,而且其效率较低,代价较高。绝对定位则是完全脱离文档流,直接相对于... 阅读全文
posted @ 2014-11-20 23:33 royalrover 阅读(189) 评论(0) 推荐(0) 编辑
摘要:之前很简单的认为对input的value监测就用2个事件可以搞定兼容性,知道我看了司徒正美的这篇博客,还是感慨自己不够深入,接触的太少。 对于IE全系列,可以采用onpropertychange属性监测 对于 gteIE9 和W3c浏览器,则通过input事件进行监测。 但是IE9的兼容性可能... 阅读全文
posted @ 2014-11-20 15:23 royalrover 阅读(350) 评论(0) 推荐(0) 编辑
摘要:对于“==”,我们肯定不陌生,但是背后的判定机制我们可能不是很熟悉,我现在先举一些例子,最后再总结一下大概的方法: null == undefined // true 1 == true // NaN == NaN //false '123' == 123 //true Number... 阅读全文
posted @ 2014-11-20 09:45 royalrover 阅读(260) 评论(0) 推荐(0) 编辑
摘要:重新复习了富文本编辑器的基本实现,现总结下要点: 1,iframe的创建,之所以使用iframe框架,是为了防止编辑的内容影响当前文档。 2,隐藏的textarea保存iframe的源码 3,ie下的兼容性,为了保存ie的选中范围,需要借助于textRange.getBookmark(),以及... 阅读全文
posted @ 2014-11-19 23:37 royalrover 阅读(606) 评论(0) 推荐(0) 编辑
摘要:typeof存在一些兼容性的问题,在IE6,7,8中的DOM和BOM元素及其对象上的方法的判定会出现误差,在safari上对NodeList实例的判定,对ExpReg实例的判断(早期的chrome,safari会对ExpReg实例认定为‘function’)。分析: 之所以会在IE6,7,8对DO... 阅读全文
posted @ 2014-11-19 12:37 royalrover 阅读(2182) 评论(0) 推荐(1) 编辑
摘要:简介attribute和property都有属性之意,但对于attribute和property的区分其实并不难。从对象来说,attribute是html文档上标签属性,而property则是对应dom元素的自身属性。从操作方法上来看,attribute可以通过dom core规范的接口 getAt... 阅读全文
posted @ 2014-11-19 09:16 royalrover 阅读(9210) 评论(3) 推荐(4) 编辑
摘要:常用的清除浮动的几种方法总结下: 1,手动设置一个标签(在浮动元素下方),然后对其设置clear属性 2,给浮动元素设置 :after伪类,创建块元素,设置clear属性 3,给父元素设置浮动 4,给父元素设置overflow设置非visible值(auto,hidden) 5,给父元... 阅读全文
posted @ 2014-11-18 20:59 royalrover 阅读(442) 评论(0) 推荐(0) 编辑
摘要:众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这个属性的时候,是不... 阅读全文
posted @ 2014-11-18 13:31 royalrover 阅读(167) 评论(0) 推荐(0) 编辑
摘要:前言:本文翻译自Dean Edwards的一篇文章,原文地址:http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/。 文章主要指出了用“回调模式实现自定义事件”的一些弊端,同时提出了一种解决方案,即将回调的函数包装成原生事件,... 阅读全文
posted @ 2014-11-17 00:32 royalrover 阅读(336) 评论(0) 推荐(0) 编辑
摘要:元素的盒模型有几个较为重要的属性,本篇文章主要将脚垫聚集在与height相关的属性上。对于一个并未显式设置高度块框来说,其height的高度不仅仅取决去内容的高度,而且还与该块框的宽度有关。宽度越窄,相应的需要容纳相同内容所需要的空间越大,高度越高。而对于一个非替换行内元素而言(所谓非替换元素,就是... 阅读全文
posted @ 2014-11-13 14:54 royalrover 阅读(652) 评论(0) 推荐(0) 编辑
摘要:前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。jQuery的事件系统离不开jQuery的缓存系统。jQuery的第一代缓存是直接将数据存储在 缓存体 这个数据结构中,但是需要在元素上添加一个uuid来作为标示,标记在缓存体中的位置。... 阅读全文
posted @ 2014-11-12 15:38 royalrover 阅读(333) 评论(0) 推荐(0) 编辑
摘要:jQuery早期的事件系统,主要借鉴自Dean-Edward的事件模型。虽说早期的该事件模型也有些许bug,诸如: 1,绑定的事件及其处理程序等数据并未存储到缓存中,而是直接存储在dom元素上,这样不仅污染了dom元素,而且还有可能造成隐患,比如在早期的ie下 拷贝元素,顺带着连这些数据都拷贝了... 阅读全文
posted @ 2014-11-12 15:13 royalrover 阅读(280) 评论(0) 推荐(0) 编辑
摘要:为了seo优化,导航栏最好标签语义化。最符合语义的莫过于ul,li。在采用多级标签时,可采用控制二级标签ul位置的方式来进行显隐。效果如下:http://jsfiddle.net/tcyangli/mb5yL4uk/具体的html代码: .dropdown,ul{margin: 0;p... 阅读全文
posted @ 2014-11-12 14:59 royalrover 阅读(220) 评论(0) 推荐(0) 编辑
摘要:要想实现弹窗的效果,首先应该创建一个覆盖层maskLayer,以及一个显示层presentLayer。其次,每次弹窗时(除首次弹窗外),maskLayer的显示以及隐藏不应该导致文档流的reflow,但是repaint不可避免。所以对于maskLayer,用以display:absolute;最为关... 阅读全文
posted @ 2014-11-12 14:51 royalrover 阅读(369) 评论(0) 推荐(0) 编辑
摘要:讲解1,单行文本的居中: 单行文本框居中 .center{width:300px;height:300px;line-height:300px;}2, 多行文本的居中: 1) 多行文本框居中。。。。。。。 .c1{width:300px;height:300px; disp... 阅读全文
posted @ 2014-11-12 14:17 royalrover 阅读(352) 评论(0) 推荐(0) 编辑
摘要:ajax跨域请求,目前已用几种方法实现:1)用原生js的xhr对象实现。 var url="http://freegeoip.net/json/"; //创建xhr对象 function createCORSXhr(url,method){ var xhr=new XMLHttpRequ... 阅读全文
posted @ 2014-11-12 14:15 royalrover 阅读(15239) 评论(3) 推荐(7) 编辑
摘要:大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排。其中如果使用分离的一步处理过程,例如计时器,依然多次重排。例如,当我们应用transition动画的时候,希望从0px变化到100px. 你如果如下代码:dom.style.le... 阅读全文
posted @ 2014-11-12 14:13 royalrover 阅读(750) 评论(0) 推荐(0) 编辑
摘要://正文开始关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布。第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交... 阅读全文
posted @ 2014-11-12 14:11 royalrover 阅读(1463) 评论(1) 推荐(0) 编辑
摘要:margin值与可视化盒模型的宽(高)度之间的关系 阅读全文
posted @ 2014-11-12 14:07 royalrover 阅读(1102) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示