A.你今天学到了什么
1.正则表达式的默认属性
//正则对象的默认属性
// global -g 是否全文搜索 默认false
// ignorn cass -i 是否忽略大小写 默认false
var a="hello worLd";
var reg=/l/;
console.log(a.replace(reg,"*"));
var reg1=/l/g;
console.log(a.replace(reg1,"*"));
var reg2=/l/i;
console.log(a.replace(reg2,"*"));
var reg3=/l/ig;
console.log(a.replace(reg3,"*"));
2.正则表达式的test（）方法
/*
test() -->字符串中是否存在匹配正则表达式的字符串,做局部匹配的
使用test方法是,正则对象不要加g
*/
var str="a";
var reg = /[a-z]/;
/*
lastIndex 当前表达式匹配内容的最后一个字符的下一个位置
*/
console.log(reg.test(str));
console.log(reg.test(str));
console.log(reg.test(str));
3.量词的贪婪模式和懒惰模式
// 用于不确定数量的量词
var a ="123456abc";
//贪婪模式
var reg=/\d{3,6}/;
console.log(a.replace(reg,"*"));
//懒惰模式
var reg2=/\d{3,6}?/;
console.log(a.replace(reg2,"*"))
4.date()方法
var oDate=new Date();
var year=oDate.getFullYear();//获得年
var month=oDate.getMonth()+1;//获得月 月份从0开始
var day=oDate.getDay();//获得星期几
var date=oDate.getDate();//获得几号
console.log(year);
console.log(month);
console.log(day);
console.log(date);
5.动态时钟
<div>
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt=""> //时钟图片
</div>
function showTime(){
var clocks=document.getElementsByTagName("img");
var oDate=new Date();
var hour=oDate.getHours();
var minute =oDate.getMinutes();
var second=oDate.getSeconds();
// 1.将时间变成字符串，拼接起来
// 2.将它们分割成数组
//只要time<10,就在前面加个"0";
function add(time){
if(time<10){
return "0"+time;
}else{
return time+"";
}
}
var allTime=add(hour)+add(minute)+add(second);
for(var i=0;i<allTime.length;i++){
clocks[i].src="images/"+allTime[i]+".png"
}
}
showTime();
setInterval(showTime,1000);
6.ajax
<!-- <div id="test">
</div> -->
<script>
// ajax就是向服务端取数据的一种方式，能做到页面的局部刷新
//如何使用ajax
// var test=document.getElementById("test");
// 1.创立ajix的核心对象
var xhr=new XMLHttpRequest();
//2.建立与服务器的连接，open（method，url，true）
var url="https://www.easy-mock.com/mock/5b3ae6c96a1563375198b597/ajaxTest/test";
xhr.open("get",url,true);
//3.发送请求
xhr.send();
//4.服务务器响应
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status == 200){
console.log(xhr.responseText)
// var resData=JSON.parse(xhr.responseText);
// test.innerHTML=resData.data.content
}
}
</script>
7.post
var url = "https://www.easy-mock.com/mock/5b3b1864b35f9276a57e7390/postTest"
var xhr=new XMLHttpRequest();
xhr.open("post",url);
xhr.setRequestHeader("content-Type","application/x-www-from-urlencoded");
xhr.send();
xhr.onreadystatechange=function(){
if( xhr.status==200)
if(xhr.readyState==4){
console.log(xhr.responseText);
}else{
document.body.innerHTML=xhr.atatus;
}
}
8.两者的区别
//get ,post 区别
//1.面板上 git 请求的字段是url
//2.安全性：post方式更安全
//3.请求的数据量： post的请求的数据量更大
//4.速度上： get 更快
9.jquery-ajax
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</bady>
$.ajax({
method:"get",
url:"https://www.easy-mock.com/mock/5b3b1864b35f9276a57e7390/postTest",
dataType:"json",
success: function(res){
console.log(res);
},
error:function(xhr){
document.body.innerHTML=xhr.status;
}
})
10.jquery-get
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</bady>
/* $.get(url,func).fail(func)*/
var url=" https://www.easy-mock.com/mock/5b3b1864b35f9276a57e7390";
$.get(url,function(data){
console.log(data);
}).fail(function(data){
document.body.innerHTML=data.status;
console.log(data.status)
})
11.jquery-post
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</bady>
<script>
var url=" https://www.easy-mock.com/mock/5b3b1864b35f9276a57e7390";
$.get(url,function(data){
console.log(data);
})
</script>
12.jsonp
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</bady>
<script>
$.ajax({
type:"get",
url:"https://api.douban.com/v2/book/search?q=javascript&count=1",
dataType:"jsonp",
success:function(data){
console.log(data);
}
})
</script>
13.跨域
/*
跨域：不同的域名之间请求资源
js出同源策略,是不允许跨域的
如何解决跨域:jsonp $.ajax -->dataType:jsonp
*/
var url = "https://api.douban.com/v2/book/search?q=javascript&count=1";
// $.get(url,function(data){
// console.log(data);
// })
$.ajax({
type:"get",
url:url,
dataType:"jsonp",
success:function(data){
console.log(data);
}
})
14.axios
<bady>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</bady>
/* axios.get(url).then(func).tatch(func) )*/
var url = "https://www.easy-mock.com/mock/5b3b14cb9b024a2d076a7a32/ajaxTest/getTest"
axios.get(url).then(function(succuss){
console.log(succuss)
}).catch(function(err){
console.log(err)
})
15.post
<bady>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</bady>
var url="https://www.easy-mock.com/mock/5b3b1864b35f9276a57e7390/postTest";
axios.post(url).then(function(success){
console.log(success)
}).catch(function(err){
console.log(err)
})
网友评论