Dayday up ---- python Day16
页面布局:
主站:
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
后台管理布局：
position:
fiexd -- 永远固定在窗口的某个位置
relative -- 单独无意义
absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了
后台布局例子:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./back_1.css"/> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> <!-- link:css --> </head> <body> <div class="page_header"> <div class="left logo"> <img src="./chafing_cook02.jpg" alt="logo" style="height:48px;width:48px;border-radius: 50%;"> </div> <div class="user right"> <a href="#" class="a"> <img src="./22.jpg" alt="头像" /> </a> <div class="b"> <a href="#">我的资料</a> <a href="#">注销</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span class="message">5 </span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> </div> <div class="page_content"> <div class="menu left"></div> <div class="content left"> <div> <p style="margin: 0;">您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> <p>您好</p> </div> </div> </div> </body> </html>
body{ margin: 0; } .left{ float: left; } .right{ float: right; } .page_header{ height: 48px; background-color: #2459a2; line-height: 48px; color: white; } .page_header .logo{ width: 200px; background-color: #204982; text-align: center; } .page_header .user{ margin-right: 60px; height: 48px; padding: 0 20px; width: 60px; } .page_header .user:hover{ background-color: #204982; } .page_header .user{ position: relative; } .page_header .user .a img{ height: 40px; width: 40px; margin-top: 4px; border-radius: 50%; /*把图片变成圆形*/ } .page_header .user .b{ z-index: 10; position: absolute; top: 48px; right: 0; background-color: white; color: black; width: 160px; font-size: 14px; line-height: 30px; display: block; display: none; } .page_header .user .b a{ text-decoration: none; display: block; padding: 5px; color: black; } .page_header .user .b a:hover{ background-color: #dddddd; } .page_header .user:hover .b{ display: block; } .page_content .menu{ width: 200px; background-color: #dddddd; position: absolute; top: 48px; left: 0; bottom: 0; } .page_content .content{ z-index: 9; position: absolute; top: 48px; left: 200px; right: 0; bottom: 0; overflow: auto; background-color: #2980B9; } .page_header .icons{ padding: 0 20px; } .page_header .icons:hover{ background-color: #204982; } .page_header .icons .message{ border-radius: 50%; display: inline-block; background-color: red; font-size: 12px; line-height: 1px; padding: 8px 6px; }
Javascript
1、for 循环
for(var item in [11,22,33]){
console.log(item);
continue;
}
var arra = [11,22,32,3]
for(var i=0;i<arra.lenght;i=i+1){
break;
}
while(条件){
}
2、条件语句
if(){
}else if(){
}else{}
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
3、函数
1) 普通函数
function func(){
}
2) 匿名函数 (没有名字的函数)
setInterval(function(){
console.log(123);
},5000)
3) 自执行函数
创建函数并且自动执行
(function(arg){console.log(arg);})(2)
4、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
5、转义
客户端将数据转义后，保存在cookie里面 ----> 服务器
decodeURI() URI 中未转义的字符
decodeURIComponent() URI组件中的未转义字符
encodeURI() URI中的转移字符
encodeURIComponent() 转义URI组件中的字符
6、eval
python:
val = eval(表达式)
exec(执行代码)
JavaScript:
js里面的eval 功能是python eval和exec的集合
7、时间
8、作用域
1) 以函数作为作用域
其他语言: 以代码块作为作用域
python: 以函数作为作用域
javascript: 以函数作为作用域
2) 函数的作用域在函数未被调用之前，已经创建
function func(){
if(1==1){
var name='aaa'
}
console.log(name)
}
func()
3) 函数的作用域链,并且也是在被调用之前创建
name = 'cc'
function func(){
// var name = 'bb';
function inner(){
// var name = 'aa';
console.log(name);
}
inner()
}
func()
or
name = 'cc';
function func(){
var name = 'bb';
function inner(){
// var name = 'aa';
console.log(name);
}
return inner;
}
var ret = func();
ret()
or
name = "aa"
function func(){
var name = "bb";
// name = "aa" ---> "bb"
function inner(){
console.log(name)
}
// 不调用函数就不执行
var name = "cc"
// name = "bb" ---> "cc"
return inner
}
var ret = func()
ret()
4) 函数内局部变量声明提前
function func(){
console.log(name);
var name = "alex";
}
func()
// 返回 undefined
// 函数在执行的时候，会先读取函数中的变量名但是不读取值,var name;
9、javascript 面向对象
function Foo(n){
this.name=n;
console.log(this.name)
}
var obj = new Foo('we');
// this 代指对象 好比python中的self
// 创建对象时,new 函数()
or
function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name)
}
}
var obj1 = new Foo('we')
obj1.name
obj1.sayName()
以上代码的原型
function Foo(n){
this.name=n;
}
// Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
}
obj1 = new Foo('we');
obj1.sayName()
obj2 = new Foo('wee');
obj2.sayName()
DOM
1、查找
直接查找
间接查找
查找操作:
innerText 仅文本
innerHTML 全内容
value
input value获取当前标签中的值
select 获取选中的value值（selectedIndex）
textarea value获取当前标签中的值
搜索框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="width: 600px;margin: 0 auto;"> <input id='il' type="text" onfocus="Focus();" onblur="Blur();" value="请输入关键字"> </div> <!-- onfocus 事件在对象获得焦点时发生 --> <!-- onblur 事件会在对象失去焦点时发生 --> <!-- 也可以使用placeholder="请输入关键字"来实现,但是这是最新的浏览器,可能不支持以前的 --> <script> function Focus(){ var tag = document.getElementById("il"); var val = tag.value; if (val == "请输入关键字"){ tag.value = ""; } } function Blur(){ var tag = document.getElementById("il"); var val = tag.value; if(val.length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html>
2、操作
样式操作
className
classList
classList.add
classList.remove
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
例:
属性操作
attributes 查看属性
setAttribute 设置属性
getAttribute 查看某个属性的值
removeAttribute 删除某个属性
例: 
创建标签并添加到HTML 中
2种方式:
1、字符串形式
2、对象的方式
方式1:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" onclick="AddEle();" value="+" /> <div id="il"> <p><input type="text" /></p> </div> <script> function AddEle(){ // 创建一个标签 // 将标签添加到il里面 var tag = "<p><input type='text'/></p>" document.getElementById('il').insertAdjacentHTML("beforeEnd",tag); // 注意: 第一个参数只能是 'beforeBegin','afterBegin','beforeEnd','afterEnd' } </script> </body> </html>
方式2:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" onclick="AddEle();" value="+" /> <div id="il"> <p><input type="text" /></p> </div> <script> function AddEle2(){ // 创建一个标签 // 将标签添加到il里面 var tag = document.createElement('input'); tag.setAttribute('type','text'); tag.style.fontSize='16px'; tag.style.color='red'; var p =document.createElement('p'); p.appendChild(tag); } </script> </body> </html>
提交表单(任何标签通过DOM都可以提交表单)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id='f1' action="http://www.baidu.com"> <input type="text" /> <input type="submit" value="提交"/> <!-- 提交方式1 --> <a onclick="submitForm();">提交吧</a> <!-- 提交方式2 --> </form> <script> function submitForm(){ document.getElementById('f1').submit() } </script> </body> </html>
其他:
console.log() 输出框
alert 弹出框
var v = confirm(信息) v:true false 确认框
location.href 获取URL
location.href = "" # 重定向，跳转
location.reload() # 页面刷新
location.href = location.href < === > location.reload()
var o1 = setInterval(function(){}, 5000);
clearInterval(o1);
var o2 = setTimeout(function(){}, 50000);
clearTimeout(o2);
var obj = setInterval(function(){
}, 5000)
clearInterval(obj);
实例1(提示信息,获取url):
<body>
<form id='f1' action="http://www.baidu.com">
<input type="button" onclick="confirmalert();" value="+" />
<input type="button" onclick="geturl();" value="get" />
</form>
<script>
function confirmalert(){
var v = confirm('真的要删除吗?');
alert(v);
}
function geturl(){
var u = location.href;
console.log(u);
}
</script>
</body>
实例2(定时器)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="status"></div>
<input type="button" value="删除" onclick="DeleteEle();" />
<script>
function DeleteEle(){
document.getElementById('status').innerText='已删除';
setTimeout(function(){
document.getElementById('status').innerText="";
}, 5000);
}
// 定时器, 一直执行
var obj = setInterval(function(){
console.log(1);
clearInterval(obj);
}, 1000)
// 定时器, 只执行一次
setTimeout(function(){
console.log('timeout');
},5000)
</script>
</body>
</html>
事件:
onclick,onblur,onfocus,onmouseover,onmouserout,ondblclick
浙公网安备 33010602011771号