1.页面布局

PosTion :fixed

Title

.left{float:left;

}.right{float:right;

}.head{height:58px;background-color:#3c3c3c;

}.head .fontsquarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.head .logosuqarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.nick .course{position:fixed;width:200px;background-color:#F22E00;left:0;top:58px;bottom:0;

}.nick .content{position:fixed;background-color:green;left:200px;right:0;top:58px;bottom:0;overflow:auto;

}

positon:absoluted

如果不加overflow的情况下 我们的 菜单和内容是一起滚动的

加了Overflow则会和fixed的情况一致

2.

.通过触击鼠标某位置就会在该处显示一个栏目

Title

.left{float:left;

}.right{float:right;

}.head{height:58px;background-color:#3c3c3c;

}.head .fontsquarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.head .logosuqarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.nick .course{position:absolute;width:200px;background-color:#F22E00;left:0;top:58px;bottom:0;z-index:9;

}.nick .content{position:absolute;background-color:green;left:200px;right:0;top:58px;bottom:0;

}.head .logosuqarl:hover{background-color:#dddddd;

}.head .logosuqarl .label{display:none;width:100px;text-align:center;z-index:10;position:absolute;top:58px;right:40px;background-color:#3c3c3c}.head .logosuqarl:hover .label{display:block;

}

3 .setInterval("func()",5000)

4.匿名函数：

function(){}

使用： setinterval(  function(arg){  console.log(arg);} ,5000)

5.自执行函数：

(function(arg){  console.log(arg);}) (1)  在编译的时候自动执行内部函数

6.javascript的序列化以及转义

1、序列化

JSON.stringify(obj)   序列化

JSON.parse(str)        反序列化

2、转义

decodeURI( )                   URl中未转义的字符

decodeURIComponent( )   URI组件中的未转义字符

encodeURI( )                   URI中的转义字符

encodeURIComponent( )   转义URI组件中的字符

escape( )                         对字符串转义

unescape( )                     给转义字符串解码

URIError                         由URl的编码和解码方法抛出

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

eval()

EvalError   执行字符串中的JavaScript代码

6.Javascript的面对对象

functionFoo(n)

{this.name=n;

}var obj1=new Foo("we");

我们在一个类调用函数的时候 引入了一个原型的概念

Foo.prototype={//创建一个匿名函数

"sayName":function(){

console.log(this.name)

}

}//调用的时候

obj1.sayName()

Dom补充

1.直接查找

var obj= document.getElementById(' i1 ')

2.间接查找

innnerText 仅文本

innerHTML 全内容

value

input value 获取当前标签的值

通过value可以更改select中的option选项 也可以更改其它含有内容的标签

3.实现一个小功能，以初级的写法

functionFocus()

{var tag=document.getElementById("i3");var val=tag.value;if(val=="请输入关键字")

{

tag.value="";

}

}functionBlur()

{var tag=document.getElementById("i3");var val=tag.value;if(val=="")

{

tag.value="请输入关键字";

}

}

4.样式操作

classList : classList.add / classList.remove

更改样式 ： obj.style.功能= “ 需要修改的内容”

为某个标签创建一个属性：obj1.setAttribute("value","d")/ 移除一个属性obj1.removeAttribute("value")

创建一个标签，将标签添加到另一个标签里面：

//将整个标签放进去

functionAddEle()

{var tag = '';

document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);

}

//将标签的类放进去 利用appendChildfunctionAddEle2()

{var tag =document.createElement('input');

tag.setAttribute("type",'text');

tag.style.fontSize="16px";

document.getElementById("i1").appendChild(tag)

}

利用其他标签进行提交！

提交

functionsubmitForm(){

document.getElementById("f1").submit();

}

alert(123) //消息提示 放在js中

confirm("内容") //确认框 正确返回true 错误返回false

location.href => 获取当前Url

location.href=url //跳转到某个url ，重定向

o1=setInterval(function(){},1000) //定时器每隔1000执行一次

clearInterval(o1);//取消

o2=setTimeour(function(){}.5000) //5秒后只执行一次

clearTimeout(o2);//取消

5.样式行为相分离的写法

var tag=document.getElementById("i3");if(tag.value=="请输入关键字")

{

tag.οnfοcus=function()

{this.value="";

}

}

总结：dom0写法的时候我们要使用this的时候必须现在标签里穿this作为形参，如果直接在js中调用那么就相当于this是一个全局变量windows 是没有效果的

6. 第三种绑定方式 dom2 :

obj.addEventListener("click",funciton(){ },false)；

obj.addEventListener("click",funciton(){ },false)；

这样我们就实现了一个对象可以绑定两种功能。

参数false是指事件模型中的冒泡模型

true 则是 捕捉模型

7.词法分析 学习根据这位老师

http://www.cnblogs.com/zingp/p/6102561.html