目录
3.ajax( Asynchronous JavaScript And XML)
23. JavaScript 原型，原型链 ? 有什么特点？
常见问题:
1.数组常用方法
index→使用索引访问数组元素→arr[index]
split()→字符串转数组→string.split(‘分隔符’)
split /splɪt/ vt. 分离；使分离
toString()→数组转换为字符串(逗号,连接)→arr.toString()→string
join()→数组转换为字符串(自定义分隔符)→arr.join(‘分隔符’)→string
join /dʒɔɪn/ vt. 参加；结合；连接
pop()→删除数组最后一个元素→arr.pop()
pop /pɑːp/ 弹出
push()→数组末尾添加元素→arr.push()
push /pʊʃ/ 推入
shift()→删除并return首个元素→arr.shift()
shift /ʃɪft/ 移位
unshift()→头部添加元素并return新数组 length→arr.unshift(元素)
delete→js中数组为对象,可用js中delete运算符操作,但只删除内容,其索引及路径保留,一般用shift和pop代替→delete arr[index]
splice()→增删元素return新数组,index(操作位置),num(删除元素数量),item(当前位置添加的元素)→arr.splice(index,num,item1,item2,…)
splice /splaɪs/ v. 捻接（绳子）；拼接，接合（胶片等）；移接（基因）
slice()→当只有一个数字参数时,从该索引开始到结尾,return新数组,不改变原数组,当有2个数字参数时,从[n1,n2)索引返回新数组
slice /slaɪs/ vt. 切下；把…分成部分；
concat()→合并数组,不会改变当前数组,return新数组,合并内容也可以是元素,不限数目→arr1.concat(arr2,arr3,…,item1,item2,…)
reverse()→倒序数组
reverse /rɪˈvɜːrs/ v. 颠倒；反转；
sort()→以字符串标准, 以字符表顺序对数组排序(如2在11前),修正数字排序:
arr.sort(function(a, b){return a - b});//升序
比较函数的目的是定义另一种排列顺序。
比较函数应该返回一个负，零或正值，这取决于参数：
function(a, b){return a-b}
当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。默认比较字符编码号
随机数排序: arr.sort(function(a, b){return 0.5 - Math.random()});
sort /sɔːrt/ n. [计]（资料、数据的）分类，排序
filter((item,index,array)=>{return 过滤代码})→不改变原数组
Math.max.apply()→求最大值→Math.max.apply(null,[1,2,3])
Math.min.apply()→求最小值→同上
apply /əˈplaɪ/ vt. 申请；应用；请求
let arr=[1,2,3,4,5,12,'111']
// console.log(arr.toString())
// 包括逗号转字符串
// console.log(arr.join())
// 转字符串 默认参数','
// console.log(arr.pop());
// 删除并返回最后一个元素,
// console.log(arr.push(6,1));
// 末尾添加元素 并返回新长度
// console.log(arr.shift());
// 删除并返回第一个元素
// console.log(arr.unshift(1,2,"4"));
// 首位添加元素并返回新长度
// console.log(arr.splice(0,2,'222'))
// arr.splice(index,n,item1,item2)
// 从index位置操作 ,删除n个,添加item
// 返回删除内容组成的数组
//console.log(arr.slice(2,4));
//console.log(arr.slice());//第一个默认0(包括),第二个默认length(不包括)
// 截取索引返回新数组 不影响原数组
// console.log(arr.reverse())
// 原数组倒序
// console.log(arr.sort())
// 将原数组按字符表排序 相等的按原顺序
// console.log(arr.sort((a,b)=>{return a-b}))
// 按数字大小升序 纯数字字符串转为数字
// console.log(Math.max.apply(null,arr));
// 求最大值 纯数字字符串转number null和''转0 其他会NaN
// let a=[2,3]
// let obj={num:1,id:44}
// console.log(arr.concat(a).concat([88,66]).concat(obj).concat('文字'))
// 拼接新数组 参数数组时其元素拼接 其他参数直接作为元素拼进去
console.log(arr);
2.原生js
获取节点:
document.body //直接获取 包括head,title等
document.getElementById('id值');
document.getElementsByClassName('class名');//array
document.getElementsByTagName('标签名');//array
document.querySelector('选择器') ;
document.querySelectorAll('选择器')//array
节点操作:
createElement()→创建节点→document.createElement(“标签名”)
create /kriˈeɪt/ vt. 创造，创作
createTextNode(‘string’)→创建文本节点
appendChild()→末尾添加节点→父节点.appendChild(子节点)
append /əˈpend/ vt. 附加；贴上
removeChild()→删除节点→父节点.removeChild(子节点)
replaceChild()→替换节点→父节点.replaceChild(新节点,旧节点)
replaceChildren()→用新节点替换全部子内容
replace /rɪˈpleɪs/ vt. 取代，代替；替换，更换
cloneNode()→克隆节点(包括子节点)
element.innerHTML→改变内部html结构
element.innerText→改变内部文本内容
element.属性名→改变属性值
element.setAttribute(“属性”,”值”)→改变属性值
attribute /əˈtrɪbjuːt/ n. 属性；特质
element.style.属性名→改变style
element.childNodes→标准方式获取子节点数组,包括换行符和空格,不常用
node /noʊd/ n. 节点
element.children→子元素数组
firstElementChild→第一个子节点
lastElementChild→最后一个子节点
childElementCount→子节点个数
previousElementSibling→兄节点
previous /ˈpriːviəs/ adj. 以前的；早先的；过早的
sibling /ˈsɪblɪŋ/ n. 兄弟姊妹
nextElementSibling→弟节点
常见事件:
| onmousedown |
按下 |
| onmouseup |
松开 |
| onmouseover |
移入 |
| onmouseout |
移出 |
| onclick |
单击 |
| ondblclick |
双击 |
| onload |
加载完 |
| onfocus |
获取焦点时 |
| onresize |
改变视口触发 |
| onchange |
值改变事件 |
| keydown |
键盘按下事件 |
| keyup |
键盘松开事件 |
addEventListener()→添加事件监听→element.addEventListener(事件名(无on),fn,Boolean)→第三个参数布尔值可略,默认true冒泡/false捕获(ie8以前写法: attachEvent)
element.on事件=()=>{}→设置事件
removeEventListener→删除事件监听
3.ajax( Asynchronous JavaScript And XML)
1.发送请求
const xhr=new XMLHttpRequest();
// const xhr=ActiveXObject("Microsoft.XMLHTTP");//判断window.XMLHttpRequest是否为空 ie5和ie6适用该方法
2.发送请求
open(method,url,async)
method→提交方式：”GET(获取)”、”POST(获取)”、”PUT(修改)”、”DELETE(删除)”、” patch(不常见)”
url→服务器(文件)路径
async→默认true异步/false同步
send()发送请求,用于get
send(string)→发送请求,用于post
xhr.open("GET",路径,布尔);
xhr,send();
如果post发送请求需要在send()前添加请求头
xhr.open("POST",路径,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send("属性=值&属性2=值2")
open /ˈoʊpən/ vi. 开始；展现
send /send/ vt. 发送，寄
encoded /ɪnˈkoʊdɪd/ v.把……编码
3.判断返回值
onreadystatechange→储存函数,每当readyState属性改变时,调用该函数
readyState→存有XMLHttpRequst的状态
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,响应已就绪
status→状态码,200~300为成功
xhr.onreadystatechange=function(){
if(this.readyState==4&&this.status>=200&&this.status<300){
// 成功时执行代码
}
}
content /ˈkɑːntent; kənˈtent/ n. 内容，目录；满足；容量
application /ˌæplɪˈkeɪʃn/ n. 应用；申请
state /steɪt/ vt. 规定；声明；陈述
status /ˈsteɪtəs/ n. 地位；状态；情形
4.promise异步
new一个promise对象,第一个属性为回调函数,分别传成功和失败的参数(function),第二个属性为异步时间(ms).一般放在另一个函数内
function fn(){
return new Promise(function(success,err){
setTimeout(function(){
let rst=JSON.parse(xhr.response)
success(rst)
},2000)
})
}
parse /pɑːrs/ vt. 解析
response /rɪˈspɑːns/ n. 响应；反应；回答
parse→json转字符串
JSON.stringify() 方法用于将 JavaScript 值(数组,对象)转换为 JSON 字符串。
则fn函数后可接任意数目then中参数为function,会调用成功态的传递数据,实例即为字符串”数据”
fn().then(function(data){
console.log(data)//在异步时间即2000ms后获取数据并执行
})
promise封装ajax
function ajax(method,url,data){
// 函数返回的是一个promise对象
return new Promise((success,error)=>{
// 返回正确状态时回调success
// 返回异常时回调error
const xhr=new XMLHttpRequest();
xhr.open(method,url);
if(method=="post"){
// 当post
最低0.47元/天 解锁文章
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
