• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

最通俗易懂的JavaScript实用案例

开发技术 开发技术 3周前 (05-12) 19次浏览

前言:”人生最大的喜悦是每个人都说你做不到,你却完成它了!”你好!我是梦阳辰!快和我一起学习起来吧!

如果你没接触过JavaScript:以下文章对你有帮助。

最通俗易懂的JavaScript入门教程

最通俗易懂的JavaScript进阶教程

 

文章目录

  • 01.复选框的全选和取消全选
  • 02.JS的内置类Array
  • 03.BOM编程
  • 04.JSON
  • 05.设置table的tbody

 

01.复选框的全选和取消全选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> </head> <body> <script type="text/javascript" > window.onload=function () { var ff=document.getElementById("first"); var cc=document.getElementsByName("Meng1"); ff.onclick=function () { for( var i=0;i<cc.length;i++){ cc[i].checked=ff.checked; } } var all= cc.length; for(var i=0;i<cc.length;i++){ cc[i].onclick=function () { var checkedCount=0; for(var i=0;i<cc.length;i++){ if(cc[i].checked){ checkedCount++; } } ff.checked=(all==checkedCount);‘ } } } </script> <input type="checkbox" id="first"/>全选<Br> <input type="checkbox" name="Meng1" value="basketball"/>篮球<Br> <input type="checkbox" name="Meng1" value="football"/>足球<Br> <input type="checkbox" name="Meng1" value="badminton"/>羽毛球<Br> </body> </html>

2.获取下拉列表选中项的value

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取下拉列表选中项的value</title> </head> <body> <!-- <select onchange="alert(this.value)"> <option value="">--请选择省份</option> <option value="jiangxi">江西省</option> <option value="zhejiang">浙江省</option> <option value="fujiang">福建省</option> </select>--> <!--或者--> <script> window.onload=function () { var fisEle=document.getElementById("fis"); fisEle.onchange=function () { alert(this.value) } } </script> <select id="fis"> <option value="">--请选择省份</option> <option value="jiangxi">江西省</option> <option value="zhejiang">浙江省</option> <option value="fujiang">福建省</option> </select> </body> </html>

关于选择一个位置,而关联多个市区的问题
最通俗易懂的JavaScript实用案例
返回一个List集合,List集合响应浏览器,浏览器在解析集合转换成一个新的下拉列表。

动态地获取时间:
setInterval函数可以间隔一段时间调用函数

clearInterval函数可以取消上述函数的作用。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示网页时钟</title> </head> <body> <script type="text/javascript"> /*Js中内置的支持类:Date,可以用来获取时间/日期*/ //获取系统当前时间 var nowtime =new Date(); //输出 //document.write(nowtime); nowtime=nowtime.toLocaleDateString(); document.write(nowtime); document.write("<br>");//注意script脚本不能直接书写,得输出 //当以上个是不是想要的结果时,可以通过日期获取年月日等信息,定制日期格式 var t = new Date(); var year=t.getFullYear(); var month=t.getMonth();//0-11 var dayWeek = t.getDay();//获取一周得第几天(0-6) var day =t.getDate();//获取日 document.write(year+"年"+(month+1)+"月"+day+"日"); document.write("<br>"); //怎么获取时间戳 var times =t.getTime(); document.write(times); //显示系统时钟 </script> <script type="text/javascript"> function displayTime() { var time =new Date(); var strTime=time.toLocaleString(); document.getElementById("timeDiv").innerHTML=strTime; } //每隔一秒嗲要dispalyTime()函数 var v; function start(){ v=window.setInterval("displayTime()",1000);//setInterval间隔一段时间调用函数 } function stop() { v=window.clearInterval(v); } </script> <br><br> <input type="button" value="显示系统时间" onclick="start()"/> <input type="button" value="停止系统时间" onclick="stop()"/> <div id="timeDiv"></div> </body> </html>

最通俗易懂的JavaScript实用案例

02.JS的内置类Array

JS的数组类似python的列表。可以放数据的多种类型。自动扩容。

join()函数:将数组中的元素以括号中的字符连接起来。

push()函数,数组末尾添加元素。

pop()函数:弹出第一个元素。

可以看出JS中的数组可以自动地模拟栈数据结构,先进先出。

reverse()函数:数组反转。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内置类</title> </head> <body> <script type="text/javascript"> var arr=[]; alert(arr.length); //或者 var arr1=[1,4,false,"abc"] alert(arr1.length); //或者 var a1=new Array(3);//代表存储的长度 //或者 var a2=new Array(3,2);//代表存储的数据 alert(a2.length) </script> </body> </html>

03.BOM编程

1.open和close

1.BOM编程中,window对象是顶级对象,代表浏览器窗口。

2.window有open和close方法,可以开启窗口和关闭窗口。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>open和coles</title> </head> <body> <script type="text/javascript"> </script> <input type="button" value="开启百度(新窗口)" onclick="window.open(‘http://www.baidu.com‘);"/> <input type="button" value="开启百度(当前窗口)" onclick="window.open(‘http://www.baidu.com‘,‘_self‘);"/> <input type="button" value="开启百度(父窗口)" onclick="window.open(‘http://www.baidu.com‘,‘_parent‘);"/> <input type="button" value="开启百度(新窗口)" onclick="window.open(‘http://www.baidu.com‘,‘_blank‘);"/> <input type="button" value="开启百度(顶级窗口)" onclick="window.open(‘http://www.baidu.com‘,‘_top‘);"/> </body> </html>

2.消息框和确认框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>消息框和确认框</title> </head> <body> <script type="text/javascript"> function del() { var ok=window.confirm("确认删除数据吗?"); if(ok){ alert("删除成功!") } } </script> <input type="button" value="弹出消息框" onclick="window.alert(‘消息框!‘)"/> <input type="button" value="弹出消息框(删除)" onclick="del();"> </body> </html>

3.历史消息
window.history.back();

4.获取地址栏对象

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取地址栏对象</title> </head> <body> <script type="text/javascript"> function goBb(){ window.location.href="http://www.baidu.com"; } </script> <input type="button" value="百度" onclick="goBb()"/> </body> </html>

总结:往服务器发送请求的方式
1.表单from的提交

2.超链接

3.document.location

4.window.location

5.window.open(“url”)

6.直接在浏览器地址栏输入URL,确认

4.将当前窗口不是top窗口将其设置为top窗口
最通俗易懂的JavaScript实用案例

if(window.top!=window.self){ window.top.location=window.self.location; }

最通俗易懂的JavaScript实用案例

04.JSON

1.什么是JSON,有什么用?
JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据的交换模式)

JSON主要的作用:一种标准的数据交换格式。(目前非常流行,90%以上的系统都是采用JSON)

2.JSON是一种标准的轻量级的数据交换格式:
特点:
体积小,易解析

3.在实际开发中有两种数据交换格式:使用最多的一个是JSON,另一个是XML.

XML体积较大,解析麻烦,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML)

//创建JSON对象(JSON也可以成为无类型对象, var studentObj={ "sno" :"110", "sname" :"张三", "sex" :"男" }; //访问JSON对象属性 alert(studentObj.son+","+studentObj.sname+","+studentObj.sex); //之前没有使用JSON的时候,定义类,创建对象,访问对象的属性 Stuent=function(sno,sname,sex){ this.sno=sno; this.sname=sname; this.sex=sex; } var stu = new Student("111","LiSi","男"); alert(studentObj.son+","+studentObj.sname+","+studentObj.sex); //JSON数组 var students=[{"sno":"1","sname":"李四"},{"sno":"2","sname":"MengYangChen"}, {"sno":"3","sn ame":"XingKong"}]; //遍历 for(var i=0;i<students.length;i++){ var stuObj=students[i]; alert(stuObj.sno+","+stuObj.sname+","+stuobj.sex); }

XML范例:
最通俗易懂的JavaScript实用案例

3.JSON的语法格式

var studentObj={ "属性名" :"属性值", "属性名":"属性值", "属性名":"属性值" }; //访问JSON对象(JSON也可以称为无类型对象,轻量级,轻巧。体积小。易解析) //属性值可以为任意类型

最通俗易懂的JavaScript实用案例
4.eval函数
作用:将字符串当作一段JS代码解释并执行。

window.eval("var i=100;"); alert("i="+i);

最通俗易懂的JavaScript实用案例
在JS当中:[]和{}有什么区别?
[]是数组。

{}是JSON。

java中的数组:int[] arr={1,2,3};

JS中的数组:var arr=[1,2,3,4];

JSON:var jsonObj={“emai”:“[email protected]”,“age”:25};
最通俗易懂的JavaScript实用案例

05.设置table的tbody

案例:将Java传到浏览器的JSON数据,展示到浏览器上(重点)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //有这些json数据 var data= { "total": 4, "emps": [{"empno": 23, "name": "MengYangChen", "sal": 8000.0}, {"empno":24,"name":"XingKong","sal":900.00}, {"empno": 27, "name": "Meng", "sal": 800.0}, {"empno":29,"name":"Xing","sal":1000.00} ] }; //将数据展示到table当中 window.onload=function () { var displayEle=document.getElementById("display"); displayEle.onclick=function (){ var emps=data.emps; var Chars=""; for(var i=0;i<emps.length;i++){ var emp=emps[i]; Chars+="<tr>" Chars+="<td>"+emp.empno+"</td>"; Chars+="<td>"+emp.name+"</td>"; Chars+="<td>"+emp.sal+"</td>"; Chars+="</tr>" } //将字符串Chars输出到tbody中 document.getElementById("Yun").innerHTML=Chars; document.getElementById("count").innerText=data.total; } } </script> <input type="button" value="显示员工信息" id="display"/> <h2>员工信息表</h2> <hr> <table border="2px" width="80%"> <tr> <th>员工编号</th> <th>员工名字</th> <th>员工薪资</th> </tr> <tbody id="Yun"> <!--<tr> <td>


喜欢 (0)