web开发：js基础篇
1. 使用js
1.1 外部脚本引入
<script>脚本内容写在script标签里</script>
<script src="../js/ajax.js"></script>
//src里写脚本地址，可以是本地，也可以是链接
1.2 嵌入html
<script>脚本内容写在script标签里</script>
1.3 嵌入元素里
<input type='button' onclick="javascript:window.location.href ='templates/query.html'" />
1.4 执行js代码
- 书签执行js代码
把书签里的网址改为js代码，点击书签即可直接执行js,格式如下:
javascript:alert('a');
2. 数据类型
2.1 定义变量
var a; //定义变量用var标识符，不能指定类型，js自动判断
a = 3; //为变量赋值整型
var a = '字符串'; //定义变量为字符串并赋值
var a = ['abc','hi','345'] / /定义
var x = {apple : "5元"}; //对象, 键不用引号
const a =3; //定义常量, 定义后不能修改
let a=3; //a只定义在当前的代码块内
var t = new Date(); //获取当前时间，赋值给t
2.2 类型判断
typeof a //判断变量a的类型, typeof(a)不能判断出引用类型,统一返回object, getElementById获取的都是object类型
parseInt(a) //判断是否整型
parseFloat() //判断浮点型
isNaN() //判断空类型
2.3 标识符
&& //与
|| //或
=== //完全等于
== //等于
!= //不等于
2.4 字符串
2.4.1 字符串转列表
s = "aloha, good day" //同python，将字符串分割为数组
a = s.split(","); //将s按照逗号分割为列表，保存为a["aloha","good day"]
2.4.2 字符串截取/切片
s.slice(0, 7) //截取前7个字符, 包含索引0, 不包括7
s.slice(7) //从索引7截取到结尾
s.slice(-13,-7) //从位置 -12 到位置 -6
2.4.3 删除
s.trim() #删除首尾空格
2.4.4 类型转换
a.toString() //其他转字符串类型
2.4.5 正则表达式
var reg = /http.+http(.+)/ ; //定义正则, 写在/ / 中,
reg.exec(s)[1];
//从字符串提取出匹配的数据, 数据在组1, exec同python的search
var reg = /模式/i //不分大小写
var reg = /模式/g //存在多个时, 查找多个, 需要用match方法
var reg = /模式/m //多行匹配
2.5 数组
var a = [1, 2]
2.5.1 获取长度
a.length
2.5.2 遍历
for (var i = 0; i < data.length; i++) {
content += '<div>' + data[i] + '</div>';
}
2.5.3 判断
判断是否数组
Array.isArray(a) //判断a是否为数组
判断是否存在某值
arr.includes(‘abc’) //判断数组arr是否包含abc, 包含返回true,
arr.indexOf(abc’); //得到指定元素的下标, 不存在返回-1
2.6 对象(字典)object
2.6.1 定义-赋值-引用
var x = {apple:"5元"}; //定义时赋值
x.banana = “6元”; //添加或修改
alert(x.apple); //引用
var x = { tv: {‘haier’: "1500元"} }; //嵌套对象
x.tv[‘haier’] //引用嵌套对象
2.6.2 判断是否为对象
var obj ={}
if (obj.constructor === Object) //判断obj是否为对象类型
2.6.3 遍历对象类型
单层遍历
var obj = {}
var str= '';
for (var item in obj){
str +=item+":"+obj[item]+'<br></br>';
}
递归遍历
var content = '';
function obj_bianli(obj) {
for (var item in obj) {
if (obj[item].constructor === Object) {
// if (data_dict[item] instanceof Object) {
obj_bianli(obj[item]);
} else {
content += item + " : " + obj[item] + '<br>';
}
}
return content;
};
3. Dom元素获取及处理
3.1 元素获取
3.1.1 元素获取
var id_name = document.getElementById('id');
document.getElementsByName(''); //以下方法均返回数组
document.getElementsByClassName('class');
document.getELementsByTagName(tag); //h1,p,div
document.querySelectorAll();
document.forms //获取所有表单，第一个表单document.forms[0]
document.links //所有链接
document.images //图片
document.url //当前页面路径，返回字符串
3.1.2 获取元素的值等属性
id1.value; //获取元素的值
id1.value.length //获取元素值的长度
name1[2].checked //判断单选框name1是否选中了第二个选项
form.my_name.value //取得表单中my_name元素的值
sessionStorage.getItem("token") //从存储获取 token的值
3.2 节点处理
var gg=document.getElementById("id");
3.2.1 节点属性
gg.name #名称
gg.value #值
gg.length #长度
3.2.2 创建节点
document.createElement("name"); //创建元素节点
document.createTextNode("文本节点"):
document.createAttribute("属性节点");
3.2.3 插入节点
gg.appendChild("追加节点");
gg.insertBefore("节点1,节点2"); //节点2前面插入节点1
3.2.4 修改节点
gg.parentNode.replaceChild(新节点，旧节点);
3.2.5 删除节点
gg.parentNode.removeChild(gg); //删除节点gg，返回移除的元素名称，可用于屏蔽元素
clearInterval(t); #
3.3 元素处理
3.3.1 样式处理
gg.style.display="none"; //设置元素隐藏，可用于屏蔽元素
gg.style.height="0px"; //高度
gg.style.width="0px"; //宽度
gg.className = ""; //设置元素的class名称，可用于屏蔽元素
gg.remove("style"); //移除gg元素的style，可用于屏蔽元素
3.3.2 设置元素的值
var d = document.getElementById("d");
d.value = 1;
sessionStorage.setItem("token", “token详情”);
//数据存入sessionStorage, 跟字典类型不太一样键值之间逗号隔开, 一条语句只能存一条
3.3.3 禁用元素
var btn = document.getElementById("b_scene"); //获取按键
btn.disabled = true; //禁用按键
4. 输出
alert('弹窗');
var t = document.getElementById("con")； //通过id定位到元素，
t.innerHTML="" //接收字符串，替换掉原来的内容，如果有html元素会自动解析
t.innerText="" //同上，区别是不做任何解析，原样输出
t.value="" //其他同Text，区别是只能用在设置了value的元素，如<input type='text' id="con" value='' />
t.append=("") //接收字符串，追加到指定元素后
t.after="" //也是追加，是倒序的
document.write(‘内容’); //这个方法会出现覆盖掉整个页面的问题（通过onclick()或window.onload调用js函数时）
console.log('a') //输出内容到控制台
5. 控制语句
var gg = document.getElementById('id');
5.1 判断语句
if(gg != null){ //判断元素是否存在
alert('if')
}else if( && ){ //
alert('else');
} //if和for、while这些语句块结束都不加符号
5.2 循环语句
5.2.1 for
for(var i=0;i<data.length;i++){
document.write(data[i])
}
5.2.2 while
while (gg == null) {
var a = gg.parentNode.removeChild(gg);
if (a != null) {
break; //break退出，continue继续下一次，和python一样
}
}
6. 函数
6.1 函数
function test(a, b) { //声明
return a * b;
}
test(2,5) //js内调用
<input type="button" id="b1" onclick="test(this.form)" /> //html内调用，可以把表单作为参数传入。编写chrom插件时，onclick不能用 form.元素名称.value //用这种方式获取指定元素的值
onclick="test('haha')"
6.2 匿名函数
6.2.1 匿名函数
windon.onload = function(x){ //事件发生时调用
return x+3
};
var show = function(){ //赋值给一个变量，用变量名调用，和有名函数没看出区别
alert('hello');
};
show(); //变量名加括号调用
6.2.2 箭头函数（匿名函数简写形式）
x => x+3 //左边传入参数，传入多个用括号，不需传参用空括号。右边单行语句返回值可省略return，多行要加花括号，不能省略return
6.2.3 定义匿名函数时直接调用
方式一：
(function(){ //小括号可以换成方括号[ ]
document.write('hello');
}());
方式二：
(function(){ //包装函数，第一个()将函数变成表达式，第二个()代表执行这个函数
document.write('wo hao');
})();
方式三：
!function(){ // !号可以换成+、-、~、void
document.write('ni hao');
}()
6.3 系统函数
6.3.1 数学函数
math.ceil(5.9) //向上取整
math.floor(5.9) //floor向下取整
- toFixed(2) //对a四舍六入, 保留两位小数
Math.round(a) //对a四舍五入取整
- foreach
7. 事件处理
var b = document.getElementById('b1');
7.1 事件绑定
7.1.1 方法一:事件属性注册处理函数
b.onclick=test('参数') //b单击时调用test()
b.onfocus=test() //获得鼠标焦点时
7.1.2 方法二:addEventListener
b.addEventListener("click", test); //b绑定单击事件，单击时调用函数test,不能传参数.想要传参只能定义一个匿名函数，在匿名函数里调用
7.1.3 按键监听
//回车按下时,执行函数user_query();
document.onkeydown = function (e) { //按下按键时检测
var ee = e || window.event;
if (ee.keyCode == 13) { //keyCode 13是回车
user_query(); //回车按下时，触发该事件
return false;
}
return true;
};
7.1.4 事件类型
window.onload = test() //页面加载时调用
id.onclick = test() //单击时调用
document.onkeydown = function (e) { } //按下按键时调用
8. 发送数据及获取后端数据
8.1 原生js,xmlHttpRequest
8.1.1 GET发送请求及获取返回
var url = 'http://www.abcd.com'; //请求的网址
top.location = url; //解决跨域的问题，先转到这个网站，再发送异步请求
var xhr = new XMLHttpRequest(); //创建xhr对象
xhr.responseType = 'json'; //指定服务器返回的数据类型为json，缺省字符串，其他选项还有document，blob，arrayBuffer
xhr.open('GET',url , true); //第三个参数true异步,false同步，缺省true
xhr.setRequestHeader("mydata", "要发送的数据");
//1.可选项, 设置请求头, 非必须, 类似字典格式, 逗号隔开, 一条语句一个字段。
//2.get请求的send不能发送数据, 可以把要发送的简短数据放到请求头里发送
xhr.send(); //发送请求
xhr.onreadystatechange = function(e) {
if (this.readyState == 4 && this.status == 200) {
var s = this.response; //从服务器接收数据，保存到s
}
};
8.1.2 POST发送数据及获取返回
function user_query() {
var url = '/api/query'; //请求地址
var form = document.getElementById('query_form'); //根据表单id获取表单
var formData = new FormData(form); //获取表单数据
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open('post', url, true);
//xhr.setRequestHeader("Authorization", "Bearer " + token); //设置请求头, 非必须, 类似字典格式, 逗号隔开, 一条语句一个字段
xhr.send(formData); //发送表单，类型也可以是字符串, 只有post和put类型可以发送数据
xhr.onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
var data = this.response; //从服务器接收数据，保存到data
var r = document.getElementsByName("radio1"); //获取单选框
if (r[2].checked) { //判断单选项2是否被选中
alert(data);
}
}
};
}
自定义表单(不使用序列化)
var formData = new FormData();
formData.append('username', '张三');
formData.append('id', 123456);
8.2 jQuery Ajax方法
前后端示例数据：
<input type="button" onclick="login()" value="登录"> //前端：表单中的按钮，单击后调用login()函数
return {"msg": "query"} //后端：返回的数据
实现：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function login(){
$.ajax({
url:'/api/login', //提交的地址，代替表单中的action
type:'POST', //get、post
data: $('#form1').serialize(), //form1是表单的id，jQuery用$符号获取元素，#号代表用id获取，.点号代表用class获取
success:function(data){ //请求成功时，执行success的语句，后端返回的数据存入data
if(data.msg == 'query'){ //我定义的后端返回一个字典型数据，键名叫msg
window.location.href ='templates/query.html';
}
},
error:function() { //请求失败时，执行error的语句，非必须，可以只有success
alert('请求失败');
}
});
};
</script>
8.3 原生js文件下载
function get_data(data_type) {
var url = '/api/export/'+data_type; //请求地址
var xhr = new XMLHttpRequest();
xhr.responseType = "blob"; //指定响应类型blob
xhr.open('GET', url, true); //第三个参数true异步,false同步，缺省true
xhr.send();
xhr.onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
var blob = new Blob([this.response],
{ type: "application/csv" } // csv 的格式为csv。excel的格式vnd.ms-excel
);
var aa = document.createElement('a'); // 创建a链接 href链接地址 download为下载下来后文件的名称
aa.href = URL.createObjectURL(blob); //创建blob对象
aa.innerHTML = 'a链接';
//aa.download = 'aa.csv'; //文件名, 不管用
aa.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
document.body.appendChild(aa);
msg.innerHTML = "导出完成";
aa.click(); //点击下载链接
aa.remove(); //移除创建的临时元素
URL.revokeObjectURL(aa.href); //移除blob对象
} else if (this.status == 401) {
self.location = '/index.html'
}
};
}
9. BOM浏览器操作
9.1 定时器
t = setTimeout( function(){ del() },7000 ); //延时执行，7秒后执行函数del()。不用嵌套的方式在油猴报错函数未定义
clearTimeout(t); //取消延时执行
i = setInterval(function(){ del() }, "2000"); //周期执行，每隔两秒执行一次del函数
clearInterval(i); //取消周期执行（相当于退出循环）
9.2 自定义睡眠函数
方法一：
function sleep(d){ //单位毫秒，秒数乘以1000，
for(var t = Date.now();Date.now() - t <= d;);
}
方法二：不管用，就用方法一吧
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
sleep(3000); //暂停3秒，1秒等于1000毫秒
9.3 window对象
9.3.1 标签页管理
open(url,,） //打开新标签页，可选参数，第二个设置窗口名称或者打开方式，“_self”在当前页面打开，第三个参数设置窗口大小，外观等
win1 = open(url); //如果要操作新打开的窗口，open的时候赋值
win1.location = //操作新窗口
window.opener //子窗口操作父窗口
self.opener //同上,当前窗口的父窗口
close() //关闭当前标签
9.3.2 其他
back() //后退
forward() //前进
confirm('消息') //确认对话框，返回true或false
prompt('消息',[默认值']) //弹出对话框，让用户输入内容，返回用户输入的内容
9.4 location对象
9.4.1 打开链接
location.href= url //如果打开的页面不属于当前网站，需完整路径
top.location =
self.location =
窗口名称.location =
location.assign()
location.replace()
9.4.2 其他操作
location.reload() //刷新
location.port= //获取端口
location.search= /获取查询条件
10. 时间处理
10.1 时间函数
var date = new Date(); //获取当前日期
date.getFullYear() //从日期获取年
date.getMonth(); //从日期获取月份
date.getDate(); //从日期获取几号
10.2 示例设置HTML时间控件的日期为当前日期
html
<input id ="d" type="date">
js代码
function send_date() {
var d = document.getElementById("d") //<input id ="d" type="date">
var date = new Date();
var month_t = date.getMonth().toString();
if (date.getMonth() + 1 < 10)
month_t = '0' + (date.getMonth() + 1);
var day_t = date.getDate().toString();
if (date.getDate() < 10)
day_t = '0' + (date.getDate())
var dateString = date.getFullYear() + "-" + (month_t) + "-" + day_t;
d.value = dateString;
}
11. 异常处理
try {
//
}
catch(err) {
//留空即是跳过
}
浙公网安备 33010602011771号