python学习之路7 前端学习3
1.页面布局
PosTion :fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .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; } </style> </head> <body style="margin: 0"> <div class="head"> <div class="fontsquarl left"> 我爱你中国 </div> <div class="logosuqarl right"> </div> </div> <div class="nick"> <div class="course left"> </div> <div class="content left"> <p>ok</p> <p>ok</p><p>ok</p> <p>ok</p> <p>ok</p> <p>ok</p> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> </div> </div> </body> </html>
positon:absoluted
如果不加overflow的情况下 我们的 菜单和内容是一起滚动的
加了Overflow则会和fixed的情况一致
2.
.通过触击鼠标某位置就会在该处显示一个栏目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .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; } </style> </head> <body style="margin: 0"> <div class="head"> <div class="fontsquarl left"> 我爱你中国 </div> <div class="logosuqarl right" style="position: relative"> <a href=""> <img src="logo.png" style="height: 40px;width:40px;margin-top: 4px;border-radius: 50% " > </a> <div class="label" >爱你中国</div> </div> </div> <div class="nick"> <div class="course left"> </div> <div class="content left"> <div style="background-color: green"> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> <p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p><p>ok</p> </div> </div> </div> </body> </html>
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的面对对象
function Foo(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.实现一个小功能，以初级的写法
<div class="head" >
<div id="i1" >我爱你中国</div>
<input id="i3" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字">
</div>
<script>
function Focus()
{
var tag=document.getElementById("i3");
var val=tag.value;
if(val=="请输入关键字")
{
tag.value="";
}
}
function Blur()
{
var tag=document.getElementById("i3");
var val=tag.value;
if(val=="")
{
tag.value="请输入关键字";
}
}
</script>
4.样式操作
classList : classList.add / classList.remove
更改样式 ： obj.style.功能= “ 需要修改的内容”
为某个标签创建一个属性：obj1.setAttribute("value","d")/ 移除一个属性obj1.removeAttribute("value")
创建一个标签，将标签添加到另一个标签里面：
<script>
//将整个标签放进去
function AddEle()
{
var tag = '<input type="text" />';
document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);
}
//将标签的类放进去 利用appendChild
function AddEle2()
{
var tag =document.createElement('input');
tag.setAttribute("type",'text');
tag.style.fontSize="16px";
document.getElementById("i1").appendChild(tag)
}
</script>
利用其他标签进行提交！
<body>
<form id="f1" action="..">
<a onclick="submitForm();">提交</a>
</form>
<script>
function submitForm(){
document.getElementById("f1").submit();
}
</script>
</body>
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.onfocus=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
