python 前端学习_python学习之路7 前端学习3

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;

}

我爱你中国

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

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;

}

我爱你中国

爱你中国

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

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