最通俗易懂的JavaScript实用案例

Dear 丶 2023-03-13 05:21 45阅读 0赞

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

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

[最通俗易懂的JavaScript入门教程][JavaScript]

[最通俗易懂的JavaScript进阶教程][JavaScript 1]

### 文章目录 ###

*  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>
    
       
    
    
    
        <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>

关于选择一个位置，而关联多个市区的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70]  
返回一个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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]

# 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窗口**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 1]

# 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范例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 2]

**3.JSON的语法格式**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 3]  
**4.eval函数**  
作用:将字符串当作一段JS代码解释并执行。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 4]  
**在JS当中：\[\]和\{\}有什么区别？**  
\[\]是数组。

\{\}是JSON。

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

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

JSON：var jsonObj=\{“emai”:“zhangsan@123.com”,“age”:25\};  
![在这里插入图片描述][20200512120417138.jpg_pic_center]

# 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">
                
            </tbody>
        </table>
        总记录条数为<sapn id="count">0</sapn>
    </body>
    </html>

> “一眼就能看得到头，不是我们想要的生活，我们为之努力，不是为了飞黄腾达，睥睨群雄，而是努力让自己的生活多一种可能，给自己的未来多一份惊喜。”  
> 我是梦阳辰，期待下次与你相遇！

关注公众号【轻松玩编程】回复关键字“电子书”，“计算机资源”，“Java从入门到进阶”，”JavaScript教程“，“算法”，“Python学习资源”，“人工智能”等即可获取学习资源。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 2]

[JavaScript]: https://blog.csdn.net/jiahuan_/article/details/105895421
[JavaScript 1]: https://blog.csdn.net/jiahuan_/article/details/106005150
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70]: /images/20230312/f4d3193b59184a7e9c936b449e0466f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/39b5c610f9334d5e91f12904e35696c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 1]: /images/20230312/6571e3e03a584e10a8ab8ded6c095883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/fe94386422da4642a013fbc07307f180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 2]: /images/20230312/ce0a7b1af140439c9c35238769085ac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 3]: /images/20230312/acd89416770e418a87afe880e363657b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 4]: /images/20230312/5811511367b34d0482e9d253ece71ebf.png
[20200512120417138.jpg_pic_center]: /images/20230312/64e79ef769d94109b5148f2a6f2aa0b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/45c046a423a64938ac15ff1b9052a8d3.png