原生Js的实现
function ajax(options){
var pramas = {
url:'',
type: 'get',
data: {},
success: function (data) {},
error: function (err) {},
}
options = Object.assign(pramas, options)
if(options.url){
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
var url = options.url,
type = options.type.toUpperCase(),
data = options.data,
dataArr = [];
for(let key in data){
let value = key + '='+ data[key]
dataArr.push(value)
}
if(type === "GET"){
url = url + "?" + dataArr.join('&')
xhr.open(type, url, true)
xhr.send()
}
if(type === "POST"){
xhr.open(type,url, true)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send(dataArr.join('&'))
}
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改
options.success(xhr.responseText)
}else {
options.error(xhr.responseText)
}
}
}
}
function ajax(option) {
//新建ajax对象
var xhr = new XMLHttpRequest()
var meathod = option.meathod || 'GET'
var url = option.url
var date = option.date || {}
var str = '?'
for (var key in date) {
str += key + '=' + date[key] + '&'
}
url += str.slice(0, str.length - 1)
console.log(url)
//建立连接（‘获取方式’，‘连接对象’，‘同步或异步’）
xhr.open(meathod, url, true)
xhr.send()//发送请求
xhr.onreadystatechange = function () {
console.log(xhr.readyState)
//当readyState为4时表示数据已经返回到服务器
//当status的值为200时则表示服务器能返回正确的数据
if (xhr.readyState === 4 && xhr.status === 2000) {
console.log(res)
//将获取来的数据（字符串）转为对象格式，并赋值
var zhi = JSON.parse(xhr.responseText)
option.success(zhi)
}
}
}
事件
鼠标事件
mouseover//鼠标经过
mouseout//鼠标离开（鼠标移入到子元素中属于鼠标离开）
mouseenter//鼠标移入
mouseleave//鼠标离开（鼠标移入到子元素中不属于鼠标离开）
mouseover//鼠标移入
mousedown//鼠标按下
mouseup//鼠标抬起
dbblock//双击
mousemove//鼠标移动
//*禁止鼠标右键菜单弹出：contextmenu
//禁止选中文字：selectstart
//举个栗子：
document.addEventListener('selectstart',function(e){
e.preventDefault();//阻止默认事件发生
})
*e.stoppropagation();//阻止事件冒泡
键盘事件
keyup//按键弹起触发
keydown//按下
keypress//按下（但是无法识别功能键）
事件对象（event)
每一个事件都会有一个默认的事件对象，但是event存在兼容性的问题（window.event)
任何事件触发的时候，程序都会提供给我们一个事件对象event
存储着一些与事件相关的信息
也是有兼容生的，高级浏览器是支持的，但是IE8及以下的浏览器的是支持的window.event
Var e = event || window.event;
三个坐标
event.clientX/Y 可视区，以浏览器可视区的左上角为基准
event.pageX/Y 以页面的左上角为基准
event.screenX/Y 以电脑屏幕的左上角为基准
pageX/Y是有兼容性的，
event.pageX/Y = event.clientX/Y+event.scrollTop/Left
- event.preventDefault() : 阻止默认事件
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
- event.target: 返回触发事件的元素
- event.currentTarget: 返回绑定事件的元素
DOM事件级别
element.onclick=function(){}
element.addEventListener('click',function(){},false)
移动端事件
click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
touch类事件
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
tap类事件
触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
new关键字
new 用来创建新的对象
1 先创建了一个自定义对象
2 把this关键字指向刚才创建的对象
3 执行构造函数里的代码，也就是想this（已经创建的对象）添加属相和方法
4 返回this（被创建的对象）
页面高度获取
window.location//获取地址栏信息
scroolTop//页面卷出高度
document.body.clientHeight//网页可见区域高度
document.body.offsetHeight//网页可见区域高度（包括边线）
document.documentElement.offsetHeight//文档高度
清除函数绑定事件
removeEventListener('事件'，函数名)
元素的增加
appendChild
insertBefore
元素的删除
removeChoild
元素的修改
src|href|title//修改元素属性
innerHTML|innerText//修改元素内容
value|type|disabled//修改表单元素
style|className//修改元素样式
元素的查询
getElementById|getElementByTagName|getElementByClassName//Dom提供的API
querySelector|querySelectorAll//H5提供的新方法
父(parentNode)、子(children)、兄(previousElementSibing<上一个>,nextElementSibling<下一个>)
元素属性的操作
setAttribute//设置dom的属性值
getAttribute//得到dom的属性值
removeAttribute//移除属性
注册事件
on+事件//传统注册事件（具有唯一性，后面的会覆盖前面的
addEventListener()//有兼容性问题
监听对象.addEventListener(事件类型的字符串，事件处理函数<事件处理时会调用该函数>,可靠参数<是一个布尔值，默认是false>)
快排序（srot)
返回一个值，如果返回的值是小于0则a在b的前面，相反则在后面
节流
节流：
在无限下拉加载时会发送多次请求，我们需要在上一次数据加载回来之前不发送请求，直到数据回来再发送请求。
模板字符串
``//包字符串，中间可加变量用${}添加
存储
localStorage.setItem(key,value)//往数据库中存数据
localStorage.getItem(key,value)//往数据库中取数据
target和this
e.target//返回的是触发事件对象，它指向的是点击的那个对象，就返回那个对象
this//返回的是绑定元素的对象（currentTarget约等于this但是会返回绑定对象兼容性问题）
网友评论