1.使用方式
引用位置,js的引用位置和css的一样要在HTML中进行,但又有些许不同,例如:
<!DOCTYPE html>
<html>
<head>
<link href="text.css"><!-- 这里是css引用的位置 -->
</head>
<body>
<!--可以写在这里面,即写即用,比外联的执行要快 -->
<script>
function show(){
}
</script>
</body>
<script herf="text.js"></script><!--这里是js外部引用的位置 -->
<!--在这里引用是为了在html页面加载后,js写的功能才能被调用,否则
就先加载js,后加载html的话,js的函数会找不到目标,同时如果有多个
js的话,要考虑它们的渲染顺序 -->
</html>
2.基本语法
2.1 基本类型:
如果我们想看一个变量的数据类型,可以使用typeof 去查看。
2.2 声明变量:
声明的关键字常用的有三个 let,var,const。
- var相当于全局变量,存在变量提升,相当于在window上声明。
何为提升变量,就是变量的声明(注意不包含变量初始化)会被提升(置顶)到声明所在的上下文,也就是说,在变量的作用域内,不管变量在何处声明,都会被提升到作用域的顶部,但是变量初始化的顺序不变。
var s='变量1';
(function show(){
var s='变量2';
/*就是s会先声明为undefined进行创建,再进行初始*/
......
})()
- let声明的变量,不存在提升变量,在函数体内的改变不会影响全局的let,let会进行预处理,所以let声明变量要初始化,否则会报错。
let s='变量1';
function show(){
let s='变量2';
//此处的s变量的值改变不会影响上面的s,同时let支持变量名重复。
}
- const声明的变量是常量,和java中的常量差不多,在同一作用域或块中,不允许将已有的 var 或 let 变量重新声明或重新赋值给 const,不允许将已有的 const 变量重新声明或赋值。
2.3 函数
- 函数在js中一般用function来声明,可以隐式也可以显式声明。
//这为显式的,有函数名的
function show(){
}
//这是隐式的,无函数名的。
window.onload=function(){
}
- 函数一般有两种使用形式。对于一个button来说,id=“btn”。
<button id="btn" onclick="show()"></button>
//第一种
btn.onclick=function(){
}
//第二种,对于先定义好一个函数
function show(){
}
- 函数类一些常用的方法,获取dom节点,处理dom节点的
function show(){
//获取id="btn"的dom节点
//除了用id,还可以用name去获取一组name值相同的元素。
let btn=document.getElementById("btn");
//用来给id="btn"的dom点元素里面的进行操作,赋值
btn.innerHTML='';
}
3.前端交互
当我们想要实现动态的网页的话,就需要进行响应操作,这里ajax比较方便,ajax有两种,一种式jQuery的ajax,使用简单,但需要导入jQuery包,另一种就是原生的ajax。
function show(){
//$代表jQuery
$.ajax({
type: "post",//请求类型,有post和get两种
url: "/add",//后端地址
data:peo,//传输的数据
dataType: "json",//从后端返回的数据类型
success(data){//括号里的data是从后端返回来的数据,请求成功后的,在里面进行操作
//jQuery的ajax会自动的将JSON转化成需要的
document.getElementById('menuBody').innerHTML = '';
people=data;
setPeople(people, (p - 1) * 10, p - 1);
selectAll();
},
error(){
alert("添加失败");
}
})
}
function show2(){
//创建请求对象并判断是哪种浏览器的类型
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
xhr.open("get",url,true);//请求类型,地址,和异步
xhr.send();//发送请求,如果是post请求需要设置请求头
xhr.onreadysattechange = () =>{//这里是检测响应状态的
if(xhr.readystate == 4){
if(xhr.status == 200){
var data = xhr.responseTEXT;//获取返回的数据,如果是JSON类型的
//就进行转换
data=JSON.parse(data);
return data;
}
}
}
}
以上就是关于js的一些基础用法。js还有很多的用法,js也可以用来做动画效果,还能实现很多的交互功能。