Javascript

js的笔记梳理

本文主要是介绍js的笔记梳理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一.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>
这篇关于js的笔记梳理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!