1.manifest介绍界面:json格式
json:JavaScript Object Notation
包括两种结构:
key:value对:{{"A1":"value1","A2":"value2","A3":"value3"},{…},{…}}
值的有序集合 {"books":["book1","book2","book3"]}
value类型:字符串,数字,对象,数组,bool类型和null中的一种
json格式的数据可嵌套
2.DOM:document object model
DOM参阅:
http://www.ituring.com.cn/article/60188
http://www.w3school.com.cn/htmldom/
分为核心DOM,XML DOM和HTML DOM
HTML DOM的树状结构图:
每个文件有一个根元素<html>
每个根元素有两个子元素<head><body>
标签必须成对出现或者是自闭标签,嵌套关系必须明确
标签可以包含一些属性或者子节点,子节点可以是元素也可以是文本,如:
<img src="data:images/dog.png" />
<div>Hello World!</div><input type="text" id="stu_name" value="Billy" />
上面的input有type,id和value三个属性
type="text"表示是文本输出框
id="stu_name"表明给这个元素分配了一个名为stu_name的id
value="Billy"表示输入框的默认值为Billy
不同元素往往拥有不同的属性名,比如对于img
元素,通常会包含src
属性以指定所显示图片的地址,而input
元素往往会包含type
属性来描述输入框的类型。
js中有多种获取DOM元素的方法:
getElementById:通过id获取元素(HTML中元素的id唯一)
getElementsByName:通过name获取元素
getElementsByTagName:通过标签名获取元素
getElementsByClass:通过类名获取元素
后三种获得的是一个包含一个或多个元素的数组(必须是数组)
getAttribute:读取元素属性
setAttribute:添加或更改元素属性
removeAttribute:删除元素属性
var imgurl = document.getElementById('my_image').src;
document.getElementById('my_another_image').src = imgurl;
CSS的选择器:tagName,.className,#id
p {
width: 200px; //p标签的宽度为200px
}
.postlist {
width: 150px; //postlist类的元素宽为150px
}
#footer {
width: 100px; //id为footer的元素宽度为100px
}
CSS选择器还可以通过元素属性进行定位
input[type="text"]{
font-size:16px;
} //作用于所有文本输入框
3.跨域请求:通过XMLHttpRequest请求数据时禁止跨域
需要在Manifest的permissions属性中声明需要的权限
注意:阻塞函数与非阻塞函数
大多数API调用为非阻塞函数,因此要用回调函数传递结果
如:function httpRequest(url,callback)(url为传入网址,callback为处理传回数据的函数)
问题:传回的数据安全起见不能直接用innerHTML插入或eval执行
若将数据写入:使用innerText
若是json格式的数据:使用JSON.parse解析 ?
结合try-catch判定数据的格式 ?
4.常驻后台
注意:js的格式:函数除定义外,调用时记得加;
加入background域即可