前端第一天开始，比较乱

resize:none;
vertical-align: middle; 
.clearfix:before,.clearfix:after{
  content:"";
  display: table;
}
.clearfix:after{
  clear: both;
}


.clearfix{
   _zoom: 1;      //css骇客
}
// 主色调  页面用到最多的颜色
.color{
   color： red;
}


alt+f2快捷用浏览器查看


http://bitbug.net   ico生成网站


id与那么特性


支持name特性的元素主要与表单、图像和框架


有关。


自定义折叠shift  ctrl+.


格式化代码 ctrl+alt+l


清除浮动：


clear: both  元素两边不允许出现浮动
额外标签法缺点：添加了很多无意义的标签，


不易于维护


单伪元素：after
after就是会在这个盒子的最后面生成一个空字


符串。  after撑开盒子


双伪元素：before after


overflow： hidden 触发bfc
bfc： 格式化上下文，w3c规定的一种独立渲染


区域


会阻止外边距折叠   可以承载浮动的元素  可


以阻止元素被浮动元素覆盖


bfc触发条件：float除了none以外的值  


overflow除了visible




清除浏览器缓存    ctrl+shift+


input中有一个属性跟value差不多，但它不占


位置。<input type="text" placeholder="


请输入"/>


**网页布局中，都是父盒子占位置，子盒子设


置多大都不会占位置，子盒子超出来都是飘着


的，不占位置，不会挤到下面的盒子


注意： 有时候js写在html之前会导致效果出不


来




构造函数： 实例属性，实例方法
function Box(name,age){
this.name=name;
this.age=age;
this.run=function(){};
}


原型：实现共享
Box.prototype.name='lee';
Box.prototype.age=100;
Box.prototype.run=function(){
  return this.name+this.age+" 运行";
}


var box1=new Box();






js部分


为什么要有javaScript？
1.在早期的时候，js是用来做客户端的校验。
2。异步和服务器交互（ajax） 页面特效（pc


端的网页效果和游戏） 移动端（移动web和app


）  服务端开发（nodejs） 


脚本语言：
编译型语言：c/c++ java c#


浏览器的组成：
user interface：用户界面
rendering engine：渲染引擎html css
javaScript interpreter： 解析javascript


javascript组成：
ECMAscript：定义javascript的语言规范
DOM
BOM




网页三剑客
html：结构  css：样式  js：行为
结构、样式、行为分离




输入输出语句：
alert（“”）；   document.write("");  


console.log(""); prompt(""); confirm


("");


注释：模块划分，解释 
//; /* */;<!-- -->;文档注释/** */


变量
直接量（字面量）：值是固定不变的，通过值


就能看出来内容


js一旦发生错误，下面的内容就不执行了




栈：空间较小，但是存取速度非常快，存基本


数据类型，存的是地址。
只要看到var，就是说在内存中挖一个坑。


堆：空间很大，但是存取速度比较慢，存复杂


数据类型


判断变量的数据类型：
typeof 值；


简单数据类型：Number String Boolean 


Undefined Null
复杂数据类型： Object Array Date


浮点数：计算机在计算小数的时候，会出现精


度丢失的问题。尽量不要用小数去计算


怎么取到最大值：console.log


(Number.MAX_VALUE);




判断是不是数字：isNaN（）


\t:制表符  打印4个空格


String与toString的区别


每拼一次字符串就会在内存中挖一个坑，而数


字类型拼再多次也就挖一个坑。因为数字类型


会把每一次的拼接相加，而字符串一直是拼接


装换成字符串方法：
String（）  toString（）  console.log


（23+‘’）;


转换成Boolean的两种方法：Boolean（）；（


！！‘str’）先取反得到布尔值，然后再还原


。




控制台：数值类型-蓝色   字符串-黑色  布尔


类型-蓝色 undefined-灰色 


undefined、null不能调用toString（）方法


，会报错。一般用的最多的是直接加个字符串


任何数除以0，得到infinity
任何数与0取模，得到NaN




对于逻辑运算符来说，仅仅是判断的时候，会


转换成布尔类型去判断，但是返回的时候，返


回的是原来的值。


短路运算符：
&&碰到false会短路，||碰到了true会短路，


如果短路了，直接返回第一个值，否则返回第


二个值


循环：
for循环  1，初始化表达式 2，条件判断， 3


，（自增、自减）循环后表达式 4，循环体    


 


断点调试：  sources 找到需要打断点的地方


，刷新。  F8：跳到下一个断点处，如果后面


没有断点，那么它会执行完程序    F10：让代


码一步一步执行。


监听的时候，一定要注意，不要监听表达式，


只监听变量。表达式会影响到变量，切记。


while： 不知道循环次数
do。。while 
var i = 1；
do{var result = prompt（"是不是？ y/n"）


;  i++}while(true);


如何定义一个数组：


构造函数定义数组：  var array = new 


Array（"如花","思域"）;              


conlose.log(array);   


数组的字面量就是带有中括号[]


稀疏数组：数组中含有未赋值的位置，数组不


连续。


数组的遍历：就是把数组中所有的值全部都取


一遍 console.log(arr[i]);


http://markdownpad.com/download/awesomi


um_v1.6.6_sdk_win.exe


对象：一个具有属性与方法的集合。
内建对象：数组，Math，Date……
宿主对象：由浏览器提供的预定义对象被称为


宿主对象（host object）。包括Form、Image


、Element…
另一种宿主对象ducument，它能获取网页上的


任何一个元素的信息。


与某个特定对象相关联的变量被称为这个对象


的属性；只能通过某个特定对象去调用的函数


被称为这个对象的方法。


1，用户定义对象 2，内建对象 3，宿主对象


getElementsByTagName方法返回一个对象数组


，每个对象分别对应着文档里有着给定标签的


一个元素。
getElementsByClassName方法只接受一个参数


，就是类名。


var shopping = document.getElementById


("purchases");
var items 


=shopping.getElementsByTagName("*");
这两条语句执行完毕后，items数组将只包含id


属性值是purchase的无序清单里的元素。


要指定多个类名，只要在字符串参数中用空格


分隔类名即可。 


document.getElementsByClassName


("important sale");  你会看到警告框中显


示1，表示只有一个元素匹配，因为只有一个元


素同时带有“important”和“sale”类名。


获取属性方法： 
var paras = 


document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
alert(paras[i].getAttribute("title"));}


设置属性方法：
var shopping = document.getElementById


("purchases");
shopping.setAttribute("title","a list 


of goods"); 获取id是purchase的元素，把这


个元素的title属性值设置为a list of goods


DOM的工作模式：先加载文档的静态内容，在动


态刷新，动态刷新不影响文档的静态内容。对


页面内容刷新却不需要在浏览器里刷新页面


事件处理函数的作用是，在特定事件发生时调


用特定的javascript代码。


函数：重复代码=垃圾代码=冗（rong）余代码
冗余代码的缺点：代码看起来很臃肿，维护起


来很麻烦。
函数就是可以封装一段重复性的代码，一次声


明，可以多次调用。


函数声明：function 函数名（【参数……】）


{函数体}
函数名一般都是用动词，变量名一般都是名词


。
函数调用其实用的就是小括号
函数为什么要有返回值：因为函数都有一个处


理结果，即返回值。


js里面没有重载（就是两个函数名一样），只


有覆盖，后面声明的函数会覆盖前面声明的函


数


判断是不是同一个地址可以用全等（===）


回调函数： 对于把函数当成参数进行传递


看到{}就是一个对象的字面量


键值对： 属性名：属性值


Object   {属性名：属性值……}
获取： obj["属性名"]




JSON  {“属性名”：属性值……}


构造函数： var sum = new Function


（"num1","num2","return num1 + num2"）;
构造函数可以接收任意数量的参数，但最后一


个参数始终被看成是函数体，而前面的参数则


枚举出了新函数的参数。
从技术角度讲，这是一个函数表达式。但是，


我们不推荐读者使用这种方法定义函数，因为


这种语法会导致解析两次代码（第一次是解析


常规的ECMAScript代码，第二次是解析传入构


造函数中的字符串），从而影响性能


注意：使用不带圆括号的函数名是访问函数指


针，而非调用函数。函数名只不过是指向一个


函数的指针，把函数名赋值给另外一个变量，


意思是说都指向同一个函数


注意：具有名字的函数表达式的函数名只能在


创建函数内部使用。想在外部使用的话只能调


用它前面的变量名+（）。


使用var或非对象内部的函数表达式内，可以访


问到存放当前函数的变量；在对象内部的不能


访问到。


因为函数作用域链的问题，采用var的是在外部


创建了一个fn变量，函数内部当然可以在内部


寻找不到fn后向上册作用域查找fn，而在创建


对象内部时，因为没有在函数作用域内创建fn


，所以无法访问到。


window.open(url,name,features)创建新的浏


览器窗口
window.open


(winURl,"popup","width=320,height=480")


;


注意：在对象内定义函数如 var o={fn：


function（）{...}}  也属于函数表达式


自执行函数与函数表达式规则相同




alert(sum(10,10));function sum


(num1,num2){return num1 + num2;}调用函


数在函数声明之前不会报错
alert(sum(10,10));var sum = function


(num1,num2){return num1 + num2;}调用函


数在函数表达式之前会报错


检测浏览器是否有这种方法的时候，方法名后


面不能加圆括号：if


(document.getElementById){}


如果this在全局范围就是window。如果在对象


内部就是指向这个对象。而闭包却在运行时指


向window的，因为闭包并不属于这个对象的属


性或方法




包含自我执行的匿名函数，就可以实现私有作


用域
例：function box(){
        (function(){
            for(var i = 0; i < 5; i++){
                alert(i);
            }
         })();
        alert(i);  //这里的i相当于没声明
       }
   box();




在引入外部脚本文件数量越少越好，尽量能合


并就合并


根据HTTP规范，浏览器每次从同一个域名中最


多只能同时下载两个文件。而在下载脚本期间


，浏览器不会下载其他任何文件，即使是来自


不同域名的文件也不会下载，所有其他资源都


要等脚本加载完毕后才能下载。


把所有<script>标签都放在文档的末尾，


</body>标记之前，就可以让页面变得更快。


addLoadEvent函数：
1.把现有的window.onload事件处理函数的值


存入变量oldonload.  2.如果在这个处理函数


上还没有绑定任何函数，就像平时那样把新函


数添加给它。 3. 如果在这个处理函数上已经


绑定了一些函数，就把新函数追加到现有指令


的末尾。


function addLoadEvent(func){
   var oldonload = window.onload;
   if(typeof window.onload != 


'function'){
   window.onload = func;
}else{
   window.onload = function(){
    oldonload();
   func();
}}}




nodeName属性总是返回一个大写字母的值，即


使元素在HTML文档里是小写字母


注意：不是所有人都是用鼠标，还要考虑键盘


onkeypress事件处理函数是专门用来处理键盘


事件的，按下键盘上任何一个按键都会触发


onkeypress事件
如果想让onkeypress事件与onclick事件触发


同样的行为，可以简单地把有关指令复制一份
(最好不要用onkeypress事件)：1.
links[i].onclick = function(){
return showPic(this) ? false : true;
}
links[i].onkeypress = function(){
return showPic(this) ? false : true;
}
2.
links[i].onkeypress = links[i].onclick;




添加一个元素节点分两步：1.创建一个新的元


素  2.把这个新元素插入节点树
document.createElement(nodeName);
parent.appendChild(child);


添加一个文本节点：
document.createTextNode(text);
元素节点.appendChild(文本节点);




闭包：
就是能够读取其他函数内部变量的函数。
用途：1.可以读取函数内部的变量 2。 让这些


变量的值始终保持在内存中


注意点：由于闭包会使得函数中的变量都被保


存在内存中，内存消耗很大，所以不能滥用闭


包，否则会造成网页的性能问题，在IE中可能


导致内存泄露。解决方法是，在退出函数之前


，将不使用的局部变量全部删除。         
闭包会在父函数外部，改变父函数内部变量的


值。所以，如果你把父函数当做对象使用，把


闭包当作它的公用方法，把内部变量当作它的


私有属性，这时一定要小心，不要随便改变父


函数内部变量的值。