2022/07/12 学习笔记（day05）JS内置函数

激进的黄瓜

已于 2022-07-15 13:51:59 修改

阅读量184

点赞数 3

分类专栏： JS 新手文章标签： javascript

于 2022-07-12 19:06:31 首次发布

本文链接：https://blog.csdn.net/Dshuai7191/article/details/125749298

版权

新手同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

保持谦卑，虚心学习，向前走，向上看

JS内置函数：

Array:

1.concat()连接

2.join('-')设置分隔符连接数组为一个字符串

3.pop()删除最后一个元素

4.sort()排序，从小到大排序

Global：

1.isNaN()：判断一个值是不是数字

2.parseFloat()：把一个整数转换成小数

3.parseInt()：把一个小数转成整数，取整

4.number()：把一个值转成number类型

5.string()：把其他类型转成字符串110 120 119

String：

1.charAt(1)：取出指定位置的字符

2.indexOf('a')：判断指定的字符是否存在，如果存在返回下标，如果不存在，返回-1

3.lastIndexOf('a')：从后往前找

4.replace('a','b')：替换字符串

5.split('-')：根据-去拆分字符串，得到一个数组

6.substring(1,6)：字符串截取

Math：

1.ceil()向上取整

2.floor()向下取整

3.round()四舍五入

4.random()随机，生成一个0-1的随机数

5.tan() sin cos cot

6.E PI

Date：

1.new Date();获取系统当前日期

2.getDate()：返回日期的日 1~31

3.getHours()：返回时间中的时0~23

4.getMinutes()：返回时间中的分

5.getSeconds()：返回时间中的秒

6.getTime()：获取系统当前时间

7.getYear()：获取年

获取HTML元素：

1.根据id去抓取HTML元素

let div1 = document.getElementById("div1");

console.log(div1);

2.根据class抓取HTML元素，得到的是一堆元素

let divs = document.getElementsByClassName("div1");

console.log(divs[0]);

3.根据tag抓取HTML元素，得到的是一堆元素

let divs = document.getElementsByTagName("div");

console.log(divs[0]);

2.新方法

1.根据选择器去抓取一个元素

let div = document.querySelector('.div2');

console.log(div);

2.根据选择器去抓取全部元素

let divs = document.querySelectorAll('.div1');

console.log(divs[0]);

let div = document.querySelector("div");

3. 获取元素内部的文本，不会获取到内部的HTML标签

console.log(div.innerText);

4.获取元素内部的所有内容，包括HTML标签

console.log(div.innerHTML);

5.改变元素的内容

div.innerText = "<h1>我是通过JS来的</h1>";

div.innerHTML = "<h1>我是JS来的</h1>";

事件：

事件就是当我们和HTML标签元素发生交互时产生的行为

onclick：单击事件

ondblclick：双击事件

onblur：失去焦点

onfocus：获得焦点

onchange：改变

onload：加载

今日例题：

（1）需求：当用户名==admin，密码==123456时，提示登录成功！

否则，提示用户名或密码错误

思路：给按钮添加单击事件

当点击按钮时，获取用户名和密码框输入的值，

然后进行判断，if()登录成功else用户名或密码错误！

正确答案：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <p>
            账号：<input type="text" id="username">
        </p>
        <p>
            密码：<input type="password" id="password">
        </p>
        <p>
            <input type="button" value="登录" onclick="login()">
        </p>

        <script>          
            function login(){
                // 拿用户名框输入的内容
                let username = document.querySelector("#username").value;
                let password = document.querySelector("#password").value;
                if(username == "admin" && password == "123456"){
                    alert("登录成功！");
                } else {
                    alert("用户名或密码错误！");
                }
            }
        </script>
    </body>
</html>

（2）在用户名的文本框中输入用户名，

如果用户名为admin，则在span中显示用户名已被占用

否则，显示用户名可用！

分析：

需要给文本框添加onchange，onblur，出发函数

需要向span中写入内容！innerText innerHTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        用户名：<input type="text" id="username" onblur="valid()">
        <span></span>

        <script>
           function valid(){
                let username = document.querySelector("#username").value;
                let span = document.querySelector("span");
                if(username == "admin"){
                    // 用户名已被占用
                    span.innerText = "用户名已被占用！"
                }else {
                    // 用户名可用
                    span.innerText = "用户名可用！";
                }
           }

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

（3）思路：

1.抓取省的下拉菜单，知道你选择了哪个省

2.判断选择了哪个省

3.构建市的下拉菜单选项

4.抓取市的下拉菜单

区的注意事项：

1.初始状态区没有选项的

2.选择了省，区没有选项

3.选择了省，选择了市，选择了区，切换了一下省

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <select id="sheng" onchange="setShi()">
            <option>---请选择省---</option>
            <option value="jl">吉林省</option>
            <option value="ln">辽宁省</option>
        </select>
        <select id="shi">
            <option>---请选择市---</option>
        </select>
        <select id="qu">

        </select>
        <script>
            function setShi(){
               let sheng = document.querySelector("#sheng").value;
               let shi = document.querySelector("#shi");
               let html = shi.innerHTML;
            //    console.log(shi);
               if(sheng == 'jl'){
                    html += '<option value="cc">长春市</option><option value="sp">四平市</option>';
                    shi.innerHTML = html;
               }
               if(sheng == 'ln'){
                    html += '<option value="sy">沈阳市</option><option value="sl">大连市</option>';
                    shi.innerHTML = html;
               }
            }
        </script>
    </body>
</html>

激进的黄瓜

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022/07/12 学习笔记（day05）JS内置函数

1.concat()连接 2.join('-')设置分隔符连接数组为一个字符串 3.pop()删除最后一个元素 4.sort()排序，从小到大排序 1.isNaN()：判断一个值是不是数字 2.parseFloat()：把一个整数转换成小数 3.parseInt()：把一个小数转成整
复制链接

扫一扫