AcWing Web应用课 (y总yyds)
认真学习以下几个案例即可:
一、 如何更改输入输出框中的值?
二、几个例题
输入两个数,计算两个数的和。
let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");
function main(){
run.addEventListener("click",function(){
let [a,b]=input.value.split(' ');
a=parseInt(a);
b=parseInt(b);
output.innerHTML=a+b;
});
}
export{
main
}
输入一个小数,返回向零取整之后的结果。
let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");
function main(){
run.addEventListener("click",function(){
let x=parseFloat(input.value);
output.innerHTML=parseInt(x);
});
}
export{
main
}
输入a, b, c,输出 (a + b) * c 的值。
let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");
function main(){
run.addEventListener("click",function(){
let [a,b,c]=input.value.split(' ');
a=parseFloat(a);
b=parseFloat(b);
c=parseFloat(c);
output.innerHTML=(a+b)*c;
});
}
export{
main
}
输出如下的菱形。
let input=document.querySelector(".input");
let run=document.querySelector("button")
let output=document.querySelector(".output");
function main(){
let s="";
s+=" *\n"
s+=" ***\n"
s+="*****\n"
s+=" ***\n"
s+=" *\n"
output.innerHTML=s;
}
export{
main
}
三、JS 类与对象
以Point类和ColorPoint类为例:
class Point{
constructor(x,y){
this.x=x;
this.y=y;
Point.cnt++;
}
init(){
this.sum=this.x+this.y;// 成员变量可以在任意的成员方法中定义
}
toString(){
// return '('+this.x+','+this.y+')';
return `(${this.x},${this.y})`; //格式化写法
}
static print_class_name(){ //定义静态方法
console.log("Point");
}
}
class ColorPoint extends Point{
constructor(x,y,color){
super(x,y);//初始化父类
this.color=color;
}
toString(){
return `${this.color} ${super.toString()}`
}
}
Point.cnt=0;//定义静态变量
let main=function(){
let p=new Point(3,4);
p.init();
console.log(p.sum);
console.log(p.toString());
ColorPoint.print_class_name();//静态成员方法可以被继承
console.log(ColorPoint.cnt)//静态成员变量也可以被子类调用
}
四、JS中的事件
JS代码一般通过事件来触发
4.1 鼠标相关的事件
eg.
let div=document.querySelector('div');//获取div标签
let main= function(){
div.addEventListener('click',function(event){ //在获取的div标签上增加事件监听器,当发生click事件时,触发定义的函数。 其中event是绑定的一个参数。
console.log(event);
console.log(event.type);
});
}
export{
main
}
点击div后,打印出来的完整event是这样的:
可以记录此次鼠标点击的各种信息,具体含义在使用的时候可以查文档。
其他触发事件:
click:鼠标左键点击
dblclick:鼠标左键双击
contextmenu:鼠标右键点击
mousedown:鼠标按下,包括左键、滚轮、右键
event.button:0表示左键,1表示中键,2表示右键
mouseup:鼠标弹起,包括左键、滚轮、右键
event.button:0表示左键,1表示中键,2表示右键
4.2 键盘相关的事件
keydown、keyup、keypress
input.addEventListener('keydown',function(event){
console.log(event.type,event.code)
});
4.3 表单相关事件
focus:聚焦
blur:取消聚焦
change:元素内容发生改变
input.addEventListener('focus',function(event){
console.log(event.type,event.code)
});
input.addEventListener('blur',function(event){
console.log(event.type,event.code)
});
4.4 窗口相关事件
resize:页面大小改变触发
scroll:滚动触发
load:页面中所有资源加载完后触发
window.addEventListener("resize",function(e){
console.log(e.type);
});
五、JS常用库
y总的学习原则:这些东西只要了解有,然后边写边查
5.1 jQuery
5.1.1 使用
在<head>
元素中添加<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
即可;或者官网下载
let main=function(){
let $div=$('div');
console.log($div);
$div.on("click",function(){
console.log("click div");
$div.off("click");//解绑 使这个div只能被点击一次
});
};
export{
main
}
5.1.2 可以用名字区分click事件
let main=function(){
let $div=$('div');
console.log($div);
$div.on("click.name1",function(){
console.log("click div 1");
$div.off("click.name1");//解绑 使这个div只能被点击一次
});
$div.on("click.name2",function(){
console.log("click div 2");
});
};
export{
main
}
5.1.3 阻止事件向上传递
对于以下代码:
<div>
<a href="http://www.acwing.com" target="_blank">AcWing</a>
</div>
对a标签进行点击,不仅触发在a标签上的事件,也触发在div标签上的事件(向上传递)
let main=function(){
let $div=$('div');
console.log($div);
$div.on("click",function(){
console.log("click div 1");
});
$('a').on('click',function(e){
console.log("click link");
e.stopPropagation(); //阻止事件向上传递,div的事件没有被触发
// e.preventDefault();//阻止当前事件发生
// return false; 可以直接操作以下两个函数
});
};
export{
main
}
5.1.4 元素的隐藏、展现
let main=function(){
let $div=$('div');
let $btn_hidden=$('#btn-hidden');
let $btn_show=$('#btn-show');
$btn_hidden.on('click',function(){
$div.hide(1000);
//hideout 是淡入淡出
});
$btn_show.on('click',function(){
$div.show();
});
};
export{
main
}
5.1.5 元素添加、删除等
5.1.6 对类的操作
可以对div标签添加一个类my-div
5.1.7 对css的操作
$("div").css("background-color")//获取某个CSS的属性
$("div").css("background-color","yellow")//设置某个CSS的属性
$('div').css({
width: "200px",
height: "200px",
"background-color": "orange",
});
5.1.8 对标签属性的操作
$('div').attr('id')//获取属性
$('div').attr('id', 'ID')//设置属性
5.1.9 对HTML内容、文本的操作
$A.html() // 获取、修改HTML内容
$A.text() // 获取、修改文本信息
$A.val() // 获取、修改文本的值 一般是获取input、textarea里面的内容
5.1.10 查找
AJAX:
不刷新页面,只从服务端获取某些数据,一般是获取一些Json数据
get方法
url是后端调用的链接,
data可以传字典
success是指:如果没有报错的话,从后端获取信息(resp),调用这个函数,把后端的信息解析出来即可
$.ajax({
url: url,
type: "GET",
data: {
},
dataType: "json",
success: function (resp) {
},
});
5.2 setTimeout与setInterval
setTimeout(func, delay) 事件发生后 x秒执行函数
setInterval(func, delay) 每隔x秒执行函数
clearTimeout() 关闭计时器
clearInterval() 关闭周期执行的函数
区别:
5.3 requestAnimationFrame(func)
requestAnimationFrame(func)
该函数会在下次浏览器刷新页面之前执行一次,通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数,表示函数执行的时间戳,单位为毫秒。
该函数可以用于做动画
let main=function(){
let step=function(){
let $div=$('div').width($('div').width()+1);
requestAnimationFrame(step);
};
// for(let i=0;i<100;i++){
// step();
// }
requestAnimationFrame(step);
};
export{
main
}
鼠标单击停止:
let func_id;
let main=function(){
let step=function(timestamp){
let $div=$('div').width($('div').width()+1);
if(timestamp/1000<=10){
func_id= requestAnimationFrame(step);//递归执行
} //限制执行时长
};
//调用该函数
func_id= requestAnimationFrame(step);
$('div').on('click',function(){
cancelAnimationFrame(func_id);
});
};
export{
main
}
5.4 Map、Set、localStorage
localStorage:存在用户的浏览器中,无论是否刷新,都不变。可以将用户的喜好之类的存放在本地。
let map=new Map();
map.set('kk',18);
console.log(map.get('kk'));//若没有,返回undefined
let set=new Set();
set.add(1);
set.add(()=>{
console.log("hello");
}); //插入函数也没有问题
localStorage.setItem('name','zjx');