JavaScript基础

一:JavaScript

JavaScript简称js,是一门浏览器编程语言,它由三部分组成:

ECMAStript:描述了该语言的语法和基本对象
DOM(文档对象模型):描述处理网页内容的方法和接口
BOM(浏览器对象模型):描述与浏览器进行交互的方法和接口

二:JS下变量的声明

(1):变量的命名原则

变量名必须是数字,字母,_和$四种字符组成
变量名首字母不能是数字
变量名区分大小写
不能是JS中的保留字
尽量做到望文生义

(2):变量的声明let和var的区别

let 和 var 都是Js用来声明变量的修饰符.他们作用基本相同,但是let是ES6新增命令.他们的区别如下

let是声明块级作用域的变量,只在{}块内有效,而var声明的变量是全局作用域和局部作用域的,{}无法限定var的访问范围
let 配合for循环使用,其循环内的let变量不受外界影响
let声明的变量必须执行后才能使用此变量;也称为"暂时性死区"
let 声明的变量不能重复声明
let 让js拥有了块级作用域,让代码更加规范和安全

三:JS的数据类型

(1):数据类型

JS数据类型包括:三种主要数据类型(字符串string 数值number 布尔boolean) 两种复合数据类型(对象Object 数组Array) 两种特殊数据类型(空null 未声明undefined)

查看数据类型的三种方法

第一种方法:typeof : 运算符,返回的是一个表达式对象的数据类型的字符串,返回的值有六中(“number” “string” “boolean” “object” “function” 和 “undefined”)
第二种方法:::Object.peototype.tostring.call(变量名);
第三种方法:::变量名.constructor

(2):JS数据类型之间的转化(**)

①Number与字符串之间的转化

方法一:使用parseInt();当字符串内有字母时遇到第一个字母停止转化,直接返回前面非字母的数
方法二:使用Number()进行转化,当字符串内有字母时遇到第一个字母结束,返回NaN

②小数型和字符串进行转化

方法一:使用parseFloat()当字符串内有字母时遇到第一个字母停止转化,直接返回前面非字母的数
方法二:使用Number()当字符串内有字母时遇到第一个字母结束,返回NaN

③布尔型转化

只有值是: 0 false " " null undefined NaN这六种返回的是false

方法一:!!+变量名转化,
方法二:Boolean(变量名)

四:JS中遍历数组及对象的方法

(1):遍历数组

方法一:普通for循环

for(let i =1;i<=1000;i++){//2.3) 判断是否符合条件if(i%5==0 || i%6==0){document.write("<span>" + i + "</span>");//2.4) 判断是否需要换行if(++count % 20 == 0){document.write("<br>");}}

方法二:for in 循环,for(let i in arr){} 此时 i 是数组的下标

            //情况一:循环数组let arr = [1,2,4,2,9,8];for(let i in arr){          //i是数组角标console.log("arr[" + i + "] =" +arr[i] );}

(2):遍历数组

for in 循环 for(let d in document){ } 此时 d 代表对象的属性名

            for(let d in document){//d:代表对象的属性名console.log(d+"--->" + document[d]);}

对象.forEach(变量名=>{ 变量名.属性名 })

        // foreach循环遍历对象function testD(){//4.1) 定义学生对象数组let stu=[{"sid":"1","sanme":"张三","sex":"男","age":20},{"sid":"2","sanme":"李四","sex":"男","age":21},{"sid":"3","sanme":"王五","sex":"女","age":22}]//4.2) 循环stu.forEach(st=>{console.log("姓名:" + st.sanme + "性别:" + st.sex);})}

五:Array数组对象的基本用法

(1).定义数组

方法一: new Array(参数,参数,参数,参数),当只有一个参数时,代表数组长度,当有两个以上时代表数组的元素
方法二: [元素,元素,元素,元素] :直接赋值

(2).常用得方法

向数组中存放元素
- 第一种方法:使用数组的长度存放,因为js的数组是可变长度的,且从0角标开始
- 第二种方法:使用push()方法,向数组最后存放元素
- 第三种方法:使用unshift()方法在头部存放元素

        //1.3) 向数组中存放内容// 1.3.1) 使用数组长度存放,因为js数组是可变长度的数组arr3[arr3.length] = 10;for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");//1.3.2) 使用push()方法直接向数组的最后添加数据arr3.push(50);arr3.push(80);for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");//1.3.3) 使用unshift在头部添加元素arr3.unshift(8);for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");

删除元素
- 使用==shift()==删除头个元素
- 使用==pop()==移除最后一个元素
- 使用splice(参数1,参数2,参数3…)移除范围内的元素并添加新元素
  
  参数1:开始位置
  
  参数2:移除个数
  
  参数3,4,5…:在移除元素的位置上添加新元素

 //1.4) 使用shift将数组头部元素删除arr3.shift();for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");//1.7) splice()移除多个元素,有必要可以亿欧出后同时再添加元素arr3.splice(0,3,3,4,5,6);for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");

以指定规则连接数组元素组成字符串:join(’‘连接方式’’)

//1.5) join()连接数组元素let info = arr3.join(":");console.log(info);console.log("-----------------------------");

字符串反转:reverse()

        arr3.reverse();for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");

截取指定范围的数组,返回的也是数组slice(参数,参数)
- 当参数为正数只有一个时,代表从这个参数一直截取到末尾
- 当参数为负数只有一个时,代表lenght + 参数的位置向后截取全部
- 当参数有两个,代表(参数1,参数2]

        //1.8) slice()获取数组中的指定位置,返回值还是数组let arr4=arr3.slice(3);     //只指定一个开始,那么一直截取到结尾console.log(arr4.join(","));arr4=arr3.slice(3,6);       //[3,6)console.log(arr4.join(","));arr4=arr3.slice(-3);        //负数代表lenght+(-3)开始截取console.log(arr4.join(","));

对数组进行排序:==sort()==默认是自然排序
- sort():默认自然排序
- 重写sort的function可以自定义升降序 ==arr3.sort(function(a,b){return a-b})==升序

        //1.9.1) sort()默认排序arr3.sort();//------>自然排序for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");

//1.9.2) 指定义排序重写sort函数arr3.sort(function(a,b){// return a-b;     //升序return b-a;     //降序});for(let arr in arr3){console.log("arr3=[" + arr + "]=" +arr3[arr]);}console.log("-----------------------------");

六:String对象的常用方法

1.indexOf(“子字符串”)

            //2.得到指定字符第一个出现的位置下标let index = str.indexOf("l");console.log(index);         //2

2.lastIndexOf(“子字符串”)

            //3.得到指定字符串最后一次出现的位置let lastindex = str.lastIndexOf("l");console.log(lastindex);         //14

3.charAt(index)

            //4.得到指定位置的字符let ch = str.charAt(15);console.log(ch);                //c

4.toUpperCase()

            //5.将指定字符串转化为大写let upper = str.toUpperCase();     console.log(upper);

5.toLowerCase()

            //6.将指定字符串转化为小写let lower = upper.toLowerCase();    console.log(lower);

6.split(“指定字符”)

            //7.将字符串进行拆分,splitlet split = str.split(",");split.forEach(s=>{console.log(s);  });

7.replace(“原字符”,“新字符”)

replace(“o”,“z”)只能修改第一个符合条件的字符
replece(/o/g,“z”)全部修改o字符

//8.替换指定字符串// let replic = str.replace("o","z");      //只修改第一个// for(let i in replic){//     console.log(replic[i]);// }replic = str.replace(/o/g,"z");        //修改全部for(let i in replic){console.log(replic[i]);}

8.字符串的截取

方法一:范围截取:substring(start,end) [0,3)
方法二:开始和个数:substr(start,lenght)
方法三:范围截取,可以是负数,slice(),同数组的slice()用法

//9.截取字符串// 9.1) 方法一:使用范围截取substring()let substring = str.substring(0,3);console.log(substring);         //hel[0,3)//9.2) 方法二,使用开始位置和长度进行截取let subs = str.substr(4,8);console.log(subs);              //o,world,//9.3) 方法三:使用slice()方法截取,开始和结束范围截取,可以是负数let slice = str.slice(-3);console.log(slice);             //va!}

七:Math对象的常用方法

获取绝对值: Math.abs();
获取最大值: Math.max( , );
获取最小值: Math.min( , );
获取幂次方: Math.pow( , );
获取平方根: Math.sqrt( );
获取随机数: Math.random();
四舍五入: Math.round();
比这个数大的最小整数: Math.ceil();
比这个数小的最大整数: Math.floor();
获取正弦值: Math.sin();

八:Date对象常用方法

1.分别获取年月日时分秒周

年: getFullYear();
月: getMonth(); 从0月开始是1月
日: getDate();
时: getHours(); 24小时制
分: getMinutes();
秒: getSeconds();
周: getDay(); 从0开始是星期天

//方法一:获得时间对象的一部分function testA(){//定义时间对象let date = new Date();//定义星期的数组方便显示let week=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];let year = date.getFullYear();       //年let month = date.getMonth();        //月 :从0开始let data = date.getDate();          //日 :月中的日数let hour = date.getHours();         //小时:24小时值let minutes = date.getMinutes();    //分let seconds = date.getUTCSeconds();    //秒let day= date.getDay();             //周中的天数,0是星期天//将day转化为周数day = week[day];//拼接日期字符串let newDate = year + "年" + (month+1) + "月" + data + "日" + " " + hour + ":" + minutes + ":" +seconds +"   " + day;//为d1赋值document.getElementById("d1").innerHTML = newDate;//动态显示时间(使用setTimeout()方法固定时间刷新一次)setTimeout(() => {testA();}, 1000);}

2.获取日期和时间部分字符串进行拼接

日期部分:toLocaleDateString(); 国际标准格式
时间部分:toLocaleTimeString(); 12小时制

//方法二:function testB(){//定义时间对象let date = new Date();//定义星期的数组方便显示let week=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];//2.1) 获得日期部分的字符串(年月日)let localeDate = date.toLocaleDateString();//2.3) 获得时间部分的字符串(时分秒)let localeTime = date.toLocaleTimeString();//2.4) 获得星期数let index = date.getDay();let day = week[index];// 日期拼接let newdate = localeDate + " " + localeTime + " " + day;// 为d2添加时间document.getElementById("d2").innerHTML=newdate;//添加动态时间setTimeout(() => {testB();}, 1000);}

九:window对象(少用)

status属性----->状态栏属性
警告弹窗方法-------->alear()
确认对话框------------>confirm();---->"点击确定"返回的是true
输入对话框------------->prompt()
打开新窗口-------------->open();
onload事件------------->当浏览器完成对象的装载后立即触发

十:获取DOM(文档对象)对象

document.getElementById("#d")--------->获取指定id的标签对象的引用
document.getElementByName(".d")----->获取指定name标签属性的对象集合

十一:window对象下的定时器(实现动画效果)

1,使用setTimeout()方法实定时器,底层是递归的方式

setTimeout(()=>{递归的函数},毫秒值),返回的是一个标记(整数)
通过关闭指定标记清空动画效果:clearTime(标记);

//1.5) 指定定时器,2s改变颜色一次let flag = setTimeout(() => {testA();}, 2000);//1.6) 判断第五次清空动画if(index == 5){clearTimeout(flag);}}

2.使用setInterval()方法实现动画效果,此方法值只开启一次

setInterval(()=>{递归的函数},毫秒值),返回的是一个标记(整数)
通过关闭指定标记清空动画效果:clearTime(标记);

       function testA(){ //8.判断结束定时器的条件if(parseInt(ZL.D("d2").style.height) >=500){clearInterval(flag);}}var flag; window.onload = function(){ZL.D("d2").style.height="10px";//7.定时器实现动画效果flag = setInterval(()=>{testA();});testA();}

十二:event对象

event对象代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.

 <script>//1.将控件id定义为数组let controls = ["username","password","btn"];//2. 定义下标的变量let index = 0;//3. 获得事件状态event对象方法document.onkeydown=function(e){//4.判断如果用户触发了一次回车键(code码:13),那么将焦点移动到id数组的元素if(e.keyCode == 13){let id = controls[index % controls.length];//5.在指定id内设置焦点document.getElementById(id).focus();}}

十三:表单验证

onsubmit = “return 函数()”-------->根据返回的boolean判断是否允许提交
onblur=“函数(this)”----------------->获得焦点时执行此函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表单验证</title><script src="js/myjs.js"></script><script>// 1.定义需要判断都为true的变量var a = b = c = d = e = f = g = h = false; //1.判断username是否符合要求,如果符合,那么返回truefunction v_username(v){if(v.value.length == 0){document.getElementById("username_error").innerHTML = "用户名不能为空！";}else if(v.value.length <=6){ZL.V("username_error","用户名长度不能少于6个");}else{ZL.V("username_error","");//将验证信息清空并且将变量赋值为truea = true;}}function v_xing(v){if(v.value.length == 0){ZL.V("xing_error","姓式不能为空");}else {ZL.V("xing_error","");//将验证信息清空并且将变量赋值为trueb = true;}}//登录名不为空,且首字母只能是字符function v_loginname(v){let pattern = /[a-zA-Z]{1}/;if(v.value.length == 0){ZL.V("loginname_error","登录名不能为空");}else if (v.value.charAt(0).match(pattern) == null){//String.math(正则)ZL.V("loginname_error","首字母必须是字母");}else {ZL.V("loginname_error","");//将验证信息清空并且将变量赋值为truec = true;}}//2.5)验证密码function v_password(v){//2.5.1)定义密码验证规则的表达式let patt = /\w{8,}/;if(v.value.length == 0){ZL.V("password_error","密码不能为空！")}else if(!patt.test(v.value)){ZL.V("password_error","密码不能少于8位！")}else{ZL.V("password_error","");d = true;}}//2.6)重复密码的验证function v_repassword(v){if(v.value.length == 0){ZL.V("repassword_error","重复密码不能为空！");}else if(ZL.D("password").value != v.value){ZL.V("repassword_error","两次密码不一致！");}else{ZL.V("repassword_error","");e = true;}}//2.7)验证邮箱function v_email(v){//2.7.1)定义电子邮箱的正则表达式let patt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(v.value.length == 0){ZL.V("email_error","电子邮箱不能为空！");}else if(!patt.test(v.value)){ZL.V("email_error","电子邮箱不合法！");}else{ZL.V("email_error","");f = true;}}//2.8)验证年份function v_year(v){if(v.value.length == 0){ZL.V("year_error","年份不能为空！");}else if(isNaN(v.value)){ZL.V("year_error","年份只能是数字！");}else if(v.value.length != 4){ZL.V("year_error","年份只能是四位数字！");}else{ZL.V("year_error","");g = true;}}//2.9)验证天数function v_day(v){//2.9.1)验证天数的正则表达工var day_pat = /^(([1-9])|((1|2)[0-9])|30|31)$/;if(v.value.length == 0){ZL.V("day_error","天数不能为空！");}else if(!day_pat.test(v.value)){ZL.V("day_error","天数不合法！");}else {ZL.V("day_error","");h = true;}}//1.返回有个boolean给提交事件判断是否可提交function testA(){// return false;        此时状态不可提交return a && b && c && d && e && f && g && h;}</script></head>
<body><form method="post" action="a.jsp" name="form1" onsubmit="return testA()"><table width="1050" align="center"><tr><td colspan="3"><img src="img/11.png" width="250" height="60" /></td></tr><tr><td width="217" align="center">名字：</td><td width="412"><input name="username" type="text" id="username" onblur="v_username(this)" />    <!--  onblur:失去焦点事件 --></td><td width="157"><span id="username_error"></span></td></tr><tr><td align="center">姓氏：</td><td><input name="xing" type="text" id="xing" onblur="v_xing(this)" /></td><td><span id="xing_error"></span></td></tr><tr><td align="center">登录名：</td><td><input name="loginname" type="text" id="loginname" onblur="v_loginname(this)" /></td><td><span id="loginname_error"></span></td></tr><tr><td align="center">密码：</td><td><input name="password" type="password" id="password" onblur="v_password(this)" /></td><td><span id="password_error"></span></td></tr><tr><td align="center">再次输入密码：</td><td><input name="repassword" type="password" id="repassword" onblur="v_repassword(this)" /></td><td><span id="repassword_error"></span></td></tr><tr><td align="center">电子邮箱：</td><td><input name="email" type="text" id="email" onblur="v_email(this)" /></td><td><span id="email_error"></span></td></tr><tr><td align="center">性别：</td><td><input name="sex" type="radio" value="radiobutton" checked="checked" /> 男<input type="radio" name="sex" value="radiobutton" /> 女</td><td>&nbsp;</td></tr><tr><td align="center">爱好：</td><td><input name="interest" type="checkbox" name="interest" value="打球" /> 打球<input name="interest" type="checkbox" name="interest" value="下棋" /> 下棋<input name="interest" type="checkbox" name="interest" value="游泳" /> 游泳<input name="interest" type="checkbox" name="interest" value="唱歌" /> 唱歌<input name="interest" type="checkbox" name="interest" value="爬山" /> 爬山</td><td>&nbsp;</td></tr><tr><td align="center">出生日期：</td><td><input name="year" type="text" size=5 onblur="v_year(this)" />年<select name="month" id="month"><option value="一月" selected="selected">一月</option><option value="二月">二月</option><option value="三月">三月</option><option value="四月">四月</option><option value="五月">五月</option><option value="六月">六月</option><option value="七月">七月</option><option value="八月">八月</option><option value="九月">九月</option><option value="十月">十月</option><option value="十一月">十一月</option><option value="十二月">十二月</option></select><input name="day" type="text" id="day" size="5" onblur="v_day(this)" /> 天 </td><td><span id="year_error"></span><span id="day_error"></span></td></tr><tr><td align="center"><input type="reset" name="Submit" value="重填" /></td><td colspan="2" align="center"><input type="submit" value="同意以上服务条款，提交注册信息" /></td></tr><tr><td colspan="3"><img src="img/12.png" width="20" height="20" />阅读淘宝网许可协议 </td></tr></table></form>
</body>
</html>

十四:案例–>全选、全不选、反选

设置checked属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>全选、全不选、反选</title><style>div{background: blue;color: white;font: bold 20px 微软雅黑;width: 500px;/* height: 100px; */margin-top: 10px;}</style><!-- 1.引入js库 --><script src="JS/myjs.js"></script><script>//1. 定义selectAll事件,flag参数代表我们触发事件时传入的值function selectAll(flag){// 1.1) 获取所有复选框对象let checks = LW.N("habby");//1.2) 遍历,获得每一个对象并且赋值checkedfor(let i=0,len = checks.length;i<len;i++){checks[i].checked=flag;}}//2. 定义reverseAll()反选事件function reverseAll(){// 2.1) 遍历所有复选框对象for(let i = 0,len = LW.N("habby").length; i<len;i++){//第一种:判断是否被选中//     // 2.2) 判断当前对象是否被选择//     if(LW.N("habby")[i].checked){//         LW.N("habby")[i].checked = false;//     }else//     LW.N("habby")[i].checked = true;// }//第二种:直接将所有checked的值取反LW.N("habby")[i].checked = !(LW.N("habby")[i].checked);}}//3.查看选择,将选择的value的值写入到#d中function findSelect(){//2.0) 定义需要写入#d的文本let info = "";//2.1) 遍历所有复选框对象for(let i = 0,len = LW.N("habby").length; i<len;i++){//2.2) 获得所有被选中的复选框的值if(LW.N("habby")[i].checked){info += LW.N("habby")[i].value + ",";}}//2.3) 将最后一个,删除info = info.substr(0,(info.length-1));//2.3)将值写入到#d中LW.D("d").innerHTML = info;}//4.当用户点击复选框时就打印选择信息在#d中(第一种方法,将事件与上面的绑定)function chageSelect(){for(let i = 0,len = LW.N("habby").length; i<len;i++){LW.N("habby")[i].onclick = findSelect;}}window.onload = function(){chageSelect();}</script>
</head>
<body>请选择你的爱好：<br><input type="checkbox" name="habby" value="唱歌">唱歌<br><input type="checkbox" name="habby" value="跳舞">跳舞<br><input type="checkbox" name="habby" value="下棋">下棋<br><input type="checkbox" name="habby" value="打牌">打牌<br><input type="checkbox" name="habby" value="游泳">游泳<br><input type="button" value="全选" onclick="selectAll(true)"><input type="button" value="全不选" onclick="selectAll(false)"><input type="button" value="反选" onclick="reverseAll()"><input type="button" value="查看选择" onclick="findSelect()"><br><div id="d"></div>
</body>
</html>

十五:案例–>省市级联

调用select对象的options对象的add属性

new Option(i,j):新增一个option标签,i:text值,j:value值

LW.D(“citys”).options.add(new Option(cit[i],cit[i]));

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>省市级联</title><script src="js/myjs.js"></script><script>// //定义每个省份的市级数组// let provinces =[];//     provinces["湖南省"] = ['长沙','岳阳','常德','株洲','湘潭'];//     provinces['海南省'] = ['海口','三亚','文昌','琼州'];//     provinces['湖北省'] = ['武汉','黄冈','襄阳','十堰','荆州'] ;//     provinces['广东省'] = ['广州','深圳','珠海','佛山','东莞'];//上面的数组可以改造成对象：let provinces = {'湖南省':['长沙','岳阳','常德','株洲','湘潭'],'海南省' : ['海口','三亚','文昌','琼州'],'湖北省' : ['武汉','黄冈','襄阳','十堰','荆州'] ,'广东省' : ['广州','深圳','珠海','佛山','东莞']}// 1.定义选择的函数function changeProvince(v){// 2.获得所选的省份的数组let cit = provinces[v];//    console.log( LW.D("province").value);LW.D("citys").options.length = 0;//3. 遍历数组,将每个城市添加到#citys中for(let i = 0,len = cit.length;i<len;i++){LW.D("citys").options.add(new Option(cit[i],cit[i]));}}//让首个城市一加载完成就赋值到市级联框中window.onload = function(){// console.log( LW.D("province").value);changeProvince(LW.D("province").value);}</script>
</head>
<body>请选择省份：<select id="province" onchange="changeProvince(this.value)"><option value="湖南省">湖南省</option><option value="海南省">海南省</option><option value="湖北省">湖北省</option><option value="广东省">广东省</option></select>请选择城市：<select id="citys"></select>
</body>
</html>

十六:案例–>手风琴菜单

搭配鼠标监听事件:

onmouseover:鼠标移动上去时触发事件函数

onmouseout:鼠标移出时触发事件函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>手风琴菜单</title><style>button.accordion {background-color: #eee;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;margin-bottom: 0px;margin-top: 5px;border-radius: 10px 10px 0px 0px;}button.accordion.active,button.accordion:hover {background-color: #ddd;}div.panel {padding: 0 18px;background-color: white;display: none;      /*隐藏菜单,自动让出当前位置*/border: 1px solid #ddd;border-top: 0;margin-top: -17px;margin-bottom: 10px;border-radius: 0px 0px 5px 5px;}</style><script src="js/myjs.js"></script><script>//案例:当选择按钮选项卡时,隐藏所有div,再临近的div显示function testA(){//遍历将所有按钮绑定事件for(let i=0,len = LW.C("accordion").length; i<len; i++){LW.C("accordion")[i].onmouseover = mouseover;// LW.C("accordion")[i].onmouseout = mouseout;}}//当鼠标移动入此button时触发,隐藏所有div,再临近的div显示function mouseover(){for(let i=0,len = LW.C("panel").length; i<len; i++){LW.C("panel")[i].style.display = "none";//隐藏div}this.nextElementSibling.style.display = "block";//临近DIV显示}//当鼠标移出button时触发,隐藏所有div,效果不好// function mouseout(){//     for(let i=0,len = LW.C("panel").length; i<len; i++){//     LW.C("panel")[i].style.display = "none";//隐藏div// }// }window.onload = function(){testA();}</script></head>
<body><h2>手风琴动画</h2><p>点击以下选项显示折叠内容</p><button class="accordion">选项 1</button><div class="panel"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><button class="accordion">选项 2</button><div class="panel"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><button class="accordion">选项 3</button><div class="panel"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</body>
</html>

十七:案例–>表格操作

DOM.cloneNode(true):复制一个对象

DOM.appendChild(对象):在指定表格添加指定对象

LW.D(“tab”).deleteRow(index):在指定表格删除指定索引的行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>tablevaozhu</title><style>table {border: 1px solid #ddd;border-collapse: collapse;width: 800px;text-align: center;margin: 0 auto;}.first {background: #ccc;color: white;height: 45px;}td {border: 1px solid #ddd;height: 35px;}a {text-decoration: none;color: cadetblue;}a:hover {text-decoration: underline;color: gray;}input {width: 150px;border: 1px solid #ddd;}#demo {display: none;}</style><script src="js/myjs.js"></script><script>// 案例:当点击添加学生按钮时,触发事件addStudent1(),完成对#demo模板的复制,//当点击对应的删除键,获取对象层次中的父对象。将当前tr删除//定义点击添加事件function addStudent1(){//1.获得示范行DOM对象let row = LW.D("demo");//2,克隆一行let newRow = row.cloneNode(true);//设置克隆的样式,因为母版是隐藏的,所以复制出来的也是隐藏的newRow.style.display="table-row";//3,将其添加到表格中LW.D("tab").appendChild(newRow);}//定义删除事件function delStudent(v){//1.得到删除的标签的td的tr对象let row = v.parentNode.parentNode;//第一个是td对象,第二个是所在的tr对象//2.获得要删除的行的索引let index=row.rowIndex;//从表格中删除此行LW.D("tab").deleteRow(index);}</script>
</head>
<body><table id='tab'><tr><td colspan="6" align=right><a href="#" onclick="addStudent1()">添加学生</a></td></tr><tr class='first'><td>学号</td><td>姓名</td><td>性别</td><td>年龄</td><td>住址</td><td>操作</td></tr><tr id='demo'><td><input type="text" name='sid'></td><td><input type="text" name='sname'></td><td><select name="sex"><option value="男">男</option><option value="女">女</option></select></td><td><input type="text" name="age"></td><td><input type="text" name="addr"></td><td><a href="#" onclick="delStudent(this)">删除</a></td></tr></table>
</body>
</html>

JScript基本认知相关推荐

ECMAScript 6简单认知(针对后端)
ECMAScript 6简单认知 ECMAScript 6 简介 1.与JavaScript 的关系 2.与 ECMAScript 2015 的关系 ES6基本语法 1.let声明变量 2.const ...
《OpenCV3编程入门》学习笔记2 启程前的认知准备
第2章启程前的认知准备 2.1 OpenCV 官方例程引导与赏析位置:-\opencv\sources\samples\cpp 2.1.1彩色目标跟踪:Camshift (Continuously ...
在 Visual Basic .NET 或 JScript 代码中使用早期绑定
以往,开发人员喜欢使用 Visual Basic.VBScript 和 JScript 的原因之一就是它们所谓"无类型"的性质.变量不需要显式类型声明,并能够简单地通过使用来创建它 ...
IBM全面拥抱Linux，为“认知商业”提供POWER
ZD至顶网服务器频道 03月03日新闻消息(文/于泽):3月1日,IBM开年大会--IBM论坛2016盛大开启."认知商业"是IBM此次提出并覆盖未来一段时间的目标或者愿景,等同 ...
2018-3-9 论文（网络评论中非结构化信息表示与研究）笔记---模糊认知图的形式化表示
定义: 模糊认知图_百度百科 https://baike.baidu.com/item/%E6%A8%A1%E7%B3%8A%E8%AE%A4%E7%9F%A5%E5%9B%BE/20881975?f ...
Cognitive Inference：认知推理下的常识知识库资源、常识推理测试评估与中文实践项目索引...
作者 | 刘焕勇责编 | 李雪敬出品 | CSDN博客 CognitiveInference Cognitive Inference,认知推理.常识知识库.常识推理与常识推理评估的系统项目,以现有 ...
认知推理下的常识知识库资源、常识测试评估与中文实践项目索引
作者 | 刘焕勇责编 | 李雪敬出品 | CSDN博客 Cognitive Inference Cognitive Inference,认知推理.常识知识库.常识推理与常识推理评估的系统项目,以现 ...
认知智能，AI的下一个十年 | AI Procon 2020
整理 | 屠敏出品 | AI科技大本营(ID:rgznai100) 60 年间的「三起两落」 ,人工智能的沉浮变迁. 在 1956 年的夏天,人工智能在美国达特茅斯大学召开的学术会议之上蹒跚学步,吸 ...
认知智能再突破，阿里 18 篇论文入选 AI 顶会 KDD
作者 | 马超责编 | 屠敏头图 | CSDN 下载自东方 IC 出品 | CSDN(ID:CSDNnews) 近日,国际知识发现与数据挖掘协会KDD在官网(https://www.kdd.org ...
多模态商品推荐与认知智能背后的数学
在数据挖掘领域,KDD CUP是最有影响力.最高水平的国际顶级赛事,堪称大数据的"奥运会".阿里巴巴作为KDD CUP 2020的主办方为参赛团队准备了两大赛题,第一道是关于&qu ...

JScript基本认知