js的内容

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量155 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74618370/article/details/131686767
版权

。js：让代码有行为，可以"动起来"

1、js的引入方式：

（和css的引入方式很相似）

        2、js的内部引入

<script>  ：  引入js代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>




    <script>
        // 内部
        prompt('请输入您的年龄：')
    </script>
</body>

</html>

效果图： 

         2、外部引入

html内容：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>





    <!-- 外部 -->
    <script src="./03-外部js.js">
    </script>
</body>

</html>

 js内容：

prompt('年龄：')

效果图：

 2、输入输出语句

prompt : 让用户输入内容，括号中的内容为输入的提示词

document.write  ： 输出内容到屏幕上（该属性可以识别标签）

console.log  ： 在控制台输出的内容（不会被用户看见，后续调试时，对程序员的提示）


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        // 输入语句
        //prompt('这是输入内容的提示')

        // 打印到页面
        document.write('这里是输出的内容')
        // 可以识别标签
        document.write('<strong>这里是输出的内容</strong>')
        // 控制台输出语句，不会被用户看见
        console.log('这是要在控制台输出的内容')

    </script>
</body>

</html>

效果图：

 3.变量

变量：   盒子——用于存储数据【注】数据本身不是变量

let+变量名： 变量的声明（不能重复声明）

变量名 = prompt('') ： 变量赋值

let 变量名 = prompt('')

console.log(变量名)  ——    变量的初始化 【注】打印变量时，不要加引号

let uname = 'zs', age = 21

console.log(uname, age) ——  同时定义多个变量 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>

        // 变量：盒子----存储数据的容器           数据本身不是变量

        //  变量的声明：
        // let 变量名（不能重复声明）           var（不建议使用）变量名
        // let age
        
        // //    变量赋值
        // age = prompt('请输入您的年龄：')

        // age = 33
        // console.log(age)


        // 变量的初始化
        // let uname = prompt('请输入您的用户名：')
        // console.log(uname)


        // 同时定义多个变量
         let uname = '张三', age = 21
            console.log(uname, age)

        // 将用户输入的内容打印在body里
        // let age = prompt('请输入年龄：')
        // document.write(age)









    </script>
</body>

</html>

         3.1、变量命名规范

变量命名规范:

        1、有效符号（大小写字母、数字、下划线、$）

        2、关键字、保留字不能用于变量命名

        3、不以数字开头

        4、尽量用有意义的变量名

        5、驼峰命名法       eg：  userName

4.let 和var的区别

undefined : 已声明但未赋值

var可以先使用再声明；

let必须先声明再使用；

5.const常量

const ：对常量进行定义 

常量名用大写，常量无法更改

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 常量名大写   常量无法更改
        const PI = 3.14
        console.log(PI)
    </script>
</body>

</html>

效果图：

 

6、数据类型 

js是弱数据类型语言    只有赋值之后，才知道是什么数据类型


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // js是弱数据类型语言    只有赋值之后，才知道是什么数据类型
        let uname = 21
        console.log(typeof (uname))
    </script>
</body>

</html>

效果图：

 

7.基本数据类型

        7.1、数字类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        let a = 66
        let b = 33
        console.log(a)
        console.log(a + 2)
        console.log(a + b)
        console.log(a - b)
        console.log(a * b)
        console.log(a / b)
        console.log(a % 2)






    </script>
</body>

</html>

效果图：

        7.2、字符串类型

字符串的使用 ： 当需要使用字符串时需要加引号，单引号和双引号都可以，在字符串中还有字符串时，单双引号嵌套使用

字符串的拼接：  用+ 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 当需要使用字符串时需要加引号，单引号和双引号都可以，在字符串中还有字符串时，单双引号嵌套使用

        // let uname1 = 'nnnsns'
        // console.log(typeof (uname1))
        
        // let uname2 = "nnnsns"
        // console.log(typeof (uname2))
        
        // let uname3 = "nnn'gouxin'sns"
        // console.log(typeof (uname3))
        


    //   字符串的拼接(用＋)
        document.write("num1"+"num2")

    // 例子（从用户获取数据并拼接）
        // let uname = prompt("请输入名字：")
        // let age = prompt("请输入年龄：")
            //方式一
        // document.write('你叫' + uname + ',今年' + age + '岁了')

        // 方式二（该方式可以识别标签）
        // document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)





    </script>
</body>

</html>

7.3、布尔类型 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        console.log(typeof(3 < 5))

    </script>
</body>

</html>

 效果图：

 

8、null和nodefinded区别

undefinded ： 声明，未赋值

null ：空值 

NaN    ： not a  number


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // undefinded  声明，未赋值
        // null  空值；  NaN ：  not a  number
        console.log(undefined + 1)
        console.log(null + 1)

    </script>
</body>

</html>

效果图：

 9、显示转换

  方法一：给字符串加+可以使得该字符串类型变为数字类型

eg： 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let a = +prompt('num1')
        console.log(typeof (a))
    </script>
</body>

</html>

效果图：

方法二、在输出时加上 number（a） 把字符串类型变为数字类型

 eg：


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script>
            let a = +prompt('num1')
            console.log(typeof(Number(a)))
        </script>
    </body>

    </html>

效果图：

 方法三、


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //parseInt  整形；   parseFloat   浮点型
        // 只能处理数字后有其他字符类型的情况 
        let c = '200.9875px'
        console.log(parseInt(c))
        console.log(parseFloat(c))


    </script>
</body>

</html>

效果图：

  10、警示框：

aler  ： 使用警示框输出内容

！<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        let num1 = 1
        let num2 = 2
        alert(num1+num2)
    </script>
</body>
</html>

效果图：

 11、运算符

==  （隐式转换）只比较数值，将字符串转换为数字类型后进行比较  

===   既比较数值，也比较类型


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // =  赋值运算符
        // let a = 21
        // a = 33

        // a += 4   // a = a + 4   37
        // a *= 2   //a = a * 2     74
        //a -= 3    //a = a - 3         71
        // a /= 2     //a = a / 2      35.5
        // alert(a)

        // let b = a++  //先赋值，再自增
        // alert(b)
        // alert(a)  //36.5
        // b = ++a   //先自增，再赋值
        // alert(b)


        // 比较运算符  
        // >   <   >=   <=  ==   ===
        let num1 = 2
        let num2 = '2'
        alert(num1 == num2)
        alert(num1 === num2)
        // ==  （隐式转换）只比较数值，将字符串转换为数字类型后进行比较   ===   即比较数值，也比较类型

        //逻辑运算符  &&  ||   ！

    </script>
</body>

</html>

12.分支语句

        12.1、单分支

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let age = 11
        // if(条件){
        //     执行的代码
        // }
        if (age < 18) {
            document.write('你是小学生，不准进')
        }


    </script>
</body>

</html>

效果图：

        12.2、双分支语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        let age = +prompt('请输入您的年龄：')
        if (age <= 18) {
            alert('小学生，不准进')
        } else {
            alert('大学生？进去吧')
        }

    </script>
</body>

</html>
         12.3、多分支

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let age = +prompt('请输入年龄:')
        if (age < 18) {
            alert('你是未成年 学习吧')
        } else if (age <= 25) {
            alert('青春年华')
        } else if (age <= 40) {
            alert('好汉不提当年勇')
        } else {
            alert('男人四十一枝花')
        }
    </script>
</body>

</html>

13、三元运算符

双分支运算符的简写


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 三元运算符——双分支语句的简写
        let age = +prompt('请输入您的年龄：')
    //  代码格式  判断条件 ？ 条件成立时执行的语句   ：条件不成立时执行的语句
        age <= 18 ? alert('小学生，不让进') : alert('大学生，进去吧')
    </script>
</body>

</html>

14、switch语句

default  ：  所有条件都不满足时的情况


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let num = +prompt('请输入今天星期几了：')
        switch (num) {
            case 1:
                alert('星期一')
                break
            case 2:
                alert('星期二了')
                break
            case 3:
                alert('星期三了')
                break
            case 4:
                alert('星期四了')
                break
            case 5:
                alert('星期五了')
                break
            case 6:
                alert('周末了')
                break
            case 7:
                alert('周日了')
                break
            default:
                alert('你输入了个什么东西')
        }
    </script>
</body>

</html>

15、循环

        15.1、while循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // while   一定要有终止条件
        let i = 10
        while (i > 11) {
            console.log('我是高手')
            i--
        }
    </script>
</body>

</html>
15.2、do while循环

先执行再判断


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        let i = 10
      do {
            console.log('我是高手')
            i--
        } while (i > 11)
    </script>
</body>

</html>
        15.3、for循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        for (let i = 1; i <= 10; i++) {
            document.write(`我是个高手<br>`)
        }
    </script>
</body>

</html>

效果图：

16、数组

数组： 有序的数据序列


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 数组：是有序的数据序列

          // 数组的声明方式（从0开始）
        let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12,'jige']
        
        // arr[索引下标]
        alert(arr[5])
    </script>
</body>

</html>

效果图：

         16.1、数组的遍历

for in  :   通过数组的下标进行遍历


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12,'jige']

        // 数组的遍历
        for (let i in arr) {
            console.log(arr[i])
        }
    </script>
</body>

</html>

效果图：

        16.2、数组的更新

arr[1] = 'nb' ： 对索引为1的元素重新赋值 

 console.log(arr instanceof Array)  ：  查看arr是否为数组

arr3 = arr.concat(arr2)   ：  concat将arr的后面加上arr2的内容命名为arr3

push   :    在数组末尾添加元素

unshift  ：   在数组首部添加元素

shift   ：  删除第一个元素

pop  ： 删除最后一个元素

splice(删除的起始位置，删除的个数)  ：    灵活删除元素

splice(删除的起始位置，0,要添加的元素)  ：  灵活添加元素

join ：  各个元素之间的连接方式

reverse   ：  颠倒元素的位置

slice   ： 截取元素的内容


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]

        // 通过索引下标给对应元素重新赋值
        // arr[1] = 'guanyu'

        // 查看arr是否为数组
        // console.log(arr instanceof Array)

        
        // let arr2 = [1, 2, 3, 4]
        // concat将arr的后面加上arr2的内容命名为arr3
        arr3 = arr.concat(arr2)
        console.log(arr3)

        // 增 push   在数组末尾添加
        arr.push('这里是添加的内容')
        // unshift  在数组首部添加元素
        arr.unshift('这里是添加的内容')

            // shift  删除第一个元素
        arr.shift()

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

        // splice(删除的起始位置，删除的个数)
        arr.splice(3, 1)

        // splice(删除的起始位置，0,要添加的元素)
        arr.splice(3, 0, 'jiangjia')
        console.log(arr)

        // 各个元素之间的连接方式
        console.log(arr.join('**'))

        // 颠倒元素的位置
        console.log(arr.reverse())


            // 截取前三个元素的内容
        console.log(arr.slice(3))

    </script>
</body>

</html>
        16.3、二维数组

student.length    ：   获取数组的长度


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]

        // 查找第二个数组的第一个元素
        // console.log(student[1][0])
        
        // 二维数组的遍历
        for (let i in student) {
            for (let j in student[i]) {
                console.log(student[i][j])
            }
        }


        // student.length   获取数组的长度
    </script>
</body>

</html>

效果图：

17、函数

函数： 实现特定功能的代码集合

函数必须进行调用，才会执行

函数如果要有返回值，一定要添加return关键字，否则返回值为undefined

     函数的作用域：

全局变量 （在函数外声明的变量）在函数内与函数外均可被访问
局部变量 （在函数内声明的变量）只能在函数内部访问 

        特点 ： 代码的重用性强！

函数的声明：

 

函数的调用： 在能访问到的前提下，先局部，再找全局


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

// 函数的声明，要返回值，必须有return 
function sum(a,b){
      let  sum=a+b
    return sum
}
 // 函数的调用（函数必须先调用才能执行）
    let e= sum(11,4)
    document.write(e)      

    </script>
</body>

</html>

效果图：

  arguments  ：  接收所有实参，并保存到arguements数组里


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        function getSum() {
            // arguments  接收所有实参，并保存到arguements数组里
            let sum = 0
            for (let i in arguments) {
                sum += arguments[i]
            }
            return sum
        }

        let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)

        document.write(e)

    </script>
</body>

</html>

效果图：

         17.1、匿名函数

函数的嵌套使用（嵌套内层的函数可以没有名字）


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        setInterval(function () {
            console.log('小学生')
        }, 1000)

    </script>
</body>

</html>

效果图：

         17.2、函数表达式

把函数赋值给一个变量名

将getsum这个函数赋值给a


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let a = function getSum() {
            console.log('jige')
        }
        a()
        gesum()

    </script>
</body>

</html>

效果图：

         17.3、立即执行函数

无需调用立即执行（其实本质上已经调用了），多个立即执行函数之间用分号隔开

在声明的同时就执行了


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 立即执行函数
        (function () { document.write('caixukun') })()
       
    </script>
</body>

</html>

效果图：

 18、值传递和引用传递

值传递不会改变之前的值

引用传递会改变


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 值传递  传数据，不发生改变
        let a = 10
        let b = 20
        function change(x, y) {
            x = 30;
            y = 50;
        }
        change(a, b);
        alert(a + "--" + b)


        let arr = [1, 3, 4, 5]
        // 引用传递    传地址，发生改变
        function change2(a) {
            a.push(1000)
        }
        change2(arr)
        alert(arr)
    </script>
</body>

</html>

效果图：

 19、默认值参数

参数中有一个固定值，为了方便调用，可以如下设置


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        function getCir(r, PI = 3.14) {
            return PI * r * r
        }
        let a = getCir(3)
        console.log(a)
    </script>
</body>

</html>

20、箭头函数

作用和匿名函数类似


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        setInterval(() => {
            console.log('i hate you')
        }, 1000)
    </script>

</body>

</html>

效果图：

 21、递归

必须有结束条件


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 求 9!  
        function jiecheng(n) {
            if (n === 1) {
                return 1
            } else {
                //自身调用自身
                return n * jiecheng(n - 1)
            }
        }
        let a = jiecheng(9)
        alert(a)
、
    </script>
</body>

</html>

效果图：

 22、字符串的常见使用


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

         let str = '你是who'

        // split   把字符串拆分，如果从某个字符拆分，则该字符会被覆盖 
        console.log(str.split('w'))

        // 左闭右开，截取第二个到第三个字符
        console.log(str.substring(2, 4))

        // 如果开头的字符和输入的字符相同时，返回true，反之返回false
        console.log(str.startsWith('你'))

        // 如果结尾的字符和输入的字符相同时，返回true，反之返回false
        console.log(str.endsWith('你'))

        // 如果字符串中包含输入字符时，返回true
        console.log(str.includes('w'))

    </script>
</body>

</html>

效果图：

 23、对象        

 对象：  无序的数据集合

对象元素可以嵌套函数


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 对象：无序的数据集合
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // 查找对象元素
        console.log(obj.uname)
        console.log(obj['age'])

            // 对象元素可以嵌套函数
        let obj2 = {
            uname: '刘德华',
            age: 60,
            sing: function () {
                console.log('我要唱歌了')
            }
        }
        obj2.sing()
    </script>
</body>

</html>

 效果图：

         24.1、对象的修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }

        // 改：对象.属性名
        obj.uname = 'GGBond'

        // 增加  对象.新属性名
        obj.sing = function () {
            console.log('sing~')
        }
        
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)

    </script>
</body>

</html>

效果图：

         25.2、对象的遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        for (let k in obj) {
            console.log(k)
            console.log(obj[k])
        }

    </script>
</body>

</html>

效果图：

 

25.3、数组对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arrObj =
            [
                {
                    uname: 'zs',
                    age: 21
                },
                {
                    uname: 'jige',
                    age: 33
                },
                {
                    uname: 'caixukun',
                    age: 12
                }
            ]
                // 对jige进行查询
        console.log(arrObj[1].uname)

        // 数组对象的遍历
        for (let i = 0; i < arrObj.length; i++) {
            for (let k in arrObj[i]) {
                console.log(arrObj[i][k])
            }
        }
    </script>
</body>

</html>
 效果图：

         25.4、math内置对象

 Math.ceil  :  向上取整

Math.floor  :  向下取整

 Math.abs  :   绝对值    

 pow   :   求幂次方

sqrt    :  开平方根

随机数 从而n到m中随机整数  ：   let random = Math.floor(Math.random() * (m - n + 1)) + n


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(Math.E)
        console.log(Math.PI)

        // Math.ceil向上取整
        console.log(Math.ceil(3.1415))
        
        // Math.floor向下取整
        console.log(Math.floor(3.1415))
        
        // Math.abs   绝对值
        console.log(Math.abs(-3.12))
        
        // pow  求幂次方
        console.log(Math.pow(3.12, 10))
        
        //  sqrt  开平方根
        console.log(Math.sqrt(9))

        // 随机数 从而n到m中随机整数 
        // let random = Math.floor(Math.random() * (m - n + 1)) + n
        // 从2到10 随机整数
        let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
        console.log(random)
    </script>
</body>

</html>
        25.5、日期内置对象

date ： 获取完整时间

date.getFullYear  ：  获取年份

 date.getMonth() + 1  ：   获取月份 默认从0开始

date.getDate()  ：  获取日期

date.getDay  ：  获取星期

toFixed  ：  保留小数点后几位


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let date = new Date()
        // // 获取完整时间
        alert(date)

        // // 获取年份
        let year = date.getFullYear()

        // // 获取月份 默认从0开始
        let month = date.getMonth() + 1

        // // 获取日期
        let day = date.getDate()

        let hh = date.getHours()
        let mm = date.getMinutes()
        let ss = date.getSeconds()

            // 获取星期
        let gg = date.getDay()
        alert(gg)
        
        document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)

        // 保留小数点后4位
        let a = 3.234364
        alert(a.toFixed(4))


    </script>
</body>

</html>

26、获取元素的方法

 document.querySelector（推荐） : 通过css选择器获取(获取到的内容是'字符串')    

document.querySelector    :   默认只找到第一个符合要求的元素

document.querySelectorAll   ：  将所有匹配的元素全部获取到，并存放到伪数组


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>盒子</div>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li id="four">4</li>
    </ul>
    <script>
        // 1、通过css选择器获取（推荐）   (获取到的内容是'字符串')    
        const li2 = document.querySelector('.two')
        console.log(li2)

        // 默认只找到第一个符合要求的
        const li = document.querySelector('li')
        console.log(li)

        // document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组
        const lis = document.querySelectorAll('li')
        console.log(lis)
    
        //遍历 
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i])
        }

            // 支持结构伪类选择器
        const li3 = document.querySelector('ul li:nth-child(3)')
        console.log(li3)


        // 通过标签名
        console.log(document.getElementsByTagName('div'))
        // 通过id号
        console.log(document.getElementById('four'))
        // 通过class
        console.log(document.getElementsByClassName('two'))

    </script>
</body>

</html>

27、修改元素的内容

修改的过程：

1、获取到需要修改的元素
2、对需要获取到的元素进行修改


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="one">我是一个即将被更改的盒子</div>
    <div class="two">我也是一个即将被更改的盒子</div>
    <script>
        // 1、获取元素
        const box1 = document.querySelector('.one')
        const box2 = document.querySelector('.two')
        // 2、操作

        // 不可以识别标签
        box1.innerText = `<h1>这是改后的盒子</h1>`
        // 可以识别标签
        box2.innerHTML = `<h1>这也是改后的盒子</h1>`

    </script>



</body>

</html>

效果图：

28、修改元素属性

 改元素属性  :    对象.属性=值


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" placeholder="提示词">
    <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        let inp = document.querySelector('input')
        let btn = document.querySelector('button')
        // 改元素属性   对象.属性=值

        inp.type = "password"
        inp.placeholder = "请输入用户名"
        btn.disabled = false

    </script>
</body>

</html>

效果图：

 29、修改元素样式属性

1、通过style修改样式  （该方式不能识别 -    只需在  -  后大写即可）eg：style.fontSize

2、通过添加类名  ：calssName   会将原来的类名删除掉（不推荐）

toggle  （切换）：  有则删除，没有就添加


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rgb(207, 39, 67);
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">1111</div>
    <div class="box2 box1"></div>
    <script>
        // 1、获取元素
        const box2 = document.querySelector('.box2')
        const div = document.querySelector('.box1')

        // 2、通过style修改样式
        div.style.width = '500px'
        div.style.fontSize = '16px'// 该方式不能识别 -    ，只需大写即可
        div.style.backgroundColor = 'pink'

        // 3、添加类名  calssName会将原来的类名删除掉（不推荐）

        // box2.className = 'box1'

        // classlist.add（'类名'）追加
        box2.classList.add('box1')
        // box2.classList.remove('box1')    移除
        box2.classList.toggle('box1')        //切换：有则删除，没有则添加
    </script>
</body>

</html>

30、定时器

 setTimeout  :    某段代码或者函数在多久后执行 

定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境

格式：

//setTimeout(函数或一段代码，延迟时间，实参……)
setTimeout(code/function,time(ms))
//例子
setTimeout('console.log("我是一秒之后执行的代码")', 4000)

setInterval  :   间隔一段时间，将代码或者函数执行一次 

 clearTimeout(a)   :  清除a中的数据


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // setTimeout\setInterval   定时器
        // setTimeout  :某段代码或者函数在多久后执行
        // setTimeout(code/function,time(ms))

        // 返回值是一个整数，代表定时器编码(方便后期的清除)

        //    传的应该是函数名，不是函数调用 
        let timer3 = setTimeout(fn, 3000)

        // setTimeout(函数或一段代码，延迟时间，实参……)
        let timer4 = setTimeout(function (a, b) {
            console.log(a + b)
        }, 2000, 1, 4)

        let obj = {
            uname: 'gouxin',
            a: 3,
            b: 4,
            sum: function () {
                console.log(this)
                console.log(this.a)

            }
        }


        obj.sum()
        setTimeout(obj.sum, 1000)
        // 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境
        
        // 解决方法一
        setTimeout(function () { obj.sum() }, 1000)

        // 解决方法二
        let a = setTimeout(obj.sum.bind(obj), 1000)
        clearTimeout(a)  //清除a中的数据



        // setInterval  间隔一段时间，将代码或者函数执行一次
        let timer = setInterval(' console.log("66666")', 1000)
        clearInterval(timer)  

  setInterval(function (a, b) {
            console.log(a + b)
        }, 1000, 2, 3)

    </script>
</body>

</html>

夏炎正好眠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python如何提取js脚本中内容,如何获取在Python中的JavaScript内容
weixin_36180471的博客
11-21 950
I have a website that has data I want to fetch stored in a javascript. How do I fetch it?I want to fetch from "var playersData" line. I want to fetch this thing :- "playerId":"showsPlayer" (without qu...
javascript内容改变（change）事件
weixin_44830974的博客
05-08 8673
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select name="" id="slt"> <option va...
JavaScript修改HTML的内容
weixin_59246157的博客
03-24 1368
/ document.querySelector(".myText").innerText = "新的文本内容";document.getElementById("myText").innerHTML = "新的文本内容";document.querySelector(".myText").innerHTML = "新的文本内容";// elements[i].innerText = "新的文本内容";// elements[i].innerText = "新的文本内容";
JS复制input内容
Front end development engineer
01-14 2万+
const onCopy = (certB64: any) => { let oInput = document.createElement('input') oInput.value = certB64； document.body.appendChild(oInput) oInput.select() // 选择对象 document.execCommand("Copy") // 执行浏览器复制命令 message.success("复制成功")..
js html 追加span内容,使用JavaScript显示SPAN的内容
weixin_39634132的博客
06-04 2146
我有这个代码.我已经做了很多年了,但是我对这个示例的结果感到困惑.目的是使文本框可见,并将单击的SPAN标记的内容放入其中.document.onclick = CaptureClickedElement;function CaptureClickedElement(e){var EventElement;if(e==null)EventElement = event.srcElement;// ...
JS如何替换元素内容
itclanCoder
11-03 2050
前言我们网页中元素的内容有的是静态的,有的是动态的,特别是在一些网页交互的网页特效里,应用比较多,如何简单的替换元素的内容01原生JS实现在原生js中主要通过DOM提供的属性去修改的,遵循js的一个使用规范,获取元素，绑定事件，操作DOMfunctionreplaceElem(){ //getelem varmyDom=document.getElementById(...
js获取html内容
只有十分努力，才能看起来毫不费力
11-30 1万+
js获取的html内容包括 1. 文本内容 2. 属性值 3. 输入的数据 可以采用js的dom方法，比如document.getElementById() 但是此种方法不简洁，使用起来不方便，违反了短小精悍的原则，推荐采用jquery的方法，jquery即js库，封装了js的一些方法，直接用就好了。 注意 · 使用jquery需要包含jquery.js文档  至于jquery.j
代码没错为啥JavaScript 内容为何运行不了
qq_48496840的博客
02-15 702
代码没错为啥JavaScript 内容为何运行不了
js读取txt文件中的内容
热门推荐
老实敲代码，佛只渡有缘人
10-14 2万+
拿到file文件对象之后 1）新建一个fileReader var reader = new FileReader(); 2）读取文件中的内容 reader.readAsText(file, "UTF-8"); 3）需要读取文件中的内容 reader.onload = function (e) { const val = e.target.result; } 注：再回调函数中使用读取的数据 下面直接写一个例子：实现了读取多个文件并展示文件的内容 <!DOCTYPE h
JavaScript的基本内容
m0_61841474的博客
03-05 443
js代码是写在script标签之中，script标签可放在在 HTML 页面的body和head标签中
后端开发 技术关键词： Node.js 内容关键词： 服务器端JavaScript 用途： 创建高性能的网络应用和服务
03-29
内容关键词： 服务器端JavaScript 用途： 创建高性能的网络应用和服务 对资源的描述： 该资源提供了一个Node.js的完整开发手册，包括创建RESTful API、实现身份验证和授权、以及使用各种数据库的教程。它还探讨了...
后端开发 技术关键词： Node.js 内容关键词： 服务器端JavaScript开发 用途： 用于构建高性能的服务器端应用程序
03-26
内容关键词： 服务器端JavaScript开发 用途： 用于构建高性能的服务器端应用程序和服务 内容描述： 这个资源是一个全面的Node.js开发指南，涵盖了从基础概念到高级主题的所有内容，包括异步编程、事件驱动、模块化...
JavaScript内容复制插件Clipboard.js
12-06
之前一直在使用ZeroClipboard来复制，可是在新版chrome以及大多数浏览器开始屏蔽lash，这时我们得用其它方法，clipboard.js的出现很好的解决了这个问题...JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。
在Node.js上运行的Javascript内容管理系统-Node.js开发
05-27
Cody CMS在Node.js上运行的Javascript内容管理系统我们终于接受了这项任务，很高兴地宣布，向Express 4的过渡已经完成！ （dixit Slawo）有关更多信息和示例，请参见http://www.cody-cms.org。Cody CMS在Node.js上...
JS实现获取剪贴板内容的方法
10-22
本文将深入探讨如何使用JS获取剪贴板的内容。 首先，`clipboardData`对象是`event`对象的一个属性，通常在事件处理函数中使用，如`copy`、`cut`或`paste`事件。在旧版本的Internet Explorer浏览器中，可以通过`...
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 187
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1082
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 943
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 169
【代码】playwright链接本地浏览器，实现自动登录。
mbedtls.js内容
08-23
mbedtls.js 是一个基于 C 语言的开源库 mbed TLS 的 JavaScript 接口。mbed TLS 是一个用于嵌入式设备和系统的安全性和加密库，提供了各种加密、解密、证书管理和安全协议的实现。 mbedtls.js 提供了 JavaScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值