1. 学习收获
JS中的常用的内置函数
函数种类 | 函数 |
Array | concat()连接 |
join()设置分隔符连接数组作为一个字符串 | |
pop()删除数组中的最后一个元素 | |
sort()排序,从小到大 | |
Global | isNaN() 判断一个值是不是 不是数值 |
parseFloat()转换成float parseInt()转换成int ... | |
number() 转成number | |
string()转换成字符串 | |
String | charAt()取出指定索引位置的字符 |
indexOf()判断字符是否存在,顺序查找返回第一个找到的元素的索引, 不存在返回-1 | |
replace()替换字符串 | |
split()根据字符参数去拆分自负床,返回一个字符串数组 | |
substring()截取字符串 | |
Match | ceil()向上取整 floor()向下取整 round()四舍五入 random()随机生成一个0-1的随机数 |
Data | new Date()获取系统当前事件 getSeconds()返回时间中的秒 |
JS DOM编程
DOM(Document Object Model)编程是通过JavaScript对HTML中的dom节点进行操作,DOM是有规范的,DOM规范是W3C制定的。
选择HTML节点/标签
给节点添加内容
- InnerText -----> 在节点中添加文本内容(不能识别HTML代码)
- InnerHTML ----> 在节点中添加内容(能识别HTML代码)
JS中常用事件
(1)blur失去焦点
(2)change下拉列表选中项改变,或文本框内容改变
(3)click鼠标单击
(4)dblclick鼠标双击
(5)focus获得焦点
(6)keydown键盘按下
(7)keyup键盘弹起
(8)load页面加载完毕
(9)mousedown鼠标按下
(10)mouseover鼠标经过
(11)mousemove鼠标移动
(12)mouseout鼠标离开
(13)mouseup鼠标弹起
(14)reset表单重置
(15)select文本被选定
(16)submit表单提交
JS注册事件的两种方式
(1)在标签中使用事件句柄的方式注册事件
<!-- 给表单控件按钮添加click事件 -->
<input type="button" value="提交" onclick="fun()">
<script>
function fun(){
window.confirm("确认提交么?");
}
</script>
(2)在页面加载完毕后使用JS代码给元素绑定事件
<!-- 被选择的标签 -->
<input type="button" value="提交">
<script>
//获取这个表单控件按钮
let btnEle = document.querySelector("input");
//给这个按钮添加click事件
btnEle.onclick = function(){
window.confirm("确认提交么?");
}
</script>
课堂练习题
找出数组中的最大值
//声明并初始化一个数组arrA
let arrA = [10,5,9,7,-5,100,257];
//返回数组arr中的最大值
let maxOfArray = function(arr) {
let max = arr[0];
for(let i=0; i<arr.length; i++) {
if(arr[i] > max)
max = arr[i];
}
return max;
}
alert("最大值是:" + maxOfArray(arrA));
判断数组在元素中是否存在
//声明并初始化一个数组arrA
let arrA = [10,5,9,7,-5,100,257];
//判断数组arr中是否存在ele,如果存在返回数组下标,不存在返回-1
let indexOf = function(arr,ele) {
for(let i=0; i<arr.length; i++) {
if(arr[i] === ele)
return i;
}
return -1;
}
alert((indexOf(arrA,-5) === -1) ? "该元素在数组中不存在" : "该元素在数组中存在");
今年时2022年。今天我们公司有10个人,每年公司会以10%的比重招人。
问:哪一年公司认数突破100人
let year = 2022; //年分
let perCount = 10; //人数
let limitPerson = 100; //限定人数
//按题干的增长方式增长,返回超出限定人数后的年分
let incPerson = function(year,initPerson,limitPerson) {
let i = 0;
while(initPerson <= limitPerson) {
initPerson += (initPerson/10);
year++;
i++;
}
return year;
}
alert("在"+incPerson(year,perCount,limitPerson)+"年,我司人数会超过"+limitPerson+"人");
通过JS实现三级Select(provice > city > town)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="prov">
<option selected value="">请选择省份</option>
<option value="jl">吉林省</option>
<option value="hlj">黑龙江省</option>
<option value="ln">辽宁省</option>
</select>
<select name="" id="city"></select>
<select name="" id="town"></select>
<script>
let provEle = document.querySelector("#prov");
let cityEle = document.querySelector("#city");
let townEle = document.querySelector("#town");
cityEle.style = "visibility: hidden";
townEle.style = "visibility: hidden";
//省份change事件
provEle.onchange = function() {
//清空市
cityEle.innerHTML="";
cityEle.style = "visibility: visible";
//清空区
townEle.innerHTML = "";
townEle.style = "visibility: hidden";
switch(this.value) {
case "jl":
cityEle.innerHTML = " <option value='cc'>长春</option> <option value='yj'>延吉</option> <option value='bc'>白城</option>";
break;
case "hlj":
cityEle.innerHTML = " <option value='heb'>哈尔滨</option> <option value='hh'>黑河</option> <option value='dq'>大庆</option>";
break;
case "ln":
cityEle.innerHTML = " <option value='sy'>沈阳</option> <option value='dl'>大连</option> <option value='yk'>营口</option>";
break;
}
}
//市change事件
cityEle.onchange = function(){
//清空区
townEle.innerHTML = "";
townEle.style = "visibility: visible";
switch(this.value) {
//吉林市区
case "cc":
townEle.innerHTML = " <option value='cc1'></option>长春1区<option value='cc2'>长春2区</option> <option value='cc3'>长春3区</option>";
break;
case "yj":
townEle.innerHTML = " <option value='yj1'>延吉1区</option> <option value='yj2'>延吉2区</option> <option value='yj3'>延吉3区</option>";
break;
case "bc":
townEle.innerHTML = " <option value='bc1'>白城1区</option> <option value='bc2'>白城2区</option> <option value='bc3'>白城3区</option>";
break;
//黑龙江市区
case "heb":
townEle.innerHTML = " <option>黑龙江1区</option><option>黑龙江2区</option> <option>黑龙江3区</option>";
break;
case "hh":
townEle.innerHTML = " <option>黑河1区</option> <option>黑河2区</option> <option>黑河3区</option>";
break;
case "dq":
townEle.innerHTML = " <option>大庆1区</option> <option>大庆2区</option> <option>大庆3区</option>";
break;
//辽宁市区
case "sy":
townEle.innerHTML = " <option>沈阳1区</option><option>沈阳2区</option> <option>沈阳3区</option>";
break;
case "dl":
townEle.innerHTML = " <option>大连1区</option> <option>大连2区</option> <option>大连3区</option>";
break;
case "yk":
townEle.innerHTML = " <option>营口1区</option> <option>营口2区</option> <option>营口3区</option>";
break;
}
}
</script>
</body>
</html>
效果如下图所示