day16--HTML、CSS、JavaScript总结
HTML
一大堆的标签:块级、行内
CSS
position
background
text-align
padding
font-size
background-image
z-index
opacity
float(clear:both)
line-height
border
color
display
补充:页面布局
JavaScript
6.for循环
for (var item in [11,22,33,44]){
console.log(item)
}
for (var i = 0;i<arra.length;i=i+1){
break;}
while(条件){}
7.条件语句
if(条件){} else if(条件){结果} else{结果}
switch(name){case:"1|:console.log(123)
break;
case:"2":console.log(456);
default:console.log(789);}
8.函数
function func(arg){
}
普通函数
function func(){
}
匿名函数:
setInterval(function(){},5000)
自执行函数:
function func(){}
(function(arg){
console.log(arg);
})() #自执行函数,自动执行函数
自执行函数就是函数创建完毕之后,整体括起来,在外面加上一个(),就能够自动执行(def func():print(66666))()自动触发执行
序列化和饭序列化
JSON.stringify(obj) #把对象转化为字符串 obj = [1,2,3,4,5] con = JSON.stringify(obj) >: "[1,2,3,4,5]"
JSON.parse(obj) #把字符串对象转换为原有形式,如列表,字典形式
10、转义
客户端(cookie) =》 服务器端
转义之后保存到硬盘上,保存用户登录状态,保存到本地cookie中,需要转义。
将数据经过转义后,保存在cookie中
encodeURI() #转义字符,将中文转换为,转义后的URL地址
encodeURIComponent( ) 转义URI组件中的字符
decodeURI() #进行转义,把转换后的URL进行解码
decodeURIComponent( ) URI组件中的未转义字符
11.eval
JavaScript
eval()
12.时间
Date类
var d = new Date()
13.作用域
JavaScript:以函数作为作用域
function func(){
if(1==1){var name="alex";
}
console.log(name);
}
func()
=================================1、以函数作为作用域=====================================
=================================2、函数的作用域在函数未被调用之前,已经创建================
=================================3、函数的作用域存在作用域链,并且也是在被调用之前创建=======
JavaScript的作用域是函数级别的,以函数块为作用域,从内层开始查找作用域。
function func(){
var xo = "eric";
function inner(){
console.log(xo);
}
var xo = "tony"
return inner;
}
var ret = func()
ret()
执行结果是“tony",为什么呢?因为内层作用域没有执行,下面"tony"替换了"eric",最后调用的时候,"eric"已经被修改为"tony"。
14.JavaScript面向对象
function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
}
var obj = new Foo("we");
a.this带指对象(python self)
b.创建对象时,new函数()
DOM
间接查找
文件内容操作:
innerText #仅获取文本
innerHTML #获取全部内容
value #input标签中的value值,能够设置
value #select标签中的<option value="n">值也能够修改,变换选择的选项
selectedIndex #select中的索引值
CSS样式
className
classList.add
classList.remove
obj.style.fontsize="16px" #修改标签中的样式,给style添加属性
属性操作
setAttribute(属性名,值) #给属性设置值
removeAttribute(属性值) #删除属性值
getAttribute(属性名) #获取属性
创建标签,并添加到HTML中
提交表单
document.getElementById("f1").submit()
其他:
console.log() alert confirm(信息) v:true false
location.href 获取当前网页的url location.href="url|" 跳转到某个网页
setInterval(函数,时间) #定时器,一直在执行中。
clearInterval(obj); 取消定时器
setTimeout(函数,时间) 定时器只执行一次
clearInterval(obj) 清除定时器
事件:
行为 样式 结构 相分离的页面?
js css html
绑定事件两种方式:
a.直接标签绑定,onclick="xxxx();"
b.先获取Dom对象,然后进行绑定
document.getElementById("xx").onfoucs
document.getElementById("xx").onfoucs
this,当前触发事件的标签
a.第一种绑定方式
<input id="i1" type="button" onclick="ClickOn(this)">
function.ClickOn(self){
//self 当前点击的标签
}
b.第二种绑定方式
<input id="i1" type=button">
document.getElementById("i1").onclick = function(){
//this 带指当前点击的标签
}