1. 原生js写Ajax（兼容ie）
- xhr.readyStatus == 0 尚未调用 open 方法
- xhr.readyStatus == 1 已调用 open 但还未发送请求（未调用 send）
- xhr.readyStatus == 2 已发送请求（已调用 send）
- xhr.readyStatus == 3 已接收到请求返回的数据
//创建一个Ajax对象
function ajaxGet(url,fnSucee,fnFaild){
var xhr=null;
//创建一个Ajax对象
if(Window.XMLHttpRequest){
//非ie6
xhr=new XMLHttpRequest();
}else{
//ie6
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//连接到服务器,true异步
xhr.open("GET",url,true)；
xhr.send();
xhr.onreadystatechange=function(){
//readyState--浏览器和服务器之间进行到哪一步了
if(xhr.readySate==4){//读取完成
if(xhr.status==200){
fnSucee(xhr.responseText);
}else{
if(fnFaild){ //判断是否传入失败是的函数,即用户是否关心失败时的结果
fnFaild(oAjax.responseText); //对失败的原因做出处理
}
}
}
}
}
//创建一个Ajax对象
function ajaxPost(url,fnSucee,fnFaild){
var xhr=null;
//创建一个Ajax对象
if(Window.XMLHttpRequest){
//非ie6
xhr=new XMLHttpRequest();
}else{
//ie6
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//连接到服务器,true异步
xhr.open("POST",url,true)；
//设置头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange=function(){
//readyState--浏览器和服务器之间进行到哪一步了
if(xhr.readySate==4){//读取完成
if(xhr.status>==200&&xhr.status<300||xhr.status==304){
fnSucee(xhr.responseText);
}else{
if(fnFaild){ //判断是否传入失败是的函数,即用户是否关心失败时的结果
fnFaild(oAjax.responseText); //对失败的原因做出处理
}
}
}
}
}
2. 遍历一个对象的属性(for..in)
for(var key in obj){
if(obj.hasOwnProperty==true){
console.log(obj[key]);
}
}
3. 数组去重
遍历对象用for in 遍历数组用for of
ES5:
function unique(arr){
var newarr=[];
for(var item of arr){
if(newarr.indexOf(item)==-1){
newarr.push(item);
}
return newarr;
}
ES6:
-
基本思路：ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
-
Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。
-
任何类似数组的对象可以用扩展运算符转换为真正的数组。
function unique(arr){
let x = new Set(arr);
return [...x];
}
4. 手写jsonp
https://blog.csdn.net/hkwBest/article/details/81484304
假设访问的url
http://www.baidu.com/person.js
接口的代码
handle({name: 'tom', age: 20})
<script type="text/javascript">
function handleRes(data){
console.log(data.name + 'is' + data.age + 'years old');
}
</script>
<script type="text/javascript" src="http://www.baidu.com/person.js?callback=handle"></script>
//这个callback本身也是可配置的。
jq ajax
$.ajax({
url: 'xxxxx', //一个跨域的url
type: 'get',
dataType: 'jsonp', //设置服务器返回的数据类型
jsonp: 'onJsonPLoad', //这个值用来配置前面提过的callback，它会拼接到url的后面
jsonpCallback: 'handleRes', //用来设置回调函数名称
success: function (res){ //这里的success回调就相当于之前写到的handleRes方法。
console.log(res);
}
})
5. js实现hover效果
function hover(ele,over,out){
ele.addEventListener("mouseover",over,false);
ele.addEventListener('mouseout',out,false);
}
hover(document.querySelector('#dd'),function(){
console.log('over');
},function(){
console.log('out');
});
6. js实现事件委托
- event对象：ie是window.event
- target对象：标准event.target，ie是window.event.srcElement
- target.nodeName.toLowerCase=="li"获取的nodeName是大写
鼠标移到每个li触发改变颜色的事件
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
oUl.onmouseover=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase=="li"){
target.style.background = 'red';
}
}
oUl.onmouseout = function(ev) {
var ev = ev || window.event;
var target = ev.target|| ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = ' ';
}
}
7. js实现，点击一个列表时，输出对应的索引
- let实现
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
var list=document.querySelectorAll(li);
for(let i=0;i<list.length;i++){
list[i].addEventListener("click",function(){
console.log(i);
},false)
}
</script>
</body>
- 闭包实现
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
var list=document.querySelectorAll(li);
for(let i=0;i<list.length;i++){
(function(i){
list[i].addEventListener("click",function(){
console.log(i);
},false)
})(i);
}
</script>
</body>
- 事件委托实现
var ul=document.getElementsByTagName(ul)[0];
var list=document.querySelectorAll(ul li);
ul.addEventListener("click",function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase=="li"){
console.log([].indexOf.call(list,target));
}
},false);
网友评论