前端笔记杂谈

JS

1.对于原型而言,只要构造函数才有prototype属性,而构造函数的实例是没有该属性的,也就是说console.log(a1.prototype)输出的是undefined.

2.每一个函数的prototype属性指向的对象都包含唯一一个不可枚举属性constructor,constructor又指向了它所在的构造函数。每一个构造函数的实例都会继承这个constructor。

3.新定义prototype对象的话,该prototype对象中的constructor就会指向别的构造函数(如下),此时的constructor指向的就是object

A.prototype={

getName:function(){return this.name}

}

修改这个问题的方法就是,再给这个prototype显示的添加上constructor:A

4.js的解析过程分为两个阶段:预编译期和执行期

预编译的时候,会先将声明式函数进行处理,同时也进行变量的声明,将其赋为undefined。按照代码块(<script>)从上到下分别进行编译,所以下面的代码块可以引用上面代码块的变量。

若代码块出现错误,则会跳过该代码块剩下的代码,进入下一个代码块。

5.因为全局变量会在作用域链的最后得到访问,效率较慢,同时又容易产生污染,所以尽量避免使用全局变量。

6.对于canvas而言,画布中的图形不会超过canvas的范围。

7.闭包:A函数可以访问B函数中的变量。但闭包使用过多,B函数中的变量会一直保存不会释放回收,会严重消耗内存,影响性能。

8.js中没有块级作用域的概念。所以

for(var i=0;i<10;i++){

alert(i);

}

alert(i);      //11

之后,i还是存在的。

9.alert(p1 instanceof Person)                    //判断p1是否是Person的实例

delete p1.name                                    //删除p1的name属性

alert(‘name‘ in p1)                               //判断name属性是否在p1中

var arr=Object.keys(p1)                      //得到对象的所有属性,返回一个数组

CSS

1.css hack主要针对于IE6/7,

选择器hack:   *html .selector{}     //IE6

*+html .selector{}   //IE 7

属性hack:     .header{_width:100px;}     //IE6

.header{*+width:100px;}   //IE7

2.clientHeight=topPadding+bottomPadding+height(可看到的区域)-scrollbar.height

offsetHeight=clientHeight+滚动条+边框

scrollHeight=topPadding+bottomPadding+内容的高度(内容的实际高度)

3.clientTop:borderTop的厚度

scrollTop:被卷起的高度

offsetTop:相对于第一个使用了position的父元素上边框的距离

兼容性问题

1.textarea文本自适应

IE:textarea.onpropertychange=function(){

this.style.posHeight=this.scrollHeight;

}

FF: textarea.oninput=function(){

this.style.height=this.scrollHeight+‘px‘;

}

2.事件问题

function addEventListener(obj,type,handle){

if(obj.attachEvent){              //IE

obj.attachEvent(‘on‘+type,handle);

obj.attachEvent(‘on‘+type,stopEvent);

}else{                               //FF

obj.addEventListener(type,handle,false);

obj.addEventListener(type,stopEvent,false);

}

}

function stopEvent(Event){

var e=event||window.event;             //FF||IE

var srcEle=e.target||e.srcElement;    //FF||IE

var mx=e.pageX||e.x;                     //FF||IE

if(e.stopPropagation){                    //FF

e.stopPropagation();

}else{                                          //IE

e.cancelBubble=true;

}

}

3.父元素:

IE:ele.parentElement

IE,FF:ele.parentNode和parent.childNodes

4.在打开的子窗口刷新父窗口  window.opener.location.reload();

IE:ele.innerText

FF:ele.textContext

5.创建XMLHTTPRequest

if(window.XMLHTTPRequest){

req=new XMLHTTPRequest();

}else if(window.ActiveXObject){

req=new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

8.使用parent.childNodes时  ‘\n‘ 也会算作一个文本节点

9.图片预加载

function preLoadImg(src.callback){

var img=new Image();

img.src=src;

if(!!window.ActiveXObject){

img.onreadystatechange=function(){

if(this.readyState==‘complete‘){

callback();

}

}

}else{

img.onload=function(){

callback();

}

}

}

10.IE6没有position:fixed这一属性值

11.HTML5  localStorage

localStorage.clear();                 //清除localStorage的数据

for(var i=0;i<localStorage.length;i++){

var key=localStorage.key(i);

var value=localStorage.getItem(key);

}

将json文本作为键值存储在localStorage中,存储的信息量将大大提高

12.    HTML5 读取文件

var file=document.getElementById(‘file‘).files[0];

var reader=new FileReader();

reader.readAsDataURL(file);                            //readAsBinaryString,readAsText

reader.onload=function(){

result.innerHTML=this.result;

}

13.图片浮动时,下放会产生空隙,解决方案:对图片的属性设置 vertical-align:top;

时间: 2024-10-05 04:45:35

前端笔记杂谈的相关文章

前端笔记精彩博文周刊20150118期

下面是本期前端周刊了,欢迎关注我们的微博 @前端笔记网 或者我们的微信公众号 w3cmark_com. [行业资讯] 1.[用点]单身狗只能学学杜蕾斯的文案?还能买个安全套来照明呢 杜蕾斯的文案在2014年引发了一波又一波病毒式传播,几乎已经让“安全套”这个词不再敏感. 2.风口还是悬崖?互联网金融六模式在2015 如果说2013年底的时候仍然有很多企业和资本没有意识到这个风口,在刚刚过去的2014年可真是火力全开玩命投入.同时,在2014年第三季度,互联网金融的标杆产品余额宝第一次出现规模下降

前端笔记——如何控制表单控件中的disabled

0.前言 本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如何设置和读取disabled属性. [示例页面--代码] <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <meta charset="utf

前端笔记精彩博文周刊20141213期

又到周刊的时间啦,欢迎来到前端笔记推出的前端周刊,我们会把本周的精彩前端博文.行业资讯推送给大家,希望能及时得到最新资讯的童鞋可以关注我们的微博 @前端笔记网 或者我们的微信公众号 w3cmark_com. 下面是20141213期周刊,欢迎查阅~ [行业资讯] 1.二维码取代搜索框?可能这次张小龙真错了 喜欢乔布斯的互联网大佬不少,公之于众的便有雷军.丁磊.杨勃.黄章.张小龙等人,最像乔布斯的非张小龙莫属.四个字:产品感觉.能连续打磨出Foxmail.QQ邮箱和微信这三款经典产品,自然不是运气

移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法

笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了.或者同时

web前端笔记1

web1.0时代:(联合) web2.0时代:(互动) 互联网没有崩溃,比以往更加重要.更加注重用户的交互作用. web3.0时代:(技术革新.统一通信协议) 语义化实现.(发展阶段) web4.0(AI人工智能) web前端工程师: 侠义:html.css.js 实习生要求:

前端笔记六,级联样式单与CSS选择器(一)

在HTML文档<head>中使用<link/>元素来引入外部样式单 格式:<link type=“text/css” rel=“stylesheet href=“css样式的URL”> CSS的格式:Selector { property:value } 使用内部CSS样式定义的语法格式,在<head>中: <style type=“text/css”> 样式单文件定义 </style> 使用style属性更改元素外观,语法与CSS一

前端模块化杂谈

Teambition是一家追求卓越技术的公司,我们工程师都很Geek,我们使用了很多新潮的,开源的技术.同时我们也贡献了很多开源的项目.我们希望能够把一些技术经验分享给大家.于是有了这个「创作随笔」.废话休说,「创作随笔」第一弹,来自我们的前端工程师寸志,谈一谈他在前端模块化开发方面的一些感想. 在模块化方面,Node.js就显得游刃有余. 作为用户,我们把代码放到一个个JavaScript文件中,然后Node.js就有一套规则帮我们把这些代码组织起来,Node.js还有包的概 念,于是我们就可

【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件

首先大家国庆节快乐啊~~~ 这是我第一个在省外的国庆节,毕竟今年毕业了哇,奋斗的我们要加油~~~ 最近我会不断总结上一个WEB项目所用到的前端知识,和大家一起分享哈~~~ 言归正传,怎么画一条横线?我想到的有三种方法,但是各自样式不一,所以大家按需求来哦. 1.<hr />标签,对的,这个标签就代表一条横线,样式大概是这样的,如图(a与b之间哦): <html> <head></head> <body> <div>a</div&

JavaScript笔记杂谈篇(啥都有)

二维码缩放比例以43PX的倍数缩放最为标准. NuGet相关管理http://www.cnblogs.com/dudu/archive/2011/07/15/nuget.html 学习笔记: http://kb.cnblogs.com/page/143190/ 动态创建标记,给标记添加样式,class,等等   vardtProductName=$("<dt></dt>",{style:"text-overflow: ellipsis;overflow