![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端技术
文章平均质量分 64
iteye_11097
这个作者很懒,什么都没留下…
展开
-
JS类中能模拟出依赖对象本身的可变的私有属性吗?
JS是轻量级语言,在类的概念上没有如Java那样严格意义上私有函数,公有函数,私有属性,公有属性。但是我们考虑到复用,仍然会希望能够模拟出这些特性。有关私有函数、公有函数的方法,其实蛮简单,就是把私有函数以变量的形式,扔到prototype的闭包中;公有函数则以返回的形式暴露在外面。 function People() {};People.prototype = (f...原创 2012-11-22 16:11:03 · 134 阅读 · 0 评论 -
js实现滚动条到底自动加载图片
之前Google的图片搜索结果界面提供了一个功能,即滚动条滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的,避免来回翻页的繁琐,让搜索结果以增量形式展现。所以也自己仿造了一个。功能是基于JQuery的。下面是代码。 $(window).scroll(function() { var o = $('#pincontainer'); ...原创 2011-03-30 19:52:18 · 463 阅读 · 0 评论 -
【Frontend Knowlodge Chart】 学习之安全相关
安全相关考查前端及系统安全方面的知识,需要对各种攻击手段和防范措施有基本的了解。知识点HTML转义符号、脚本转义符号。 参见百度百科:http://baike.baidu.com/view/73.htm常见的XSS漏洞,及其避免方式。Xss(跨站脚本攻击),简单来说,就是让不支持富文本的区域支持了富文本的执行,例如blog的标题是不支持富文本的,但由于页面显示时没去...原创 2011-10-20 19:54:28 · 141 阅读 · 0 评论 -
【Frontend Knowlodge Chart】 学习之HTTP协议
HTTP协议 考查HTTP协议的认知程度和基本知识。知识点HTTP协议的概念,HTTP请求、响应的组成。常见HTTP Method表达的意思,不仅仅是GET和POSTGET: 请求指定的页面信息,并返回实体主体。HEAD: 只请求页面的首部。POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。PUT: 从客户端向服务器传送的数据取代指定的文...原创 2011-10-20 19:53:10 · 149 阅读 · 0 评论 -
【转】Frontend Knowlodge Chart
转一个牛人总结的前端知识框架图 http://www.otakustay.com/wp-content/uploads/2011/03/fe-knowledge-chart.htm 今儿开始,决定一条一条的过筛子,不然,妄称FE啊!!! ...原创 2011-10-17 16:21:32 · 88 阅读 · 0 评论 -
Google的这个logo设计为什么看着有点牵强呢?
不过从布朗的作品里面能找到相似的形状也很不容易了,哈哈。原创 2011-02-19 15:52:35 · 101 阅读 · 0 评论 -
推荐一个在线的js压缩和解压网站
http://jsbeautifier.org/原创 2011-02-19 15:45:07 · 147 阅读 · 0 评论 -
CSS3实现红心动态变化效果
情人节降至,用CSS3做个红心,送给那个我想见见不到的人。。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Ge原创 2011-02-13 19:00:14 · 607 阅读 · 0 评论 -
如何解决IE,FF的div宽度兼容问题?
记得n久以前,引了别的大侠的一篇FF,IEdiv宽度兼容方面的文章,结果自己不求甚解,读文儿读半句,结果就是使用一个巨愚蠢的方法解决一个简单的问题使用了好久。 不多说了,这个兼容问题很常见,就是width,padding,margin之间的那点事。 习惯那我这样裸写(所谓裸写,就是html头不加!DOCTYPE做限制)html代码的同学大概都知道,IE和FF处理这...原创 2011-01-29 18:40:12 · 174 阅读 · 0 评论 -
来点基础的——td设置固定宽度后,会自动拉伸吗?
这是一道看似很简单,但是很考察html基础的笔试题。面试回来后,赶紧测了 一下,发现答案是:不会。于是博主的变态好奇心泛滥了,开始排列组合。 下面代码是各种宽度组合,有符合我的逻辑的,有诡异不可控的。感兴趣的同学运行一下看看吧。 看代码:<HTML><HEAD><style type="text/css">tab...原创 2011-01-29 14:48:51 · 422 阅读 · 1 评论 -
用事实说话---看看事件冒泡
直入正题,看看下面的代码: <HTML><HEAD><style type="text/css">#outer{ display:block; width:200px; height:40px; background-color:green;}#inner{ display:block; ...原创 2011-01-29 00:24:19 · 93 阅读 · 0 评论 -
浏览器脚本兼容总结(持续更新)
笔记而已。。。 1.日期函数取年号var date = new Date();var year = date.getYear();IE:当当前年号>2000时,直接返回当前年号。如2011,返回2011;当当年年号<=2000时,返回年号=当前年号-1900FF:返回年号=当前年号-1900兼容解决:使用getFullYear()或getUTCYear();...原创 2011-01-22 19:48:17 · 158 阅读 · 0 评论 -
为什么IE取screen.width不准确?
前几日做一个根据显示器分辨率动态分配每行图片个数的功能时碰到题目中的问题。出现此问题应满足以下条件: 1. 使用IE浏览器。2. 使用双显示器。 我的作案条件: 1. 主显示器设为我的笔记本显示器(1280*800)。2. 第二显示器分辨率(1680*1050)。3. 在第二显示器中打开网页。 结果:...原创 2011-03-30 20:04:41 · 542 阅读 · 0 评论 -
我大意了大意了~ 360浏览器的js标准还挺高的!!
今天用360浏览器测一个网页,其中一个js文件莫名其妙的没有任何执行效果。FF,IE7,8都没问题。浏览了一下代码,觉得没什么问题。无奈之下,换了个js编辑器,结果赫然出现两个红叉叉。原来是有两个json对象的写法不标准,最后一个属性值后面多加了“,”。果断删掉,重新运行,世界恢复平静了。。。。 前车之鉴啊,无论浏览器怎么智能,代码书写还是要保证标准才是正道。...原创 2011-04-06 14:06:17 · 102 阅读 · 0 评论 -
阶段性总结。。。
自己的空间,不说废话了。。。 1. 通过配置apache服务器的httpd-vhosts.conf文件完成不同域名之间、一级域名到二级域名的跳转,参见:http://blog.sina.com.cn/s/blog_5cdc071b0100c4ij.html 2. 通过修改ci(codeigniter)的routes.php文件实现url的RESTful化,如,将 xxx.yyy.c...原创 2012-05-16 17:29:04 · 77 阅读 · 0 评论 -
一个让以各种类型元素为容器的“按钮”都文字居中的方法
最近在做一个Button控件,这个控件不仅限于使用<button>标签做容器,还允许使用<span><div>设置<h1>这样的标签。但是,对容器类型的大容忍度的代价就是要协调好这些容器在不同浏览器下的不同表现。下面总结下需要处理的兼容问题: 1. <= IE7版本的浏览器,不支持box-sizing属性的设置,且,but...原创 2013-06-29 13:05:14 · 295 阅读 · 0 评论 -
LESS —— 动态样式语言 学习纪要
学习LESS源于一次分享的要求。之前一直没有使用,是因为使用这种以“敏捷开发”为目标而诞生的语言在一开始总是需要一些时间来变换思维,以及随之而来的“如何让CSS也具有结构性”的思考负担。其实这些思考都是应该有的,只是在项目时间比较紧的时候,往往更希望通过“加快打字速度”来提高效率。。。。 言归正传。。。LESS的语法和使用在中国社区已经描述的很清楚了,所以我只从自己学习使用的角度记录些需要...原创 2012-08-30 18:54:02 · 177 阅读 · 0 评论 -
关于CSS Selector的优先级
用CSS这么些年,从来没从算法级别考虑过它的优先级原理,只是凭经验记住类似“id最大,class其次”这种tip。今儿看到一篇讲css优先级算法的文章,豁然开朗,引过来,记录一下。 其实CSS的算法就是下面这张图, 解释一下: CSS中主要有 style, #, .,tag,四种 selector 。按照顺序分别占据*,*,*,*的第1,2,3,4个位置。将一串...原创 2011-05-16 15:27:30 · 303 阅读 · 0 评论 -
javascript,php文件上传详解
今儿说点儿基础但是蛮重要的前端技术——使用file input实现文件上传。 话说很久以前,我一直以为鼠标在点击file input,弹出dialog,选择文件点”打开“以后,文件就自动上传了的,现在终于知道,自己太傻太天真了。操作系统才不会自动帮你做那个事情捏~ 今天跟踪了下js执行的流程,知道了真正执行上传动作之前在本地客户端到底完成了哪些动作。 当点击...原创 2011-04-29 19:20:58 · 162 阅读 · 0 评论 -
IE6下left绝对定位诡异错误
今天开发自己的一个小网站时出现一个诡异的错误:目标div明明设置了“position:absolute;left:0"的css样式,但是页面在IE6下显示出来,该div莫名的向右偏移了n多px,败家IE6没有办法监测dom,所以我只能猜。这个瞎猫碰死耗子的过程我就不描述了,只说结果: 原因:绝对定位的div的外部父div因为没有设置高度,在IE6下默认成0,且不会因...原创 2011-04-29 01:44:17 · 146 阅读 · 0 评论 -
上传图片一直不变的问题 | IE的file无法手动置空
今天在开发一个图片上传控件的时候,发现在IE8下上传一张图片后,接着再上传一张,居然显示的是之前的那张图片。造成这个问题的原因其实很简单: 我用uid+type作为后台存储图片的新名字,也就是,每个user只保存一张图片,这样,每次上传后,图片的src其实都是一样的。浏览器会把相同src的图片自动缓存。因此,虽然后台的图片已经更新,但是浏览器确实从缓存中读出来的,因此一直...原创 2011-11-19 04:15:08 · 188 阅读 · 0 评论 -
做一个资源加载进度条
最近在开发一个工具类的网站,网站的背景和各模块的构建都需要加载很多图片资源。网速快得情况下还好,但是网速稍微慢一些,就会出现页面上短暂的CSS混乱或者图片空白的状况,使得用户体验相当的不好。所以就想到了使用一个资源加载进度条,在完成这些图片加载之后,再像用户显示界面。完成这个功能需要掌握如下key: 如何为css中的背景图设置缓存:其实很简单,只要缓存那张图片就可以了,也就是创建一个...原创 2011-11-14 15:51:01 · 182 阅读 · 0 评论 -
CSS学习笔记
使用CSS有些年头了,但是很惭愧从来没有系统的看过一本书,基本都是“问题和需求”驱动的学习。最近比较闲,搞本《CSS权威指南》来看看,把一些之前忽略的问题总结一下,留待后用。 引言 1. CSS的意义: 在保持HTML结构化的同时丰富页面效果;缩减文件大小 出于这个意义,在css出现后,我们在书写html代码时,应该尽量避免使用样式标签,如<b&...原创 2012-07-09 22:35:09 · 95 阅读 · 0 评论 -
推荐个学WEBGL的网站
http://learningwebgl.com/blog/?p=507原创 2011-04-12 17:59:19 · 194 阅读 · 0 评论 -
【转】浅谈跨域WEB攻击
转自http://www.80sec.com/cross_domain_attack.htmlEMail: rayh4c#80sec.comSite: http://www.80sec.comDate: 2011-04-07From: http://www.80sec.com0×00 前言一直想说说跨域web攻击这一概念,先前积累了一些案例和经验,所以想写这么一篇文档让大家了解...原创 2011-04-08 17:54:13 · 221 阅读 · 0 评论 -
JavaScript实现动态时间效果
首先说明JavaScript日期相关的一些操作。1.创建日期对象 var dateObj = new Date()//返回当前系统时间,Thu Jan 20 2011 23:25:24GMT+08002.获取时针数字 dateObj.getHours() // 23 3.获取分针数字 dateObj.getMinutes() //25 4.获...原创 2011-01-21 00:28:08 · 318 阅读 · 0 评论 -
CSS布局:两列,左边宽度自适应,右边宽度固定200px
这是百度的一道笔试题,网上的答案相当统一的只有一个。但是我本人不是很喜欢使用position:absolute这种属性,所以自己重新写了一个。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Doc...原创 2011-01-20 22:58:13 · 1422 阅读 · 0 评论 -
JavaScript精炼---类(class)、构造函数(constructor)、原型(prototype)
类 Class类的概念应该是面向对象语言的一个特色,但是JavaScript并不像Java,C++等高级语言那样拥有正式的类,而是多数通过构造器以及原型方式来仿造实现。在讨论构造器和原型方法前,我可以看看一种叫做“工厂方式”的仿造方法。 function start() { alert("Bang!!");} function createCar(color, ti...2010-03-12 01:44:38 · 977 阅读 · 0 评论 -
【转】Firefox下iframe的onload事件有可能无法触发 作者:zhanglili
Firefox下,已经load的document,重新open再write一个iframe,则这个iframe的onload不会执行。重现步骤在页面中放置一个iframe,并注册一个onload处理函数。在该处理函数中,打开iframe的文档流。向文档流使用document.write写入一个iframe,这个iframe包含一个onload属性。查看onload的处理...原创 2011-05-31 14:29:12 · 692 阅读 · 0 评论 -
避免function的循环引用
循环引用 window.onload = function(){ var el = get(); el.onclick = function(){ } //循环引用: ao->el->function->ao //1. el = null; //2. 不持有dom, el.onclick 改成 get()....原创 2011-05-26 16:44:50 · 116 阅读 · 0 评论 -
如何获取一个dom元素的绝对位置
应用场景:鼠标滑过某元素时,需要弹出一个信息标签,标签的位置要根据滑过元素的位置而定。 难点:目标元素并不一定是absolute的,因此不能简单的通过top,left这种属性获取。元素可能包裹在n个父元素内,需要把这些因素都考虑进去。 解决思路:先获取该元素的offsetLeft和offsetTop,然后取它的offsetParent,并向外循环,累加这些left和...原创 2011-05-18 12:05:56 · 2024 阅读 · 0 评论 -
如何阻止Firefox缓存Input中输入值
我真的是老了,这么简单的东西,居然也忘。Ok,我记在这里,总不会丢了。Firefox一般会缓存input组件中的输入值,以至页面刷新以后原有输入值仍保留在输入框内。有些时候,我们并不需要这种效果,可以通过两种方式阻止缓存。(一) 在form中增加 autocomplete="off" 属性(二) 在input中增加 autocomplete="off" 属性...原创 2010-10-11 23:09:25 · 187 阅读 · 0 评论 -
JavaScript精炼——functions中的“this”
首先我们需要知道,function的invoke方式主要有三种:1、单纯调用 2、作为某对象的method被调用 3、apply()和call()调用。针对三种不同的invoke方式,"this"拥有不同的指向:当function被作为单纯的function启动时,那么“this”指向的是global object;当function是某个object的method,并由该object...原创 2010-03-05 23:40:33 · 125 阅读 · 0 评论 -
JavaScript精炼——Global Object & Call Object
Global Object 当JavaScript解释器启动时,首先执行的动作是创建一个全局对象(global object),这个对象的属性(property)就是程序的全局变量,解释程序会为该对象预定义一些属性(如Infinity、parseInt等),用户则可通过定义变量来添加属性。 在代码顶层,可以用"this"引用这个全局对象。 var t...原创 2010-03-05 11:22:31 · 125 阅读 · 0 评论 -
Javascript精炼---Functions作用域及闭包
一、作用域(Scope)1、scope chain 每个JavaScript执行环境(某教程对于“执行环境”的解释是:Js解释器每次执行一个function时,就会为该function创建一个新的执行环境。)都关联一个scope chain。scope chain是由一组对象组成的链表,当Js代码需要查找变量x的值时,会首先从此链表的第一个对象查起,如果该对象含有名为x的属性,则...2010-03-04 11:59:11 · 131 阅读 · 0 评论 -
专门针对IE7下的hack方法
IE浏览器在页面布局上与其它浏览器经常会有很明显的差别,比如两个div之间的间距。 在IE7发布以前,我们处理firefox,google chrome以及IE的这些布局上的兼容性的时候,仅使用!important就可以了,但是IE7修正了IE6以及之前版本的这个弊端,转而支持了该属性,因此,仅使用!important就无法达到某些兼容目的,此时有人会说,可以使用*htm...2010-02-28 13:24:51 · 116 阅读 · 0 评论 -
JavaScript学习笔记
1、JavaScript does not support multidimensional arrays,except as arrays of arrays.2、JavaScript is an untyped language, the elements of an array do not all need to be of the same type, as they do in...原创 2010-02-28 13:17:45 · 139 阅读 · 0 评论 -
如何使按钮和文字排在一行且对齐(CSS之display:inline-block的妙用)
我们在开发页面的时候添加"按钮"是必不可少的,而一个按钮旁边往往不一定都是另一个按钮,还可能是一串文字。完成这一简单的效果却要思考很多问题。 1. 按钮和文字排在一行的解决方案2. 按钮中文字与外边文字底部自动对齐的解决方案 对于问题1,我们通常选择的方法是将button 和文字分别置于一个<span>中。因为<span>在未设置 display:...原创 2010-08-30 16:59:21 · 8296 阅读 · 0 评论 -
JavaScript精炼---typeof与instanceof
typeof 使用方法:typeof(i) 返回值: primitive型: "number", "string", "boolean" arrays, null, String, Number, Boolean, Date, RegExp, objects, all client-side objects: "object" function: "fun...2010-03-14 22:52:10 · 54 阅读 · 0 评论 -
CSS中!important的作用
!important这个属性属于CSS规范,功能是让用户自己设置被执行语句的优先级。一般来讲,在CSS中,如果在同一个css块中写下两个同样的属性,那么其实是按照最下面的来执行,比如:.home { margin-left:20px; margin-left:40px;} 那么,执行的时候是按照40px做处理的。但如果改为:.home { margin...2010-03-22 13:06:16 · 84 阅读 · 0 评论