dya04 js_02

最新推荐文章于 2024-05-15 20:43:52 发布

娃娃哈哈

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量202

点赞数

分类专栏： web 文章标签： js javascript web

本文链接：https://blog.csdn.net/weixin_43525993/article/details/108172726

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 json的入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON数据格式</title>
</head>
<body>
<h2>JSON对象</h2>
<script type="text/javascript">
    //一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值
    var person = {
        firstname : "孙悟空",
        lastname : "弼马温",
        age : 18
    }
    //输出对象：对象名.属性名
    document.write("姓名: " + person.firstname + ", 昵称: " + person.lastname + ", 年龄: " + person.age + "<br/>");
    document.write(`姓名: ${person.firstname}, 昵称: ${person.lastname}, 年龄: ${person.age} <br/>`);
</script>
<hr/>

<h2>创建一个数组，其中每个元素是JSON对象</h2>
<script type="text/javascript">
    var personArr = [
        {
            firstname : "孙悟空",
            lastname : "弼马温",
            age : 18
        },
        {
            firstname : "猪八戒",
            lastname : "天蓬元帅",
            age : 19
        },
        {
            firstname : "沙和尚",
            lastname : "卷帘大将",
            age : 28
        }
    ];

    //遍历输出每个JSON对象的属性值
    /*
        Java中写法：
        for(类型 变量名: 集合)

        JavaScript中写法：
        for(类型 变量名 of 集合)
     */
    for(let person of personArr) {
        document.write(`姓名: ${person.firstname}, 昵称: ${person.lastname}, 年龄: ${person.age} <br/>`)
    }


</script>
<hr/>

<h2>JSON对象,其中属性是集合</h2>
<script type="text/javascript">
var xiyouji = {
    name : "唐僧",
    age : 15,
    brothers : [
        {
            firstname : "孙悟空",
            lastname : "弼马温",
            age : 18
        },
        {
            firstname : "猪八戒",
            lastname : "天蓬元帅",
            age : 19
        },
        {
            firstname : "沙和尚",
            lastname : "卷帘大将",
            age : 28
        }
    ]
}
document.write(`师傅 姓名: ${xiyouji.name}, 年龄: ${xiyouji.age}<br/>`);
document.write("徒弟们: <br/>")
    for(let personJson of xiyouji.brothers) {
        document.write(`姓名: ${personJson.firstname}, 昵称: ${personJson.lastname}, 年龄: ${personJson.age} <br/>`)
    }

</script>
</body>
</html>

在这里插入图片描述

2 json和字符串的相互转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON有关的函数</title>
</head>
<body>
<script type="text/javascript">
    //定义一个字符串，属性名一定是双引号
    var jsonStr = '{"name":"悟空", "age":18}';
    document.write("类型:" + typeof(jsonStr));
    //把字符串转成JSON对象
    var jsonObj = JSON.parse(jsonStr);
    document.write("<hr/>");
    document.write(jsonObj.name + " ====== " + jsonObj.age);
    document.write("<hr/>");
    //把JSON对象转成字符串
    var jsonStr2 = JSON.stringify(jsonObj);
    document.write("jsonStr2 = " + jsonStr2 + "<br/>");
    document.write("jsonStr2 类型:" + typeof(jsonStr2));

</script>

</body>
</html>

3 window.confirm 确认操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window中的方法</title>
</head>
<body>
<input type="button" value="删除订单" onclick="delOrder()" />
<script type="text/javascript">
    function delOrder() {
        /**
         * 出现一个确定框，有2个按钮
         * 点确定，返回true，否则返回false
         */
            // var flag = window.confirm("您确定要删除此订单吗?");
        var flag = confirm("2222222222 您确定要删除此订单吗?");
        // 如果选择的是 确定, 返回true; 否则 返回false
        console.log(flag);
        if(flag) {
            document.write("用户选择的是确定! 执行删除操作!")
        }else {
            document.write("用户选择的是取消! 可能是用户误操作!")
        }
    }
</script>
</body>
</html>

4 location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：location对象</title>
</head>
<body>
<!--点击以后调用方法-->
<input type="button" onclick="location.reload()" value="刷新"> <br/>
<input type="button" onclick="history.back()" value="后退"> <br/>
<input type="button" onclick="history.go(-1)" value="后退"> <br/>

<script type="text/javascript">

    //1. 获取属性值，得到当前访问的地址
    console.log("当前页面地址: " + location.href);

    //2. 设置属性值，跳转到指定的页面(常用)
    // location.href = "http://www.jd.com"; // (推荐)

    //location是window的一个属性，省略了window
    //window.location.href = "http://www.baidu.com";

    //location对象默认的属性是href，href也可以省略
    // location = "http://www.tianmao.com";

    //获取?后面的参数字符串
    let canshu = location.search;
    console.log(canshu);

    //显示现在的时间
    document.write(new Date().toLocaleString())
</script>
</body>
</html>

5 倒计时跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转</title>
</head>
<body>
<span id="counter">5</span>秒以后跳转

<script type="text/javascript">
    /*
    分析：
    1.用到倒计时：window.setInterval()
    2.页面跳转：location.href
    3.修改标签中文字使用属性：innerText
    */
    // 声明一个变量
    var num = 5;

    // 每隔1秒更新秒数
    setInterval(function(){
        // 判断
        if(num == 0) {
            location.href = "http://www.baidu.com";
        } else {
            // 将变化后的秒数显示在标签中
            document.getElementById("counter").innerText = num;
        }
        // 让总秒数-1
        num--;
    }, 1000);

</script>
</body>
</html>

6 会动的时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会动的时钟</title>
</head>
<body>
<input type="button" value="开始" id="btnBegin">
<!--disabled就元素不可用-->
<input type="button" value="暂停" id="btnPause" disabled="disabled">
<hr/>

<h1 id="clock" style="color: darkgreen"></h1>

<script type="text/javascript">

    // 变量
    var timer;

    // 需求1: 点击开始按钮, 就将电子始终开始走
    document.getElementById("btnBegin").onclick = function() {
        // setInterval(函数, 2000)
        timer = setInterval(function() {
            // 将当前时间显示 id=clock的标签中
            document.getElementById("clock").innerText = new Date().toLocaleString();
        }, 1000);
        // 让开始按钮 不可用
        document.getElementById("btnBegin").disabled = true;
        // 让暂停按钮 可用
        document.getElementById("btnPause").disabled = false;
    }

    // 需求2: 点击结束按钮, 将电子钟暂停
    document.getElementById("btnPause").onclick = function() {
        // setInterval(函数, 2000)
        clearInterval(timer);
        // 让开始按钮 可用
        document.getElementById("btnBegin").disabled = false;
        // 让暂停按钮 不可用
        document.getElementById("btnPause").disabled = true;
    }
</script>
</body>
</html>

7 innerHtml 和 innerText的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerText和innerHTML的区别</title>
</head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content1">xxxxxxx</span>
<span id="content2">xxxxxxx</span>

<script type="text/javascript">
    // 需求: 点击按钮后, 将内容放到 span标签中
    //  1 给按钮绑定单击事件
    document.getElementById("btn").onclick = function() {
        // 将内容放到 span标签中
        document.getElementById("content1").innerText = "<h1 style='color:red'>32期 天生傲娇111</h1>";
        document.getElementById("content2").innerHTML = "<h1 style='color:green'>32期 天生傲娇222</h1>";
    }
</script>
</body>
</html>

8 dom的常用操作(查)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM：查找元素的方法</title>
    <style>
        table {
            /*细边框样式*/
            border-collapse: collapse;
            width: 500px;
        }
    </style>
</head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1">
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
</table>

<script type="text/javascript">
    // 目标: 单击按钮时, 让表格隔行变色
    // 单击按钮时
    document.getElementById("b1").onclick = function () {
        // 获取页面中的所有tr
        var trObjArr = document.getElementsByTagName("tr");
        for (let i = 0; i < trObjArr.length; i++) {
            const trObj = trObjArr[i];
            // 判断
            if(i%2==0) {
                trObj.style.backgroundColor = "lightyellow";
            }else {
                trObj.style.backgroundColor = "lightblue";
            }

        }
    }

</script>

<hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>
<!--要选中一个checkbox需要设置checked=true，表示选中，否则就没选中-->
<input type="checkbox" name="product" >自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机

<script type="text/javascript">
    //通过css的#id选择器来选中元素
    // 1 给按钮绑定单击事件
    // document.getElementById("b2").onclick = function () {
    //     alert(1111);
    // }

    document.querySelector("#b2").onclick = function() {
        // 根据name属性值 选中一组标签对象
        var productObjArr = document.getElementsByName("product");
        for (const productObj of productObjArr) {
            productObj.checked = true; // ture 选中, false 取消选中
        }
    }
</script>
<hr/>

<input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客</a>
<a class="company">传智播客</a>
<a class="company">传智播客</a>

<script type="text/javascript">
    document.getElementById("b3").onclick = function () {
        // 根据class属性值 获取一组标签
        var companyObjArr = document.getElementsByClassName("company");
        for (let i = 0; i < companyObjArr.length; i++) {
            const companyObj = companyObjArr[i];
            companyObj.href = "http://www.itcast.cn";
        }
    }
</script>
</body>
</html>

9 dom 增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiv"></div>
<script>
    // 目标: 创建a标签显示到页面上
    // 方式一
    // // 创建a标签 <a></a>
    // var aObj = document.createElement("a");
    // // 设置属性 <a href="http://www.jd.com"></a>
    // aObj.setAttribute("href", "http://www.jd.com");
    // // 设置内容 <a href="http://www.jd.com">京东</a>
    // aObj.innerText = "京东";
    // // 将a标签 放到 div中
    // document.getElementById("myDiv").appendChild(aObj);

    // 方式二
    var str = "<a href='http://www.baidu.com'>百度</a>";
    document.getElementById("myDiv").innerHTML = str;
</script>	

</body>
</html>

10 二级联动

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>
<select id="province">
    <option>--请选择省份--</option>
</select>
<select id="city">
    <option>--请选择城市--</option>
</select>
</body>

<script>
    // 省份数据
    var provinces= ["广东省","湖南省","广西省"];
    // 城市数据，数据是一个二维数组，一维中每个元素是一个数组
    var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];

    // 需求1: 初始化省级信息
    var provinceStr = `<option>--请选择省份--</option>`;
    for (let i = 0; i < provinces.length; i++) {
        provinceStr += `<option value="${i}">${provinces[i]}</option>`;
    }
    //console.log(provinceStr);
    document.getElementById("province").innerHTML = provinceStr;

    // 需求2: 当省发生变化时, 加载市级信息
    document.getElementById("province").onchange = function () {
        console.log(this.value);
        //var provinceVal = document.getElementById("province").value;
        var provinceVal = this.value;
        var cityArr = cities[provinceVal];

        var cityStr = `<option>--请选择城市--</option>`;
        if(cityArr!=null && cityArr.length>0) {
            for (let i = 0; i < cityArr.length; i++) {
                cityStr += `<option value="${i}">${cityArr[i]}</option>`;
            }
            //console.log(cityStr);
        }
        document.getElementById("city").innerHTML = cityStr;
    }

</script>
</html>

11 正则写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<script type="text/javascript">
    /**
     * 创建正则表达式的2种方式：
     * 1. new RegExp("正则表达式")
     * 2. /正则表达式/
     *
     * 判断正则表达式是否匹配字符串的方法：
     * boolean 正则表达式对象.test(字符串) 如果匹配返回true，否则返回false
     * 与Java不同，Java默认是精确匹配。JS默认是模糊匹配，只要包含这个正则表达式的内容就可以
     * 结论：如果要在JS中精确匹配，必须以^开头，以$结尾
     */
    // 匹配含有三个数字
    var reg1 = new RegExp("\\d{3}");
    // document.write(reg1.test("123") + "<br/>"); // true
    // document.write(reg1.test("a123") + "<br/>"); // true
    // document.write(reg1.test("123z") + "<br/>"); // true
    // document.write(reg1.test("a123z") + "<br/>"); // true

    document.write("<hr/>")
    // 匹配以3个数字开头的
    var reg2 = new RegExp("^\\d{3}");
    // document.write(reg2.test("123") + "<br/>"); // true
    // document.write(reg2.test("a123") + "<br/>"); // false
    // document.write(reg2.test("123z") + "<br/>"); // true
    // document.write(reg2.test("a123z") + "<br/>"); // false
    //
    // document.write("<hr/>");

    // 匹配三个数字结尾的
    // var reg3 = new RegExp("\\d{3}$");
    // document.write(reg3.test("123") + "<br/>"); // true
    // document.write(reg3.test("a123") + "<br/>"); // true
    // document.write(reg3.test("123z") + "<br/>"); // false
    // document.write(reg3.test("a123z") + "<br/>"); // false
    //
    // document.write("<hr/>");

    // 正确写法
    var reg4 = new RegExp("^\\d{3}$");
    document.write(reg4.test("123") + "<br/>"); // true
    document.write(reg4.test("a123") + "<br/>"); // false
    document.write(reg4.test("123z") + "<br/>"); // false
    document.write(reg4.test("a123z") + "<br/>"); // false
    document.write("<hr/>");
    
    /*
    使用第2种写法
     */
    var reg5 = /^\d{3}$/;
    document.write(reg5.test("123") + "<br/>"); // true
    document.write(reg5.test("a123") + "<br/>"); // false
    document.write(reg5.test("123z") + "<br/>"); // false
    document.write(reg5.test("a123z") + "<br/>"); // false

</script>
</body>
</html>

12 正则修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式匹配模式</title>
</head>
<body>
<script type="text/javascript">
    /*
    i 忽略大小写比较
    1. new RegExp("正则表达式","匹配模式")
    2. /正则表达式/匹配模式
     */
    var reg1 = new RegExp("^cat$");
    document.write(reg1.test("CAT") + "<br/>");  // false
    document.write(reg1.test("Cat") + "<br/>"); // false
    document.write("<hr/>");

    var reg2 = new RegExp("^cat$", "i");
    document.write(reg2.test("CAT") + "<br/>");  // true
    document.write(reg2.test("Cat") + "<br/>"); // true
    document.write("<hr/>");

    var reg3 = /^cat$/;
    document.write(reg3.test("CAT") + "<br/>");  // false
    document.write(reg3.test("Cat") + "<br/>"); // false
    document.write("<hr/>");

    var reg4 = /^cat$/i;
    document.write(reg4.test("CAT") + "<br/>");  // true
    document.write(reg4.test("Cat") + "<br/>"); // true
</script>
</body>
</html>

13 注册案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>验证注册页面</title>
        <style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 20px;
			}
			.main {
				width: 525px;
				margin-left: auto;
				margin-right: auto;
			}
			.hr_1 {
				font-size: 14px;
				font-weight: bold;
				color: #3275c3;
				height: 35px;
				border-bottom-width: 2px;
				border-bottom-style: solid;
				border-bottom-color: #3275c3;
				vertical-align: bottom;
				padding-left: 12px;
			}
			.left {
				text-align: right;
				width: 80px;
				height: 25px;
				padding-right: 5px;
			}
			.center {
				width: 280px;
			}
			.in {
				width: 130px;
				height: 16px;
				border: solid 1px #79abea;
			}

			.red {
				color: #cc0000;
				font-weight: bold;
			}

			div {
				color: #F00;
			}
        </style>
        <script type="text/javascript">
            function checkAll() {
                // 如果通过了所有的校验, 返回true; 否则 返回false
                var flag1 = checkUser();
                var flag2 = checkMobile();
                return flag1 && flag2;
            }

            // 需求: 校验用户名
            function checkUser() {
                // 1 获取用户输入的值
                let userVal = document.getElementById("user").value;
                // 2 创建正则对象 : 用户名 只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
                var reg = /[a-zA-Z]\w{3,15}/;
                // 3 通过正则校验, 返回boolean结果
                var flag = reg.test(userVal);
                // 4 判断
                if(flag) {
                    // 4.1 如果合法, 显示对勾图片, 返回true
                    document.getElementById("userInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;
                    return true;
                }else {
                    // 4.2 如果不合法, 提示错误信息, 返回false
                    document.getElementById("userInfo").innerHTML = `用户名格式不对!`;
                    return false;
                }
            }

            // 校验手机号的格式
            function checkMobile() {
                // 1 获取用户输入的值
                let mobileVal = document.getElementById("mobile").value;
                // 2 创建正则对象 : 手机号：/^1[3456789]\d{9}$/
                var reg = /^1[3456789]\d{9}$/;
                // 3 通过正则校验, 返回boolean结果
                var flag = reg.test(mobileVal);
                // 4 判断
                if(flag) {
                    // 4.1 如果合法, 显示对勾图片, 返回true
                    document.getElementById("mobileInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;
                    return true;
                }else {
                    // 4.2 如果不合法, 提示错误信息, 返回false
                    document.getElementById("mobileInfo").innerHTML = `手机号格式不对!`;
                    return false;
                }
            }
        </script>
    </head>

    <body>
        <!--表单提交事件:  return true 正常提交, return false 没办法提交-->
        <form action="server" method="post" id="myform" onsubmit="return checkAll()">
            <table class="main" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
                </tr>
                <tr>
                    <td class="hr_1">新用户注册</td>
                </tr>
                <tr>
                    <td style="height:10px;"></td>
                </tr>
                <tr>
                    <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                            <td class="left">用户名：</td>
                            <td class="center">
                                <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                                <span id="userInfo" style="color:red"></span>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 输入长度大于6个字符 -->
                            <td class="left">密码：</td>
                            <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" />
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 与密码相同 -->
                            <td class="left">确认密码：</td>
                            <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 邮箱格式要正确 -->
                            <td class="left">电子邮箱：</td>
                            <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                            <td class="left">手机号码：</td>
                            <td class="center">
                                <input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/>
                                <span id="mobileInfo" style="color:red"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 要正确的日期格式 -->
                            <td class="left">生日：</td>
                            <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">&nbsp;</td>
                            <td class="center">
                            <input name="" type="image" src="img/register.jpg" />
                            </td>
                        </tr>
                    </table></td>
                </tr>
            </table>
        </form>
    </body>
</html>

娃娃哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
dya04 js_02

1 json的入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSON数据格式</title></head><body><h2>JSON对象</h2><script type="text/javascript"> //一个person对象的JSON对
复制链接

扫一扫