一分钟复习-JavaScript基础语法(9)

脚本化css

可以设置\获取元素的style属性下的其他属性，来设置\获取元素的样式。可以使用document.styleSheets来获取文档中的所有样式表。

document.getElementById('main').style.left = '5px'
console.log(document.getElementById('main').style.left)
console.log(document.styleSheets)

事件处理

事件类型可以分为：

传统事件类型：表单事件（submit、reset等），Window事件（load、unload等），鼠标事件（click、mouseover等），键盘事件（keydown、keyup等）。

DOM事件：focusin、focusout等

HTML5事件：dragstart、drag等

触摸屏和移动设备事件：gesturestart、touchmove等

注册事件处理程序有两种基础方式，第一种方式是通过给事件目标对象或文档元素设置属性，第二种是通过将事件处理程序传递给对象或元素。事件传播遵循冒泡方式，DOM节点触发了事件后，结束会继续把事件按照DOM结构向上传递，触发父节点的相同事件，直至window对象。

// 标签属性
// <button onclick="alert('Thank you')"></button>
// 事件处理程序属性的名字由“on”后面跟着事件名组成
window.onload = function(){}
// 事件名称不需要加“on”，可以使用addEventListener添加多个事件，调用顺序按照添加顺序
document.getElementById("main").addEventListener("click",function(){alert("Thank agent!")},false)
// 使用removeEventListener移除事件处理程序
document.getElementById("main").removeEventListener("click",buttonHandle,false)
// 使用preventDefault取消事件继续传播
event.preventDefault()

脚本化http

浏览器在XMLHttpRequest类上定义了它们的HTTP API。这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

var request = new XMLHttpRequest()
// open方法打开请求
request.open("GET","https://www.baidu.com")
// setRequestHeader方法添加请求头（不是设置，相同的值不会替换而是再加一个值）
request.setRequestHeader("Content-Type","text/plain")
// send发送请求
request.send("hello world")

// status和statusText属性以数字和文本的形式返回HTTP状态码
console.log(request.status)
console.log(request.statusText)

// getResponseHeader、getAllResponseHeaders能查询响应头
var type = request.getResponseHeader("Content-Type")
var types = request.getAllResponseHeaders()

// responseText、responseXML能够获取文本形式、XML形式的响应体
console.log(request.responseText)
console.log(request.responseXML)

// onreadystatechange，可以用于监听请求状态变化，在里面可以使用readyState查看状态
request.onreadystatechange = function(){
    console.log(request.readyState)
    // 一般用这个条件来判断请求成功
    if(request.readyState === 4 && request.status === 200){
        console.log('请求成功')
    }
}
// readyState值
//  UNSENT              0   open()尚未调用
//  OPENED              1   open()已调用
//  HEADERS_RECEIVED    2   接收到头信息
//  LOADING             3   接收到响应主体
//  DONE                4   响应完成

如果在open的时候第三个参数传false，那么就会使请求成为同步请求，send语句就会阻塞直到请求完成。

可以使用Content-Type=multipart/form-data、FormData对象来实现文件上传。

var request = new XMLHttpRequest()
request.open("POST","https://www.baidu.com")
request.setRequestHeader("Content-Type","multipart/form-data")
request.onreadystatechange = function(){
    ...
}
var file = document.getElementById("upload").files[0]
var formdata = new FormData()
formdata.append('id',1)
formdata.append(file)
request.send(formdata)

send发送东西以后，每50毫秒会触发一次onprogress事件，可以使用lengthComputable属性查看现在是否可以查看传输情况，可以使用total属性查看总长度，使用loaded属性查看已传输长度。

可以使用abort()来终止请求，也可以使用timeout属性来设置多久自动终止。

request.abort()
request.timeout = 200

客户端存储

Storage对象是一个持久化关联数组，数组使用字符串来索引，存储的值也都是字符串值形式的。分localStorage、sessionStorage，两者的区别在于存储的有效期和作用域的不同：数据可以存储多长时间以及谁拥有数据的访问权。

localStorage存储数据是永久性，作用域限定在文档源级别。sessionStorage存储数据是临时的，一旦窗口或是标签被永久关闭了，数据也会被删除了，而作用域也限定在文档源中。

使用getItem()获取键值、使用setItem()设置键值、使用removeItem()删除键、使用clear()清除所有键值，可以使用length获取长度，使用key()获取键名。

localStorage.setItem("x", 1);
localStorage.getItem("x", 1);
localStorage.removeItem("x");
sessionStorage.clear()
console.log(sessionStorage.length)
console.log(sessionStorage.key(0))

cookie是指Web浏览器存储的少量数据，同时它是与具体的Web页面或者站点相关的。cookie属性有名、值、有效期、作用域。domain表示的是cookie所在的域，默认为请求的地址。path表示cookie所在的目录。浏览器支持的存储cookie总数是有限的，单个cookie大小4KB。

// name=value;name=value，使用;来隔开每个cookie
document.cookie = 'userName=admin;password=123456'
// name=value; max-age=seconds，支持设置 path=path domain=domain secure
document.cookie = 'userName=admin; max-age=20'

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

一分钟复习-JavaScript基础语法(9)

猜你喜欢

网站首页 > 技术文章正文