01 2014 档案
摘要：作者：阮一峰日期：2009年9月14日制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。二、获取网页的大小网页上的每个
阅读全文
摘要：function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i"); if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " ")); return "";};用法简单的说一下比如url是:http://suiyidian.cn/index.php?qz=ddddk中qz的值代
阅读全文
摘要：这些文字显示在内层元素中。
阅读全文
摘要：IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText，但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性，而且也得到了safari、opera和Chrome的支持。为了确保跨浏览器兼容，有必要想下面这样通过函数来检测可以使用哪个属性：var div = document.getElementById("content");function getInnerText(element) { return (typeof element.textContent == "
阅读全文
摘要：HTML Code CSSinput[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;}input::-webkit-search-decoration,input::-webkit-search-cancel-button { display: none;}样式搜索输入viewdemo我不会通过每个CSS行,因为它是直接。注意,搜索输入宽度设置为55像素,它将扩大到130 ...
阅读全文
摘要：讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。 在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。代码如下：for(var i=0;i.但文档碎片不会产生这种节点.var oDiv = document.createElement("div"); for(var i=0;i<10000;i++){ var op = document.createElement("span"); var oText = documen
阅读全文
摘要：简介我可以肯定，您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是，CSS还缺少适用于此任务的合适机制。了解CSS3 弹性方框模型（简称Flexbox）该草案将 Flexbox 描述如下：[...]针对接口设计而优化的CSS框模型。除了CSS 中已有的布局系统之外，该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中，框的子代采用水平或垂直布局，而且可将未使用的空间分配给特定的子代，或者通过“弹性”分配给应展开的子代，在各子代间进行分配。这些框的嵌套（水平嵌套在垂直中，或垂直嵌套在水平中）可用于在两个维度中构建布局。该模型是以 XUL用户界面语言的模型为基础的，适用于多
阅读全文
摘要：使用事件代理有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。缓存选择器查询结果选择器查询是开销很大的方法。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。比如，下面这样的写法就是糟糕的写法：jQuery('#top').find('p.classA');jQuery('
阅读全文
摘要：避免使用@import有两种方式加载样式文件，一种是link元素，另一种是CSS 2.1加入@import。而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用@import来导入其它的CSS，但浏览器不能并行下载样式，就会导致页面增添了额外的往返耗时。比如，第一个CSS文件first.css包含了以下内容：@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后，才发现及处理第二个文件second.css。简单的解决方法是使用标记来替代@import，比如下面的写法就能够并行下载CSS文件，从而
阅读全文
摘要：解决方法：1：expression表达式：a{star:expression(thisthis.onFocus=this.blur())} 不推荐使用，消耗性能2：JS解决 window.onload=function(){var aLinks=document.getElementsByTagName('a');for(var i=0;i<aLinks.length;i++){aLinks[i].onfocus=function(){this.blur();};}}3：jQuery解决 $(function(){$('a').bind('focu
阅读全文
摘要：避免使用IframeIframe也叫内联frame，可以把一个HTML文档嵌入到另一个文档中。使用iframe的好处是被嵌入的文档可以完全独立于其父文档，凭借此特点我们通常可以使浏览器模拟多线程，需要注意的是使用iframe并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，即使是跨窗口或跨标签页，这在所有主流浏览器都是如此。也因为这样这让iframe带来的好处大打折扣。在页面加载过程中iframe元素会阻塞父文档onload事件的触发，而开发者程序通常会在onload事件触发时初始化UI操作。例如，设置登录区域的焦点。因为用户习惯等待这一操作，所以尽可能的让onl
阅读全文
摘要：准备1 css reset/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, st
阅读全文
