当前位置：网站首页>2022/07/12 learning notes (day05) JS built-in functions

2022/07/12 learning notes (day05) JS built-in functions

2022-07-19 06:27:00 【Radical cucumber】

Be humble , learn , Walk forward , Look up

JS Built in functions ：

Array:

1.concat() Connect

2.join('-') Set the separator connection array to a string

3.pop() Delete the last element

4.sort() Sort , Sort from small to large

Global：

1.isNaN()： Judge whether a value is a number

2.parseFloat()： Convert an integer to a decimal

3.parseInt()： Turn a decimal into an integer , integer

4.number()： Convert a value into number type

5.string()： Convert other types into strings 110 120 119

String：

1.charAt(1)： Take out the characters in the specified position

2.indexOf('a')： Judge whether the specified character exists , If there is a return subscript , If it doesn't exist , return -1

3.lastIndexOf('a')： Look backwards

4.replace('a','b')： Replace string

5.split('-')： according to - To split strings , Get an array

6.substring(1,6)： String interception

Math：

1.ceil() Rounding up

2.floor() Rounding down

3.round() rounding

4.random() Random , Generate a 0-1 The random number

5.tan() sin cos cot

6.E PI

Date：

1.new Date(); Get the current date of the system

2.getDate()： Returns the day of the date 1~31

3.getHours()： Returns the hour in time 0~23

4.getMinutes()： Returns the minute in time

5.getSeconds()： Returns the second of the time

6.getTime()： Get the current time of the system

7.getYear()： Year of acquisition

obtain HTML Elements ：

1. according to id Go grab it HTML Elements

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

2. according to class Grab HTML Elements , What you get is a bunch of elements

let divs = document.getElementsByClassName("div1");
console.log(divs[0]);

3. according to tag Grab HTML Elements , What you get is a bunch of elements

let divs = document.getElementsByTagName("div");
console.log(divs[0]);

2. The new method

1. Grab an element according to the selector

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

2. Grab all elements according to the selector

let divs = document.querySelectorAll('.div1');
console.log(divs[0]);
let div = document.querySelector("div");

3. Get the text inside the element , Will not get internal HTML label

console.log(div.innerText);

4. Get all the contents inside the element , Include HTML label

console.log(div.innerHTML);

5. Change the content of the element

div.innerText = "<h1> I'm through JS To the </h1>";
div.innerHTML = "<h1> I am a JS To the </h1>";

event ：

The event is when we and HTML The behavior of tag elements when they interact

onclick： Click events

ondblclick： Double-click the event

onblur： Lose focus

onfocus： Focus of attention

onchange： change

onload： load

Today's example ：

（1） demand ： When the user name ==admin, password ==123456 when , Prompt for successful login ！
otherwise , Prompt user name or password error
Ideas ： Add a click event to the button
When the button is clicked , Get the values entered in the user name and password boxes ,
Then judge ,if() Login successful else Wrong user name or password ！

right key ：

<!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>
             account number ：<input type="text" id="username">
        </p>
        <p>
             password ：<input type="password" id="password">
        </p>
        <p>
            <input type="button" value=" Sign in " onclick="login()">
        </p>

        <script>          
            function login(){
                //  Take the content entered in the user name box 
                let username = document.querySelector("#username").value;
                let password = document.querySelector("#password").value;
                if(username == "admin" && password == "123456"){
                    alert(" Login successful ！");
                } else {
                    alert(" Wrong user name or password ！");
                }
            }
        </script>
    </body>
</html>

（2） Enter the user name in the text box of the user name ,
If the user name is admin, It's in span The user name shown in is occupied
otherwise , Displays the available user names ！
analysis ：
You need to add onchange,onblur, Starting function
You need to span Write content in ！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>
         user name ：<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"){
                    //  The user name is already in use 
                    span.innerText = " The user name is already in use ！"
                }else {
                    //  User name available 
                    span.innerText = " User name available ！";
                }
           }

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

（3） Ideas ：
1. Grab the drop-down menu of the province , Know which province you chose
2. Judge which province is selected
3. Drop down menu options for building cities
4. Grab the drop-down menu of the city
Precautions for area ：
1. There are no options in the initial state area
2. Chose Province , There is no option in the area
3. Chose Province , Chose the city , Selected zone , Switch to save

<!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>--- Please select a province ---</option>
            <option value="jl"> Jilin Province </option>
            <option value="ln"> Liaoning Province </option>
        </select>
        <select id="shi">
            <option>--- Please choose the city ---</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"> Changchun City </option><option value="sp"> Siping City </option>';
                    shi.innerHTML = html;
               }
               if(sheng == 'ln'){
                    html += '<option value="sy"> Shenyang </option><option value="sl"> Dalian </option>';
                    shi.innerHTML = html;
               }
            }
        </script>
    </body>
</html>

原网站

版权声明
本文为[Radical cucumber]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170509285082.html