web前端

函数

 function sayHi() {

            console.log('hello,function!')

        }

sayHi()

定义函数:

function 函数名(){

函数体

}

调用函数

函数名()

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

函数形参,实参:

function getSum(a,b) {

       console.log(a + b)}

getSum(2,3)

函数返回值:

 function getSum(a,b) {

        return a + b——函数要有返回值,一定要添加return关键字,否则返回值为undefi

}   let a=getSum(2,9)

        console.log(a)

关键字传参法

function getSum(a,b) {

        return a + b}

        let en=getSum(b = 2,a = 1)

        console.log(en)

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

function getSum(a,b) {

             console.log(arguments)}

          let e=getSum(2,34,5,6)

 

调用:

1,声明函数时的形参没有数量限制,当有多个形参时使用“,”分隔

2,调用函数传递的实参与形参的顺序一致

匿名函数——没有名字的函数

setInterval(function () {console.log('你真傻') }, 1000)——

1000ms,每1隔1s打印一次 

伪数组:实参数不确定,用arguements接收,如果参数固定写形参,不固定用arguments

有些地方不能用arguments

函数表达式

 let a = function getSum() {——给函数赋予了变量名

            console.log('jiangjia')

        }

        a()

立即执行函数

无需调用,立即执行,其实本质已经调用了

多个立即执行函数之间用分号隔开

(function () { console.log('liqingyu') })()

(function () { console.log('jiangjia') }())

值传递,引用传递

值传递:

        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)

——传地址,发生改变

 默认值参数

 function getCir(r, PI = 3.14) {

            return PI * r * r

        }

        let a = getCir(3)

        console.log(a)

——写在形参的尾部,大写区分,传递形参时不用传

箭头函数

setInterval(function () {

             console.log('i love you')

         }, 1000)

等价于--->

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

递归

递归式函数的条件:

1,基线条件

问题分解为最小问题时

2,递归条件

将问题继续分解

 function jiecheng(n) {

            if (n === 1) {

                return 1

            } else {

                return n * jiecheng(n - 1)

            }

        }

        let a = jiecheng(3)

——n的阶乘

练习(1加到100)

 function xiangjia(n){

           if(n===0)return 1

           return n+xiangjia(n-1)

        }

        let sum=xiangjia(100)

        alert(sum)

 闭包函数

·可以在函数的外部访问到函数内部的局部变量

·让这些变量始终保存在内存中,不会随着函数的结束而自动销毁

  function outer(){

        var a='变量1'

        var inner=function(){

            console.info(a)

        }

    }——//inner就是一个闭包函数,因为他能够访问到outer函数的作用域

数组遍历

 let arr = ['a', 2, 3, 4, 5, 6]

        for (let i = 0; i < arr.length; i++) {

            console.log(arr[i])

        }

——arr.length测出数组的长度

字符串的常见方法

1,

   let str = '你是who'

     console.log(str.split(' '))

——用空格拆分元素,并把其转换成数组

2,

console.log(str.substring(2, 4))

——从第二个截取到第四个(左闭右开)

3,

let str = '你是who'

console.log(str.startsWith('你'))

——判断字符串是以什么开始

 4,

let str = '你是who'

console.log(str.endsWith('你'))

 ——判断字符串是以什么结束的

5,

let str = '你是who'

console.log(str.includes('w'))

——判断里面是否存在这个字符串 

对象:

对象——保存用户信息,无序的数据集合,数组是有序的数据集合——描述某个事物

声明

 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()

改: obj.uname = 'GGBond'

对象.属性名

增:

 obj.sing = function () {

            console.log('sing~')

        }

对象.新属性名

删:

 delete obj.gender

  console.log(obj)

delete 对象.属性名

查找数组对象

let arr0bj=[

            {

                unanme:'a',

                age:12

            },

            {

                unanme:'b',

                age:11

            },

            {

                unanme:'c',

                age:10

            }

        ]

        console.log(arr0bj)

alert(arr0bj[1].unanme)

arr0bj[1]['uname']

 for(let i=0;i<arr0bj.length;i++)

           for(let k in arr0bj[i]){

            console.log(arr0bj[i][k])

           }——数组对象遍历

 

 math内置对象

console.log(Math.E) ——e的自然数

 console.log(Math.PI)——Π的自然数

console.log(Math.ceil(3.1415))——向上取整

 console.log(Math.floor(3.1415))——向下取整

console.log(Math.abs(-3.12))——取绝对值

console.log(Math.pow(3.12, 10))——pow

 console.log(Math.sqrt(9))——开平方根

随机数:math.random()——左闭右开

         console.log(Math.floor(Math.random() * 11))

——取0-11的整数向下取整

 Math.floor(Math.random() * (M-N+1))+N

——取N-M的整数

日期内置对象

        let date = new Date()

——获取现在时间 

        let year = date.getFullYear()——获取年

        let month = date.getMonth() + 1——获取月从0开始需要加1

        let day = date.getDate()——获取日

        let hh = date.getHours()——获取小时

        let mm = date.getMinutes()——获取分钟

        let ss = date.getSeconds()——获取秒

        let gg = date.getDay()——获取星期

       document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)

——打印

       let a = 3.234364

       alert(a.toFixed(4))——保留几位小数点 

获取元素

 <div>盒子</div>

    <ul>

        <li>1</li>

        <li class="two">2</li>

        <li>3</li>

        <li id="four">4</li>

    </ul>

1、通过css选择器获取——(‘字符串’)推荐

        const li2 = document.querySelector('.two')

        const li = document.querySelector('li')

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

   const lis = document.querySelectorAll('li')

 

 调用其中的元素需要用遍历:

 for (let i = 0; i < lis.length; i++) {

             console.log(lis[i])

         }

 const li3 = document.querySelector('ul li:nth-child(3)')

 2,其他

 console.log(document.getElementsByTagName('div'))

 console.log(document.getElementById('four'))

 console.log(document.getElementsByClassName('two'))

修改元素内容

<div class="one">我是一个即将被更改的盒子</div>

    <div class="two">我是一个即将被更改的盒子</div>

    <script>

        // 1、获取元素

        const box1 = document.querySelector('.one')

        const box2 = document.querySelector('.two')

        console.log(box1)

        console.log(box2)

        // 2、操作

        box1.innerText = `<h1>jiangjia</h1>`——innerText不能识别标签

        box2.innerHTML = `<h1>chensongjie</h1>`——可以识别标签

   </script>

 随机点名案例

<div>jiangjia</div>

 <script>

        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        // 1、获取元素

        const box = document.querySelector('div')

        // 2、获取随机数   n-0    m---arr.length-1  ( Math.floor(Math.random() * (M-N+1))+N)

        let random = Math.floor(Math.random() * arr.length)

        // 3、改内容

        box.innerHTML = `${arr[random]}`

   </script>

修改元素属性

    <img src="../images/1.webp" alt="刘德华" title="刘德华">

    <input type="text" placeholder="wedjed" readonly>

    <button disabled>同意该协议</button>

<script>

        // 1、获取元素

        const img = document.querySelector('img')

        const ipt = document.querySelector('input')

        const btn = document.querySelector('button')

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

        img.src = "../images/2.webp"

        img.title = "我是个大帅哥"

        ipt.type = "password"

        ipt.placeholder = "请输入用户名"

        ipt.readOnly = false

        btn.disabled = false

    </script>

修改元素样式属性

<!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>

——通过style修改样式

 div.style.width = '500px'

 div.style.fontSize = '16px'——此处原本的font-size要先成fontSize

box2.className = 'box1'

——通过添加类名 className会将原来的类名删除掉,不建议使用

        box2.classList.add('box1')追加

        box2.classList.remove('box1')    移除

        box2.classList.toggle('box1')        //切换:有则删除,没有则添加

定时器:

setTimeout\setInterval   定时器

setTimeout  :某段代码或者函数在多久后执行——代码必须以字符串形式传入

格式:setTimeout(code||function,time(ms))——要莫是代码要莫是函数

返回值是一个整数,代表定时器编码,一般存在多个定时器

代码:

let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)

console.log(timer)

函数:

let timer3 = setTimeout(

        fn, 3000)——注意传的是函数名,不是函数调用

        function fn() {

        console.log('6666666')

       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不再指向对象,指向全局环境

解决方法:

1,通过改变为函数调用

setTimeout(function () { obj.sum() }, 1000)

 2,将this定在obj上

let a = setTimeout(obj.sum.bind(obj), 1000)

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

 let timer = setInterval(' console.log(\'6666666\')', 1000)——/为转义字符

clearInterval(timer)——清楚定时器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值