1.JavaScript介绍
1.1介绍
JavaScript是一种面向对象思想的脚本语言,通过JavaScript可以实现用户与静态网页之间的交互,也称为动态网页技术(JavaScript+HTML+CSS)
1.2 JavaScript的结构
2.JavaScript基础语法
ECMAScript是JS的语法标准规范,常用的是ES5语法,作为学习的基础语法,ES6语法的更新,只需要掌握let、const关键词定义变量及函数式表达式的用法即可;函数式表达式结合Java中的Lambda的用法,该学习过程中不涉及函数式写法。
2.1输出测试
JS中的输出方式分两种
1.console,使用console.log()可以在控制台输出测试结果,在网页中按F12即可查看,也可以直接在控制台中进行输出测试
2.document,使用document.write()将内容输出在页面中
2.2 数据类型
js作为脚本语言,虽然使用的是面向对象的思想,但其本身比较灵活,在数据类型的定义上并没有严格意义上的规范,不需要指定类型,语言会根据后面的值自行推断类型,定义的时候只需要给到关键词var、let(es6)、const(es6)
其中的数据类型
属性 | 描述 |
---|---|
number | 数字类型 |
string | 字符串类型 |
boolean | true/false |
object | 对象(function、null) |
undefined | 未定义 |
变量定义
var count = 5;
console.log("count="+count);
// 在js中不区分单双引号
var name = "官小北";
console.log(name);
var bol = true;
// 未定义 没有给变量进行初始化操作
var unde;
console.log(unde);
类型判断
/* typeof 判断数据类型 */
console.log(typeof count,typeof name,typeof bool,typeof un,typeof obj);
2.3 运算符
JavaScript中的运算符和大多数编程语言中的运算符都接近,只有个别运算符因其灵活性而带来了些许不同
/* + */
let num = 1;
let numStr = num + "";
console.log(typeof num,typeof numStr);
/* - */
let str = "123";
let strNum = str - 0;
console.log(typeof str,str+1,typeof strNum,strNum+1);
/* / */
let a = 5;
console.log(a/2,a++);
/*
== 只判断值是否相等
=== 先判断类型再判断值是否相等
*/
console.log("123" == 123);
console.log("123" === 123);
let strTest = "123";
let numTest = 123;
console.log(strTest == numTest);
2.4 控制语句
2.4.1 条件控制语句-if
JavaScript通过if进行条件的判断从而实现不同的业务流程,但变量在定义时没有严格的类型限定,所以在使用时会自动进行类型转换
/* if 字符串与数字在进行判断时会自动进行类型转换*/
let score = "98";
if(score>90){
console.log("优秀");
}else{
console.log("just so so");
}
2.4.2 条件控制语句-switch
switch语句在进行case匹配时没有具体的类型限定,常见的类型都可进行匹配使用;break省略后会有“穿透”效果,default默认匹配可以不写
/* if 字符串与数字在进行判断时会自动进行类型转换*/
let season = "冬季";
switch(season){
case "冬季":
console.log("有点冷");
//break;
case "夏季":
console.log("比较热");
break;
default:
console.log("啥也不是");
break;
}
let bool = true;
switch(bool){
case true:
console.log(true);
break;
}
2.4.3 循环控制语句-for
在面向对象的编程语言中(例如:java、JavaScript等)大括号代表作用域,变量只能在该作用域中使用,域外是无法访问的;ES5的语法中使用var进行变量定义时是没有块级作用域的,此时循环中的变量在循环外也可以使用,ES6中使用let定义时有块级作用域,循环外无法访问
for(var x=0;x<5;x++){
console.log("var hello "+x);
}
console.log("循环外:"+x); //循环外可访问
for(let i=0;i<5;i++){
console.log("let hello "+i);
}
//console.log("循环外:"+i) //报错,无法找到该变量i
2.5 弹框效果
JavaScript中提供了三种弹框效果,分别为警告框(提示框)、对话框、确认框
//警告框
//alert("haha");
//在前端中所有的输入框,输入的结果都是字符串类型,如果没有输入默认是空字符串
let result = prompt("请输入喜欢的颜色");
console.log(result,typeof result);
/* let result = confirm("确定要删除吗?");
console.log(result); */
3.JavaScript常见API
3.1 Math对象
Math对象提供了数学相关的运算方法,常用的场景是随机数的使用
//abs() 求绝对值
console.log(Math.abs(-1));
//ceil() 向上取整
console.log(Math.ceil(11.5));
//floor() 向下取整
console.log(Math.floor(11.5));
//random() 随机数 0~1
console.log(Math.random())
3.2 Date对象
JavaScript中的Date对象可以获取当前日期,同时提供了可以分别获取日期中的年月日时分秒的方法,具体的显示格式可通过拼接实现
//Date对象
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let seconds = date.getSeconds();
let millSeconds = date.getMilliseconds();
//拼接日期
let dateTime = year+"年"+month+"月"+day+"号 "+hour+":"+minute+":"+seconds;
document.write(dateTime)
3.3 Array对象
JavaScript中提供了数组容器,用于存放多个元素,其长度可变且没有类型的限制
//定义长度为3的数组对象 Array
let array = new Array(3);
array[0] = 1;
array[1] = "abc";
array[2] = null;
array[3] = "haha";
console.log(array,array[0]);
console.log("-----------------------");
//定义指定值的数组对象
let array2 = new Array(1,"呵呵","嘿嘿");
console.log(array2);
console.log("-----------------------");
//简写形式,[]代表数组 {}代表json对象
let array3 = ['石坤坤',"何沛文","杨晨玙"];
let index = Math.floor(Math.random()*array3.length);
console.log(array3[index]);
数组中提供的常见函数
函数名 | 描述 |
---|---|
push() | 添加元素 |
pop() | 删除元素 |
sort() | 数组排序 |
3.4 字符串对象
通过new关键词创建的字符串对象,是以数组的形式进行输出的,如果想要按完整的字符串输出需要调用toString()方法
//String对象
let str1 = "hehe";
console.log(str1);
let str2 = new String("haha");
//以数组的方式输出
console.log(str2);
//以字符串的方式输出
console.log(str2.toString());
函数名 | 描述 |
---|---|
split() | 分割 |
substring() | 截取 |
lastIndexOf() | 获取指定字符所在的下标 |
let url = "http://www.baidu.com";
let urlArr = url.split(".");
console.log(urlArr);
//获取上传的文件的后缀
let fileName = "sadij45sa6d4a56sd45.as6d.webp";
let index = fileName.lastIndexOf(".");
let suffix = fileName.substring(index);
console.log(suffix);
JavaScript中的所有输入框中获取到的数据都是以字符串形式存在
//需求:求两个数的较大值,这两个数让用户输入,中间用逗号隔开prompt
function maxMethod(x,y){
return x>y?x:y;
}
//获取用户输入的结果
let userIn = prompt("请输入两个数字,中间逗号隔开,例如:3,4");
let numArray = userIn.split(",");
let max = maxMethod(parseInt(numArray[0]),parseInt(numArray[1]));
console.log(max);
4. 函数定义
函数是对某一个特定功能的封装,为了能更加方便、快捷的使用
4.1 系统函数
函数名 | 描述 |
---|---|
parseInt() | 转整数类型 |
parseFloat() | 转浮点类型 |
isNaN() | 判断是否是非数字 |
parseInt() 数字后面无论是小数或字符,都直接取整数
let num = '123a';
let parseResult = parseInt(num);
console.log(parseResult,typeof parseResult);//123,number
parseFloat() 数字后面如果有小数则保留小数,如小数都为零,则直接取整
let price = '12.35a';
let parsePrice = parseFloat(price);
console.log(parsePrice,typeof parsePrice);//12.35,number
let icePrice = '12.00';
let parseIcePrice = parseFloat(icePrice);
console.log(parseIcePrice,typeof parseIcePrice);//12,number
isNaN() 判断值是否是非数字,true非数字,false数字
let numStr = "abc";
console.log(isNaN(numStr));//true
let num = "123";
console.log(isNaN(num));//false
4.2 自定义函数
为了完成某一个特定的功能,由程序员自己定义的函数
语法:function 函数名(参数1,…){}
无返回值函数
//打印九九乘法表
function print(){
for(let x=1;x<10;x++){
for(let y=1;y<=x;y++){
document.write(y+"*"+x+"="+x*y+" ");
}
document.write("<br/>");
}
}
带有返回值的函数
//定义求较大值的函数
function maxMethod(x,y){
return x>y?x:y;
}
//调用
let max = maxMethod(5,6);
console.log(max);//6
5. JavaScript-BOM
BOM(Browser Object Module)主要以window对象、location对象、history对象、screen对象为主,本课程中只讲解location对象以及window对象中的定时器,其他对象可参考官方文档使用。
5.1 location对象
location对象主要用于控制地址栏中的地址信息
//location控制地址栏中的地址
let url = location.href;
console.log("当前网页中的地址:"+url);
//改变地址栏中的地址
location.href = "http://www.baidu.com";
5.2 window对象-定时器
JavaScript中的定时器分两种
setInterval() 以周期的方式开启定时器
closeInterval() 关闭定时器
setTimeout() 以间隔时间定义定时器,结合递归使用
closTimeout() 关闭定时器
setInterval定时器
//setInterval()开启定时器 clearInterval()关闭定时器 指定周期时间
let timer = setInterval(print,1000);
let i = 1;
function print(){
if(i==10){
stop();
}
console.log(i++);
}
//关闭定时器
function stop(){
clearInterval(timer);
}
setTimeout定时器
//setTimeout()开启定时器 clearTimeout()关闭定时器 指定间隔时间
let timer = null;
let i = 1;
function print(){
if(i==5){
stop();
return;
}
console.log(i++);
//递归调用
timer = setTimeout(print,1000);
}
print();
//关闭定时器
function stop(){
clearTimeout(timer);
}
6.JavaScript-DOM操作
DOM(Document Object Module)针对页面中的节点进行动态操作
6.1 元素获取
js中提供了四种根据基础选择器而来的获取元素的方式
获取方式 | 描述 |
---|---|
document.getElementById() | 根据id获取元素(唯一) |
document.getElementsByClassName() | 根据class名获取元素(一组) |
document.getElementsByTagName() | 根据标签名获取元素(一组) |
document.getElementsName() | 根据name属性值获取元素(一组) |
<input type="text" id="uname" name="hobby">
<input type="text" class="money" name="hobby">
<button type="button" class="money">获取元素</button>
//根据标签名获取元素
let btns = document.getElementsByTagName("button");
console.log(btns);
//根据类名获取
let eles = document.getElementsByClassName("money");
console.log(eles);
//根据id获取
let idInput = document.getElementById("uname");
console.log(idInput);
//根据name属性值获取
let hobbys = document.getElementsByName("hobby");
console.log(hobbys);
6.2 获取及修改元素内容
HTML中的元素分单标签与双标签,单标签以表单中的input为主
双标签获取方式
let btn = document.getElementsByTagName("button")[0];
let divNode = document.getElementsByTagName("div")[0];
//对象.innerHTML
console.log(btn.innerHTML);
console.log(divNode.innerHTML);
//对象.innerHTML=值
divNode.innerHTML = "改变后的值";
console.log("------------");
//对象.outerHTML
console.log(divNode.outerHTML);
outerHTML和innerHTML的区别
innerHTML获取双标签中的内容(不论是该内容时标签还是文本)
outerHTML获取双标签中的内容(不论是该内容时标签还是文本),同时包含了自身的标签
单标签获取方式
//对象.value 这个只能用于获取单标签的元素值
console.log(hobbys[0].value,hobbys[0].id,hobbys[0].name);
//对象.value=值
hobbys[1].value = "嘿嘿";
console.log(hobbys[1].value);
6.3 获取及修改元素的样式
<div style="color: darkgoldenrod;font-size: 14px;">
注意样式本身也是元素中的一个属性中的值
</div>
//1.先获取到对象
let divNode = document.getElementsByTagName("div")[0];
//2.对象.属性
console.log("颜色值:",divNode.style.color);
console.log("字体大小:",divNode.style.fontSize);
//3.对象.style.属性=值
divNode.style.fontSize = "20px";
divNode.style.color = "white";
divNode.style.backgroundColor = "rgb(155,255,255)";
案例:实现简易轮播图效果
<style type="text/css">
div{
width: 500px;
height: 200px;
margin: 100px auto;
background-color: #6495ED;
}
</style>
<div>
<img src="./1.gif" alt="">
</div>
let pic = document.getElementsByTagName("img")[0];
let index = 1;
function changePicture(){
if(index == 3){
index = 1;
}
pic.src = "./"+(index++)+".gif";
setTimeout(changePicture,1000);
}
changePicture();
案例2:使用第三方框架Swiper实现轮播效果
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!--引入第三方js-->
<script src="./js/swiper-bundle.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 切换选项
loop: true, // 循环模式选项
speed: 1000,
autoplay: {
delay:2000
},
effect:"flip",
pagination: {
el: '.swiper-pagination',
},
//如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
</script>
6.4 事件绑定
事件即用户对浏览器中的HTML元素进行了某些操作,浏览器根据用户的操作给出响应的整个过程中的触发形式
常见事件
事件名 | 描述 |
---|---|
onclick | 单击事件 |
onchange | 变化事件 |
onsubmit | 表单提交事件 |
onload | 页面加载事件 |
onclick单击事件
<input type="text">
<input type="text">
<button onclick="sumMethod()">计算</button>
<span>结果为:<strong></strong></span>
/*
操作流程
1.在输入框中输入要计算的数字
2.点击计算按钮进行计算
a.先获取到两个输入框中的数字
b.那两个结果进行运算
3.将计算后的结果在strong标签显示出来
将结果进行赋值操作
*/
//1.先获取到页面中需要用到的元素
let inNodes = document.getElementsByTagName('input');
let x = inNodes[0];
let y = inNodes[1];
let btn = document.getElementsByTagName("button")[0];
let strongNode = document.getElementsByTagName("strong")[0];
//2.定义任务
function sumMethod(){
//3.获取到输入框中的值进行加法运算
let result = parseFloat(x.value) + parseFloat(y.value);
//4.将结果赋值到strong标签上
strongNode.innerHTML = result;
}
onchange变化事件
<select name="pro" id="" onchange="changeMethod(this)">
<option value="hunan">湖南省</option>
<option value="shandong">山东省</option>
<option value="henan">河南省</option>
</select>
/*
select标签中提供了一个属性-selectedIndex(获取当前选中的下拉框中的下标-0)
*/
function changeMethod(obj){
console.log("---",obj.selectedIndex,obj.value);
}
onsubmit表单提交事件
<form action="" onsubmit="return check()">
用户名:<input type="text" name="uname">
密码:<input type="password" name="pwd">
<input type="submit" value="登录">
</form>
/*
onsubmit事件需要一个boolean类型的返回值作为表单是否提交的依据
*/
let inNodes = document.getElementsByTagName("input");
function check(){
let unameVal = inNodes[0].value;
if(unameVal==""){
return false;
}
return true;
}
onload页面加载事件
//onload函数是在页面加载完毕后才会执行其中的代码
window.onload = function(){
let btnNodes = document.getElementsByTagName("button");
btnNodes[0].onclick = show;
btnNodes[1].onclick = show;
function show(){
alert("--");
}
}
案例:实现购物车选择效果
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
#parent{
width: 1200px;
margin: 10px auto;
}
ul{
list-style: none;
}
ul li{
height: 70px;
padding: 5px;
border: 1px solid #b0b0b0;
}
ul li div{
float: left;
margin-right: 10px;
}
ul li div.pic,ul li div.check{
line-height: 55px;
}
ul li div.pic{
margin-top: 10px;
}
ul li div span{
color: red;
}
ul li div .desc{
font-size: 12px;
color: #B0B0B0;
}
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
<div id="parent">
全选<input type="checkbox" id="checkAll" onclick="stateChange(this)" />
<ul>
<li class="clearfix">
<div class="check">
<input type="checkbox" class="item" onclick="checkState()">
</div>
<div class="pic">
<img src="./3.jpg" width="50px" height="50px" alt="">
</div>
<div>
<h4>小蜜蜂扩音器</h4>
<p><span>¥9.9</span></p>
<p class="desc">小蜜蜂扩音器,只要9.9,买不了吃亏买不了上当</p>
</div>
</li>
<li class="clearfix">
<div class="check">
<input type="checkbox" class="item" onclick="checkState()">
</div>
<div class="pic">
<img src="./3.jpg" width="50px" height="50px" alt="">
</div>
<div>
<h4>星巴克马克杯</h4>
<p><span>¥199.9</span></p>
<p class="desc">星巴克马克杯,只要199.9,你值得拥有</p>
</div>
</li>
<li class="clearfix">
<div class="check">
<input type="checkbox" class="item" onclick="checkState()">
</div>
<div class="pic">
<img src="./3.jpg" width="50px" height="50px" alt="">
</div>
<div>
<h4>金属哑铃全套</h4>
<p><span>¥109.9</span></p>
<p class="desc">金属哑铃全套,只要109.9,渣男的道路近在咫尺</p>
</div>
</li>
</ul>
</div>
//每一个商品的选中状态要和全选按钮的选中状态保持一致,从而达到全选的效果
let checks = document.getElementsByTagName("input");
//全选全不选函数
function stateChange(obj){
//1.先获取到全选按钮的选中状态
let state = obj.checked;
//2.将所有的商品的选中状态和全选的选中状态保持一致
for(let i=1;i<checks.length;i++){
checks[i].checked = state;
}
}
//反选关联函数
function checkState(){
//当商品的复选框中有任意一个或多个处于未选中的状态,那全选复选框的状态就为未选中
for(let i=1;i<checks.length;i++){
//判断是否有未选中的复选框
if(!checks[i].checked){
//将全选框状态变为未选中状态
checks[0].checked = false;
return;
}
}
checks[0].checked = true;
}
案例2:随机点名效果
*{
margin: 0;
padding: 0;
}
h3{
height: 45px;
color: white;
text-align: center;
line-height: 45px;
background-color: #6495ED;
box-shadow: 3px 3px 5px #007AFF;
}
div{
width: 500px;
height: 400px;
margin: 100px auto;
box-shadow: 3px 3px 5px #ccc;
}
div h4{
height: 50px;
padding: 10px;
text-align: center;
}
div p{
width: 70%;
height: 45px;
line-height: 45px;
text-align: center;
margin: 40px auto;
}
div p input{
display: block;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
}
div p button{
width: 120px;
height: 35px;
color: white;
border: none;
outline: none;
background-color: #008B8B;
}
div p input,div p button{
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
<h3>TongBaiShan's name-list</h3>
<div>
<h4>name-list</h4>
<p><input type="text"></p>
<p><button onclick="show()">Start</button></p>
</div>
//获取元素
let nameNode = document.getElementsByTagName("input")[0];
let btnNode = document.getElementsByTagName("button")[0];
let nameArray = ['石坤坤',"何沛文","杨晨玙","王晨阳","张小豪","李鑫","丁铭扬","谢一飞"];
//定时器变量
let timer = null;
//设置默认值
nameNode.value = nameArray[0];
//显示姓名
function show(){
if(timer == null){
btnNode.innerHTML = "Stop";
btnNode.style.color = "red";
start();
return;
}
btnNode.style.color = "white";
btnNode.innerHTML = "Start";
stop();
}
//开启点名器
function start(){
//生成随机下标
let index = Math.floor(Math.random()*nameArray.length);
//根据下标拿到对应的名字
let name = nameArray[index];
//将名字在页面显示出来
nameNode.value = name;
//重复上述动作
timer = setTimeout(start,15);
}
//关闭定时器
function stop(){
clearTimeout(timer);
timer = null;
}
6.5 元素动态增删
//获取元素
let btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
//添加元素 document.createElement("标签名");
let aNode = document.createElement("a");
//给创建好的元素添加内容及相关的属性
aNode.innerHTML = "百度新闻";
aNode.href = "http://news.baidu.com";
//将创建好的元素放到指定的页面位置中 appendChild()
let divNode = document.getElementsByTagName("div")[0];
divNode.appendChild(aNode);
}
案例:表格动态增删
p{
text-align: center;
}
button{
width: 120px;
}
td{
height: 35px;
text-align: center;
}
span{
color: white;
font-size: 14px;
cursor: pointer;
padding: 5px;
margin-left: 15px;
}
span:nth-of-type(1){
background-color: darkcyan;
}
span:nth-of-type(2){
background-color: darkorange;
}
span:hover{
opacity: 0.7;
}
<p>
<button>create Element</button>
<button>delete Element</button>
</p>
<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%" align="center">
<thead>
<tr>
<th>用户编号</th>
<th>用户姓名</th>
<th>联系方式</th>
<th>操作方式</th>
</tr>
</thead>
</table>
let tabNode = document.getElementsByTagName("table")[0];
//找到两个按钮绑定事件
let btns = document.getElementsByTagName("button");
//添加元素
let index = 10000;
btns[0].onclick = function(){
//创建行元素及列元素
let trNode = document.createElement("tr");
let tdNode01 = document.createElement("td");
let tdNode02 = document.createElement("td");
let tdNode03 = document.createElement("td");
let tdNode04 = document.createElement("td");
//给列元素赋值
tdNode01.innerHTML = ++index;
tdNode02.innerHTML = '蔡文姬';
tdNode03.innerHTML = "120";
//创建操作栏中的标签
let spanNode = document.createElement("span");
let spanNode02 = document.createElement("span");
spanNode.innerHTML = "编辑";
spanNode02.innerHTML = "删除";
//将操作用的两个标签添加到操作栏中
tdNode04.appendChild(spanNode);
tdNode04.appendChild(spanNode02);
//将列添加到行中
trNode.appendChild(tdNode01);
trNode.appendChild(tdNode02);
trNode.appendChild(tdNode03);
trNode.appendChild(tdNode04);
//将行元素添加到表格中
tabNode.appendChild(trNode);
}
//删除元素
btns[1].onclick = function(){
//删除 remove() removeChild()
//找到全部的tr节点
let trNodes = document.getElementsByTagName("tr");
//找到最后一个tr节点
let lastTrNode = trNodes[trNodes.length-1];
//lastTrNode.remove();
tabNode.removeChild(lastTrNode);
}
7.JavaScript-JSON对象
JavaScript中提供了用于存储键值对的对象-JSON
使用方案一:单个json对象的使用
//语法:{key:value,key2:value2,...}
let user = {"id":1,"uname":"haha","password":"12345","sex":"男"};
console.log(user.id,user.uname,user.sex);
使用方案二:当有多个json对象需要存储时结合数组使用
//一个json对象相当于一个用户对象,如果是有多个用户对象就意味着有多个json对象,问题是多个json对象如何存储
let userJsonsArr = [
{"id":1,"uname":"haha","password":"12345","sex":"男"},
{"id":2,"uname":"xixi","password":"admin","sex":"女"},
{"id":3,"uname":"heihei","password":"root","sex":"男"}
];
for(let i=0;i<userJsonsArr.length;i++){
console.log(userJsonsArr[i].uname)
}
使用方案三:返回的数据中有多个对象且类型不同
let userOrdersJson = {
"code":200,
"msg":"success",
"data":[
{
"user":{"id":2,"username":"王晨阳","sex":"男"},
"order":[
{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-19"},
{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-20"}
]
},
{
"user":{"id":1,"username":"何沛文","sex":"男"},
"order":[
{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-17"},
{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-18"}
]
}
]
}
console.log(userOrdersJson.data[1].order[0].orderId)
案例:json结合元素动态增删实现表格数据展示
let tabNode = document.getElementsByTagName("table")[0];
//找到两个按钮绑定事件
let btns = document.getElementsByTagName("button");
//模拟后台返回的数据
let userOrders = {
"code":200,
"msg":"success",
"data":[
{"id":2,"username":"王晨阳","sex":"男"},
{"id":1,"username":"何沛文","sex":"男"}
]
}
//添加元素
btns[0].onclick = function(){
for(let i=0;i<userOrders.data.length;i++){
//创建行元素及列元素
let trNode = document.createElement("tr");
let tdNode01 = document.createElement("td");
let tdNode02 = document.createElement("td");
let tdNode03 = document.createElement("td");
let tdNode04 = document.createElement("td");
//给列元素赋值
tdNode01.innerHTML = userOrders.data[i].id;
tdNode02.innerHTML = userOrders.data[i].username;
tdNode03.innerHTML = userOrders.data[i].sex;
//创建操作栏中的标签
let spanNode = document.createElement("span");
let spanNode02 = document.createElement("span");
spanNode.innerHTML = "编辑";
spanNode02.innerHTML = "删除";
//将操作用的两个标签添加到操作栏中
tdNode04.appendChild(spanNode);
tdNode04.appendChild(spanNode02);
//将列添加到行中
trNode.appendChild(tdNode01);
trNode.appendChild(tdNode02);
trNode.appendChild(tdNode03);
trNode.appendChild(tdNode04);
//将行元素添加到表格中
tabNode.appendChild(trNode);
}
}
//删除元素
btns[1].onclick = function(){
//删除 remove() removeChild()
//找到全部的tr节点
let trNodes = document.getElementsByTagName("tr");
//找到最后一个tr节点
let lastTrNode = trNodes[trNodes.length-1];
//lastTrNode.remove();
tabNode.removeChild(lastTrNode);
}
8. 增强for循环
es5语法中提供了for…in循环用于增强普通循环的使用
/*
for-in循环,通常用于带有下标的集合数据的遍历,例如:数组
*/
let array = ["蔡文姬","澜","大鲨鱼","司马懿"];
/*for(let i=0;i<array.length;i++){
console.log(array[i]);
}*/
for (let index in array) {
console.log(array[index]);
}
es6中对for再次进行了优化
let array = ["蔡文姬","澜","大鲨鱼","司马懿"];
//遍历出来的val是对象
for (let val of array) {
console.log(val);
}
案例:省市联动
<select onchange="getIndex(this)">
<option>--请选择省份--</option>
</select>
<select onchange="getCityIndex(this)">
<option>--请选择城市--</option>
</select>
<select>
<option>--请选择区县--</option>
</select>
/*
显示所有的省份
1.从后台获取到所有的省份数据容器--省份数组
a、定义省份数组
2.将数组中的省份信息添加到省份的下拉框中
a、遍历省份数组,获取到每一个省份的信息
b、将每一个省份信息添加到下拉框中
创建一个option标签,进行赋值
*/
let selNodes = document.getElementsByTagName("select");
let proArr = ["河南省","湖南省"];
createMethod(proArr,0);
//城市下拉框操作
let cityArr = [
["--请选择城市--"],
["郑州市","开封市","洛阳市"],
["长沙市","湘潭市"]
];
let areaArr = [
[
["--请选择区县--"]
],
[
["二七区","高新区"],
["金明区","鼓楼区"],
["老城区","西厂区"]
],
[
["芙蓉区","天心区"],
["雨湖区","月塘区"]
]
];
//省份下标
let proIndex = 0;
//遍历城市数组,将城市信息添加到城市下拉框中(根据选择的省份确定要添加的城市数组)
function getIndex(obj){
//先清空之前的数据
selNodes[1].length = 0;
//先获取到用户选择的省份--通过下标来获取
proIndex = obj.selectedIndex;
//对应的具体城市数组
let citys = cityArr[proIndex];
createMethod(citys,1);
defaultArea(areaArr[proIndex][0],2)
}
//城市改变的函数
function getCityIndex(obj){
selNodes[2].length = 0;
//获取城市下标
let cityIndex = obj.selectedIndex;
//获取城市对应的区县数组
let areas = areaArr[proIndex][cityIndex];
createMethod(areas,2);
}
function defaultArea(areas,index){
selNodes[index].length = 0;
createMethod(areas,index);
}
//创建元素方法封装
function createMethod(arr,index){
for(let x=0;x<arr.length;x++){
//创建option标签
let optNode = document.createElement("option");
//给option标签赋值
optNode.innerHTML = arr[x];
//将创建好的option标签添加到省份的下拉框
selNodes[index].appendChild(optNode);
}
}
9.JavaScript-正则表达式
$('button').click(function(){
/* //先获取输入框中的值
let phone = $('input:eq(0)').val();
//定义验证规则
//let phoneVerify = /^1[0-9]{10}$/;
let phoneVerify = /^1\d{10}$/;
//进行验证
console.log(phoneVerify.test(phone));
let name = $('input:eq(1)').val();
let nameVerify = /^[0-9A-z]{6,12}$/i;
console.log(nameVerify.test(name)); */
let email = $('input:eq(0)').val();
//let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.[0-9A-z]{1,}/;
let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
console.log(emailVerify.test(email));
})