1.介绍js有哪些常用内置对象。
1.String(字符串),
2.Number,
3.Boolean(布尔对象),
4.Function(函数对象),
5. Array(数组),
6. Math,
7. Object,
8. RegExp(正则表达式对象),
9.Date(日期对象),
10.Error(异常对象)
2.bom对象
1.window(核心)
2.document对象
3.location对象(当前页面地址)
4.navigation对象(浏览器本身相关信息)
5.screen对象(屏幕相关)
6.history对象(浏览器历史相关)
3.JavaScrip的一些编写原则
1、不要在同一行声明多个变量
2、使用===或!==来比较
3、使用字面量的方式来创建对象、数组,替代new Array这种形式
4、switch语句必须要带default分支
5、fon-in循环中的变量,用var关键字说明作用域,防止变量污染
6、三元表达式可以替代if语句
7、比较数据类型以下6中情况是false,其他都是true------false、""、0、null、undefined、NaN
8、数据类型检测用typeof,对象类型检测用instanceof 9、异步加载第三方的内容 10、单行注释//,多行注释/**/
…
4.dom对象与jQuery对象转换
4.1 dom转jQuery dom对象如下:
var $dom = $(dom);
4.2 jQuery对象转dom对象
var dom = $dom[0];
var dom = $dom.get(0);
5正则相关[i不区分大小写,g匹配全部数据]
var str = "Hello word! I think word is good.";
1
5.1替换str中的word为‘javascript’
str = str.replace(/word/ig, “javascript”);
5.2判断str中是否包含word
/word/ig.test(str)
5.2获取str中的所有word
str.match(/weaver/ig)
6 js选择器
6.1选择select的值【假定select的id为slt】
$("#weaver option:selected").val()获取value $("#weaver
option:selected").text()//获取文本值
6.2选择id为test的元素的文本内容
$("#test").val(); // jQuery("#test").val();
docunment.getElementById("test)
7 jq的$(function(){})与window.onload的区别
$(function(){})不会被覆盖,而window.onload会被覆盖(页面资源全部加载完毕后执行)
$(function(){})在window.onload执行前执行的
DOM文档加载步骤:
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.构造HTML DOM模型//执行ready
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload
8闭包问题
8.1输出下列结果
for (var j = 0; j < 2; j++) {
function f(){
console.log(j)
};
f();
setTimeout(()=>{
console.log(j);
}, j);
}
0 1 2 2
8.2 请填写下列运行结果
var weaver = "to ccsb???";
var obj = {
weaver:"to ccsb!!!",
fnobj:function(){
fnobj1 = () => {
console.log(this.weaver);
fnobj2();
}
fnobj1();
function fnobj2() {
console.log(this.weaver)
}
}
}
obj.fnobj();
//结果:
to ccsb!!!
to ccsb???
9 给数组去重
var arrays = [1,2,3,2,4,6,5,7]
function unique (arrray) {
var result=[]
//请编程实现数组去重
return result;
}
//1.利用es6的set对象
result = [...new Set(array)];/[...new Set (array)]
//2.利用对象属性的唯一性
let obj = {};
for (let i of array) {
if (!obj[i]) {
result.push(i);
obj[i]=1;
}
}
//3.利用sort方法排序去重
var newarray = array.sort();
result = [newarray[0]];
var length = newarray.length;
for( var i = 1 ;i<length; i++) {
newarray[i] !== newarray[i-1] && result.push(newarray[i]);
}
//4.利用for...of+includes()循环
for(var i of array) {
!result.includes(i) && result.push(i);
}
//5.用filter结合indexOf
result = array;
return result.filter((item, index)=> {
return result.indexOf(item) === index
})
//6.利用双层for循环(6分)类似
var length = array.length;
for(var i =0; i<length; i++) {
var only = true;
for(var j =i+1; j<length; j++){
if(!only) continue;
if(array[i] == array[j]) only = false;
}
if(only) result.push(array[i]);
}
10 统计字符串中字母个数
var str = "I think javascript is good";
//解:方法不唯一
str = str.toLowerCase();
var result = {};
for(var i in str) {
if(str[i] in result) {
result[str[i]]++;
} else {
result[str[i]] = 1;;
}
}
11 数据交互
原生数据交互,post方法【可能用到方法或对象XMLHttpRequest、ActiveXObject、onreadystatechange、setRequestHeader】
var xhr = null;
try{
xhr=new XMLHttpRequest();
}catch(e){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", url, true);
//POST提交设置的协议头(GET方式省略)
//这里需要通过服务器设置响应头解决跨域问题
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log("success!!");
}else{
console.log("error code "+xhr.status)
}
}
}
//发送请求,post设置请求参数,get方式直接调用方法无需参数
xhr.send("username="+name+"&age="+age);
Ajax
$.ajax({
type:'POST', // 规定请求的类型(GET 或 POST)
url:uploadV, // 请求的url地址
dataType:'json', //预期的服务器响应的数据类型
data:{},//规定要发送到服务器的数据
beforeSend:function(){ //发送请求前运行的函数(发送之前就会进入这个函数)
},
success: function(result){ // 当请求成功时运行的函数
},
error:function(result){ //失败的函数
},
complete:function(){ //请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后,不管成功还是失败 都会进这个函数)
}
});
fetch调用fetch函数,传入接口url,然后返回一个promise(response)
fetch('https://www.baidu.com')
.then(function(res) {
成功
},function(){
失败
});