补充2-CSDN博客

补充2

1.常用事件———重点
鼠标事件：
- onclick———单击
- ondbclick——双击
- onmousedown———按下
- onmouseover———-鼠标悬停
- onmouseup————鼠标松开
- onmouseout———–移出鼠标
- onmousemove———鼠标移动
- onkeydown————按下
- onkeyup————–松开
- onkeypress————长按
- onfocus————获得焦点
- onblur————失去焦点

onchange：当表中的输入项的值发生改变，如select元素
注：普通输入框的onchange事件必须同时满足“内容改变”和“失去焦点”。
onsubmit：表单被提交时使用（一般不使用，用button就好）
onload：一般用于body元素，指当页面所有元素加载完成—-把所用到的css/js/image全部加载完毕才能触发此事件。
onerror：可以用于body，img元素，当发生解析错误时会调用onerror处理方法。

2.DOM：分为三部分
（1）核心DOM：遍历DOM树，添加新节点，删除节点，修改节点。
（2）HTML DOM：以一种简便的方法访问DOM树。
（3）XML DOM：专用于操作XML文档。

3.HTML DOM———–重点&广泛应用
核心HTML与HTML DOM的区别：

4.几个比较特别的属性：HTML中，只要出现即代表生效：
在HTML DOM中都是boolean类型，需要赋值为true/false。
readonly<———>readOnly
disabled<———>disabled
checked<———>checked
selected<———>selected
multiple<———>multiple

5.如何在客户端存储数据：
（1）桌面应用：可以自由地在文件系统中存储数据文件
（2）web应用：出于安全考虑，使用文件系统是受限的，意味着通常情况下，只要浏览器一关闭，之前的浏览器记录/数据都会被清除掉。

HTML5高级特性：“本地存储”技术—–用于web应用在客户端文件系统中保存数据。
Cookie技术：也可以用于在web应用中在客户端文件系统中存储数据，比HTML5本地存储历史更悠久，目前浏览器兼容性更好些，但存储大小不能大于4kb，操作稍显复杂些，安全性不如本地存储。

6。Cookie—-HTTP协议规定的一门技术
（1）在服务器端生成的（可以使用动态代码/js代码）
（2）是一个又一个key/value对，都是字符串。
（3）只要再次重访特定的站点，浏览器会自动上传该站点之前保存的所有Cookie。
（4）浏览器只会把某个站点的所有cookie回传给该站点，而不会回传给其他站点。
（5）cookie的本质功能：在同一个站点的不同页面间传递数据。

使用JavaScript在当前客户端保存新的cookie：
- 简单的存取操作：document.cookie=’username=Darren’;（如果名称不存在则创建新的，如果存在，则修改名称对应的值。）

-读取操作：

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　
　　　　   //先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　
　　　　　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){ 
　　　　　　   c_start=c_start + c_name.length+1
            //最后这个+1其实就是表示"="号，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　
　　　　　　　　 //表示指定的开始索引的位置...是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))
　　　　　　　　//通过substring()得到了值。
　　　　　　} 
　　　　}
　　　　return ""
　　}

实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了

-设置cookie的有效期
document.cookie = “name=value;expires=date”;
上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

　var _date = new Date();
　　_date.setDate(_date.getDate()+30);
　　_date.toGMTString();

通过new生成一个Date的实例，得到当前的时间；
getDate()方法得到当前本地月份中的某一天，接着加上30就是我希望这个cookie能过在本地保存30天；
接着通过setDate()方法来设置时间；
最后用toGMTString()方法把Date对象转换为字符串，并返回结果

-cookie 路径

默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。
如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。例子如下：

document.cookie = "name=value;path=path"
document.cookie = "name=value;expires=date;path=path"

红色字体path就是 cookie 的路径，最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了:
document.cookie = "name=Darren;path=/"

-cookie 域概念
路径能解决在同一个域下访问 cookie 的问题，咱们接着说 cookie 实现同域之间访问的问题。语法如下：
document.cookie = "name=value;path=path;domain=domain"
domain就是设置的 cookie 域的值。
例如 “www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，我们如果想让 “sports.qq.com” 下的cookie被 “www.qq.com” 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 “/”。例：
document.cookie = "username=Darren;path=/;domain=qq.com"

-cookie 安全性
通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

　　注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了。

-cookie 编码细节
在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

document.cookie = name + "="+ escape (value)

再看看基础用法时提到过的getCookie()内的一句：

return unescape(document.cookie.substring(c_start,c_end))

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。