JS （学习笔记） 协议案例（兄弟守则）

JS （学习笔记） 协议案例（兄弟守则）

函数

parseInt

getSum

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

函数要有返回值，一定要添加return关键字

console.log(a + b)

return a + b

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

匿名函数

function sayHi(fn) {

fn()

console.log(‘nihao’)

}

function () {

console.log(‘jiangjia’)

}

sayHi(sayHello)

function sayHi()

函数表达式

let a = function getSum() {

console.log(‘jiangjia’)

}

a()

立即执行函数

箭头函数

数组遍历

字符串

let str = new String( )

// let str = ‘你是who’

console.log(……)

对象

对象的增删改查

对象的遍历

数组对象

<script>
    let arrObj =
        [
            {
                uname: 'zs',
                age: 21
            },
            {
                uname: 'jiangjia',
                age: 33
            },
            {
                uname: 'lisi',
                age: 12
            }
        ]
    console.log(arrObj)
    // arrObj[1]['uname']
    for (let i = 0; i < arrObj.length; i++) {
        for (let k in arrObj[i]) {
            console.log(arrObj[i][k])
        }
    }
</script>

Math内置对象

日期内置对象

dom

提交

<script>

​ const btn = document.querySelector(‘button’)

​ // console.dir(btn)

​ console.log(typeof (btn))

获取元素的方法

// 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’))

​ console.log(document.getElementById(‘four’))

​ console.log(document.getElementsByClassName(‘two’))

修改元素内容

我是一个即将被更改的盒子

我是一个即将被更改的盒子

随机点名

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

​ // 1、获取元素

​ const box = document.querySelector(‘div’)

​ // 2、获取随机数 n-0 m—arr.length-1

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

​ // 3、改内容

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

修改元素属性

同意该协议

<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

定时器

// setTimeout\setInterval 定时器

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

​ // setTimeout(code||function,time(ms))

​ // 返回值是一个整数，代表定时器编码

​ // let timer = setTimeout(‘console.log(“我是一秒之后执行的代码”)’, 4000)

​ // console.log(timer)

​ // let timer2 = setTimeout(‘console.log(“我是4秒之后执行的代码”)’, 1000)

​ // console.log(timer2)

​ // 传的是函数名

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

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

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

​ clearTimeout(a)

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

​ let timer = setInterval(’ console.log(‘6666666’)', 1000)

​ clearInterval(timer)

​ let timer2 = setInterval(function (a, b) {

​ console.log(a + b)

​ }, 1000, 2, 3)

​ clearInterval(timer2)

标题协议案例