我的第一个chrome扩展（2）——基本知识

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="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域即可

 

posted on 2015-05-18 21:26  giddens lee  阅读(110)  评论(0)  编辑  收藏  举报