js的笔记梳理

2023-10-04 08:51:04

一.JS的组成
ECMAScript(核心):是JS的基本语法规范。
BOM：浏览器对象模型，提供了与浏览器进行交互的方法。
DOM：文档对象模型，提供了操作网页的方法。
二.js的引入方式
1.内部引入方式（内嵌式）
2.外部引入方式（外联式）

三.Js的定义
Js在6以后定义变量从var变成了let，但是由于其兼容性的问题，所以用var定义也是可以的。
四.JS的五种原始数据类型(重要)

数据类型	描述	示例
number	数值类型	1，2，3，3.14
boolean	布尔类型	true,false
string	字符串类型	“hello”,‘hello’
object	对象类型	new Date(),null
undefined	未定义类型	var a;

五.typeof操作符

作用:用来判断变量是什么类型
写法:typeof(变量名)或typeof 变量名
null与underfined的区别：
null:对象类型，已经知道了对象类型，但对象为空。

underfined:未定义的类型，并不知道是什么数据类型。
6.JS中与=之间的区别
==比较的是数值
===比较的是数值与类型
7.Js函数(重要)

8.Js常用事件的介绍(重要)

    <title>Js的常用事件的介绍</title>
</head>

<body>
    <input type="text" onfocus="display()" onblur="noplay()" />
    <script>
        function display() {
            console.log("获取焦点...");
        }
        function noplay() {
            console.log("失去焦点")
        }
        // 以上的方式是普通方式绑定，也可以通过匿名方式绑定。
    </script>

以上是普通方式的获取焦点和失去焦点的方式。

  <input type="text" id="text1" />
    <script>
        document.getElementById("text1").onmouseover = function () {
            console.log("鼠标移入");
        }
        document.getElementById("text1").onmouseout = function () {
            console.log("鼠标移出");
        }
        // 以上是通过匿名方式进行绑定鼠标移入移出事件

<select onchange="change1()">
        ]<option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    <script>
        function change1() {
            document.write("内容改变了。。。")
        }

以上这个是内容改变事件
9.Js的正则表达(了解)

   <title>Js正则表达式对象</title>
</head>

<body>
    <script>
        //目标:校验一个字符串是否由三个数字组成
        // var reg = /\d{3}/;模糊匹配：只要被匹配的字符串中有一段能够匹配上正则表达式，即为true
        var reg = /^\d{3}$/;//精确匹配：以^开头，以$结尾，指定匹配的开头和结尾。
        var str = "1234b";
        console.log(reg.test(str));
    </script>

10.Js数组常用方法(了解)

   <title>Js的数组对象</title>
</head>

<body>
    <script>
        var arr1 = [1, 2, "wei", "hello"];
        var arr2 = [3, 4, "ji", "3014"];
        console.log(arr1.concat(arr2));//将arr1与arr2合并，合并成一个新的数组
        console.log(arr1.join(arr2));//将arr1与arr2合并，合并成一个新的字符串
        console.log(arr2.reverse());//反转数组
    </script>

11.Js的BOM（重点）

window窗体（重点）
navigater浏览器信息
Screen屏幕信息
history历史信息
location当前路径信息（重点）
windows对象的常用方法

   <title>window对象的三种弹框</title>
</head>

<body>
    <script>
        //  alert("nihao"); 
        // var result = confirm("确定删除吗？");确定为true取消为false
        // prompt("请输入你的年龄");prompt是一个输入框
    </script>

    <title>windows对象两种定时器</title>
</head>

<body>
    <script>
        //1.规定时间之后完成某件事2.每隔一段时间完成一项工作
        //第一种定时器setTimeout只执行一次的定时器，该方法的第一个参数是定时执行的任务，第二个参数是定时时间，单位是毫秒
        // setTimeout(() => {
        //     document.write("testing")
        // }, 3000);
        //第二种定时器setInterval，每隔一段时间执行函数,该方法的返回值就是定时器的id
        setInterval(() => {
            document.write("testing?")
        }, 2000);
        //清除循环定时器---》clearInterval(定时器id)
    </script>

location对象

属性	作用
host	设置或返回主机名和当前URL的端口号
href	设置或返回完整的URL
port	设置或返回当前URL的端口号

location.href;获得路径
location.href=“url”；设置路径，跳转路径。
12.Js思维导图

13.Js的小案例

1.完成查看密码案例


<body>
    <input type="password" id="pwd" /><input type="button" value="查看密码" id="btn" />
    <script>
        document.getElementById("btn").onmousedown = function () {
            document.getElementById("pwd").setAttribute("type", "text");//点击事件触发的时候修改密码框为文本框
        }
        document.getElementById("btn").onmouseup = function () {
            document.getElementById("pwd").setAttribute("type", "password");//点击事件触发的时候修改密码框为文本框
        }
    </script>
</body>

2.表单校验案例

body>
    <form action="#" method="post" id="myform" onsubmit="return checkForm()">
        <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>
                            <td class="left">用户名：</td>
                            <td class="center">
                                <input id="username" name="user" type="text" class="in" onblur="u1()" />
                                <span id="usernamespan" style="color: red;"> </span>
                            </td>
                        </tr>
                        <tr>
                            <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开头, 第二为是3,4,5,7,8的11位数字-->
                            <td class="left">手机号码：</td>
                            <td class="center">
                                <input id="mobile" name="mobile" type="text" class="in" />
                                <span id="mobilespan"></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>
    <script>
        //  //1. 编写一个校验用户名的正则表达式
        function u1() {
            var re1 = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
            //只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
            //2. 使用正则表达式校验用户名输入框中的值
            var result = document.getElementById("username").value;//用户名的值
            // alert(result)
            console.log(result);
            if (re1.test(result)) {
                document.getElementById("usernamespan").innerHTML = "<img src=\"../img/gou.png\" width=\"40\" height=\"20\">";
                // 
            } else {
                document.getElementById("usernamespan").innerHTML = "输入有问题";
            }
        }
    </script>
</body>

3.轮播图案例

<title>轮播图</title>
</head>

<body>
    <div style="text-align: center;" id="tp">
        <img src="../img/banner_1.jpg" id="tp2" onm ouseover="stop()" onm ouseout="startMove()" />
    </div>
    <script>
        var i = 0;
        var tp1 = ["../img/banner_1.jpg", "../img/banner_2.jpg", "../img/banner_3.jpg"];
        //每隔三秒钟切换一张轮播图
        // var result = setInterval(() => {
        //     i++;
        //     if (i == 3) {
        //         i = 0
        //     }
        //     document.getElementById("tp2").setAttribute("src", tp1[i]);
        // }, 1000);
        var result;
        function startMove() {
            result = setInterval(() => {
                i++;
                if (i == 3) {
                    i = 0
                }
                document.getElementById("tp2").setAttribute("src", tp1[i]);
            }, 1000);
        }
        //页面加载的时候调用一次
        startMove();
        function stop() {



            clearInterval(result);//清除定时器
        }
        // function begin() {
        //     result = setInterval(() => {//注意局部变量
        //         i++;
        //         if (i == 3) {
        //             i = 0
        //         }
        //         document.getElementById("tp2").setAttribute("src", tp1[i]);
        //     }, 1000);
        // }
        //考虑到以上代码重复代码过多，考虑封装一个方法，将开始轮播与鼠标移出代码封装在一起。
    </script>
</body>

4.省市二级联动案例

 <title>省市二级联动</title>
</head>

<body>
    <select id="provinceSelect">
        <option value="0">请选择省份</option>
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="3">湖北省</option>
    </select>
    <select id="citySelect">
        <option>请选择城市</option>
    </select>
    <script>
        //准备数据
        var cities = [
            [],
            ["广州", "深圳", "惠州", "东莞"],
            ["长沙", "岳阳", "常德", "衡阳"],
            ["武汉", "黄冈", "宜昌", "荆州"]
        ]
        //省份的value刚好是对应城市的数组的下标
        document.getElementById("provinceSelect").onchange = function () {
            //遍历添加之前清除所有的城市
            document.getElementById("citySelect").innerHTML = "<option>请选择城市</option>";
            // console.log(this.value);this就是选择的城市，value就是对应的123
            //获取当前城市的列表
            console.log(cities[this.value]);
            //遍历出每个城市
            for (var i = 0; i < cities[this.value].length; i++) {
                var CityName = cities[this.value][i]
                // console.log(CityName)打印查看输出的城市名
                //创建option标签
                var optionElement = document.createElement("option");//<option></option>
                //设置option里面的内容是cityName
                optionElement.innerHTML = CityName;
                //将option添加到城市下拉框中
                document.getElementById("citySelect").appendChild(optionElement);
            }
        }
    </script>
</body>

码农公寓

相关文章