12.12笔记

1.立即执行函数

<script>
    (function (){console.olg('666')})();
    
    (function (){console.log('777')}());
</script>

//每个立即执行函数之间要用'；'隔开表示结束

2.闭包

function outer(){
    let money=5000
    function inner(){
        console.log(money)
    }
    retuen inner
}


let fn=outer()
fn()

作用 1.让外界能够访问函数的局部变量

        2.可以让一个变量存储在内存当中

3.JSON对象

<script>
    let uname="ikun"
    let age=23
    let score=100
    function sing(){
        comsole.log("sing~~~")
    }
    function rap(){
        console.log("rap~~~")
    }
</script>

//json对象：把无数个复杂的属性封装成一个整体的容器

1.json对象的定义    键值对的形式  key: value
    json对象的键必须带双引号
let stu={
    "uname":'ikun',
    "age":23,
    "score":100,
    "sing":function(){
        comsole.log("sing~~~")}
    },
    "rap":function(){
        console.log("rap~~~")
    }
console.log(stu)
如何获取对象的属性

1.分量运算符        对象名.属性名
console.log(stu.uname)
stu.rap()
2.下标法    对象名[索引的值]
console.log(stu["age"])
stu["rap"]()

//添加    对象名。新的属性名=属性值
stu.gendr="M"
console.log(stu)

//改
stu.uname="zhangsan"
console.log(stu)

//json的遍历    for in
for(let i in stu){
    console.log(i)
    console.log(stu[i])
}

4.json进阶

let date={
    "info":"学生的三门成绩"，
    "score":
        [
        {
        "kemu":"语文",
        "score":77
        },
        {
        "kemu":"数学",
        "score":66
        },
        {
        "kemu":"英语",
        "score":55
        }
     ]   
}
console.log(date.score[1].kemu)

5.定时器

setTimeout():让某个函数或者某一段代码(加‘ ’)在多少毫秒之后执行

返回一个整数作为计时器的编号

setTumeout(func|code,delay)

setTimeout(()=>{
    console.log("666")},2000)





function fn(){
    console.log("6666")
    }
setTimeout(fn,2000)




setTimeout('console.log("666")',2000)



setTimeout((a,b))=>{
    console.log(a+b)},
    2000,2,5)
//2,5会在2000毫秒后函数进行时，作为参数传递给函数的形参

let obj={
    
    x:2,
    y:4,
    fn:function(){
        console.log(this.x)
        console.log(this)
    }
}



//bind()绑定this的指向
setTimeout(obj.fn.bind(obj),2000)
    

通过计时器编号，清除定时器

clearTimeout()

setinterval

let timer=setInterval(()=>{
    console.log("666")
    console.log("777")
    }，1000)
clearInterval(timer)

6.随机数

<script>
        console.log(Math.random())
        // 0-10之间的整数
        console.log(Math.round(Math.random() * 10))
        // 1-6之间的整数
        Math.round(Math.random() * 5) + 1


        // min, max
        function getRandom(min, max) {

            if (max > min) {
                return Math.round(Math.random() * (max - min) + min)

            } else {
                return "你疯了吧"
            }

        }
        console.log(getRandom(10, 20))
    </script>

7.获取元素对象

​
<div class=box>你是一个盒子</div>
<ul>
    <li>11</li>
    <li>21</li>
    <li id="li3">31</li>
    <li>41</li>
    <li>51</li>
</ul>
<script>
    //获取元素     通过css选择器获取元素对象
    const box= document.querySelector(".box")
    console.log(box)
    console.log(typeof(box))
    console.dir(box)


    const li3=document.querySelctor("ul li:nth-clild(3)")
    console.log(li3)

    const lis=document.querySelectorAll("ul li")
    comsole.log(lis)



    for(let i=0;i<lis.length;i++){
    lis[i].style.color="pink"}

    comsole.log(document.getElementById("li3"))
    comsole.(logdocument.getElementByClassName("box"))
    comsole.(logdocument.getElementByTagName("li"))
    
</script>

​

8.元素对象内容

 <div class="box"></div>
<script>
    //1.获取元素对象
     let box=document.querySelector(."box")
    //2.更改
    box.innertext=`你是一个盒子`
    box.innerHTML=`<h1>你是一个盒子</h1>`
</script>

10.更改元素对象的属性

对象.属性=值

//1.获取对象
let img=document.querySelector("img")
    console.log(img)


//2.更改src属性
    img.src="../"