web前端12.12笔记

最新推荐文章于 2024-10-17 09:40:47 发布

VCR__

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量82

点赞数

文章标签：前端笔记 javascript

本文链接：https://blog.csdn.net/VCR__/article/details/134997966

版权

本文介绍了JavaScript中的立即执行函数、闭包概念，展示了JSON对象的使用、属性访问方法，包括分量运算符和下标法，以及定时器（setTimeout和setInterval）的用法。同时涵盖了随机数生成和DOM元素的操作，如选择器和属性修改。

摘要由CSDN通过智能技术生成

立即执行函数

（function(){console.log("666")})();
(function(){console.log("777")}());      多个执行函数之间用“；”

闭包

function outer(){
     let money=5000
     function inner(){
             console.log(money)
         }
     return inner
 }
let fn=outer()
fn()   //5000

json对象(把无数个繁杂的属性封装成一个整体的容器）

let uname="ikun"
let age=23
let score=100
function sing(){
      condole.log("sing~~")
}
function rap(){
      console.log("rap~~")
}


1.json对象的定义（键值对的形式  key=value)
   let stu={
       "uname":'ikun',
       "age":23,
       "score":100,
       "sing":function(){
              console.log("sing~~")},
       "rap":function(){
              console.log("rap~~")}
     }
    console.log(stu)

2.如何读取对象的属性
    1.分量运算符  对象名.属性名
       console.log(stu.uname)//ikun
       stu.rap()//rap~~
    2.下标法   对象名【索引值】
       console.log(stu["age"])//233
       stu["rap']()//rap~~
   添加  对象名.新的属性名=属性值
       stu.gender="M"
       console.log(stu)
   json的遍历   for in
       for(let i in stu){
            console.log(i)
            console.log(stu[i])
          }

json的进阶

let data={
   "info":"学生的三名成绩",
   "score":[
       {
          "kemu":"语文",
          "score":77
       },
       {
          "kemu":"数学",
          "score":21
       },
       {
          "kemu":"英语",
          "score":33
       },
     ]
   }
   console.log(data.score[1].kemu)//数学

定时器

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


  function fn(){
    cinsole.log("666")
    }
  setTimeout(fn,2000)
   


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

   setTimeout(a,b)=>{
        console.log(a+b）
      }，2000，2，5）   //7

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


      1.obj.fn()//2
        setTimeout(obj.fn,2000) ❌错误
        window.setTimeout(function(){
                   obj.fn()
           },2000)     //2
      2.bind()绑定this的指向
            setTimeout(obj.fn.bind(obj),2000)


        let tim=window.setTimeout(function(){
                    obj.fn()
                },2000)
        console.log(tim)
        clearTimeout(tim)    通过定时器编号清楚定时




2.let timer=setInterval()=>{
           console.log("666")
           console.log("777")
    },1000)
  clearInterval(timer)//不运行

随机数

console.log(Math.random())  去0-1之间的任意数

console.log(Math.round()*10)  取0-10之间的整数

1-6之间的整数
Math.round(Math.random（）*5）+1

min-max之间的整数
function getRandom(min,max){
      return Math.round(Math.random）*(max-mian)+min
  }
console.log(getRandom(10,20)



随机数
function getRandom(min,max){
       if(max>mian){
             return Math.round(Math.random()*(max-mian)+min)
        }else{
             return"你疯了"
          }
      }
console.log(getRandom(0,20))

获取元素对象

<div class="box">你是一个盒子</div>
获取元素通过CSS选择器获取元素对象
const box=document.querySelector(".box")
console.log(box)



<ul>  
  <li>11</li>
  <li>21</li>
  <li>31</li>
  <li>41</li>
  <li>51</li>
</ul>

<script>
   const li3=document.querySelector("ul li:nth-child(3)")
   console.log(li3)

   const li=document.querySelector("ul li")
   console.log(li)

   const lis=document.querySelectorAll("ul li")
   consoke.log(lis)
   for(let i=0;i<lis.length;i++){
         lis[i].style.color="pink"
    }   



<ul>  
  <li>11</li>
  <li>21</li>
  <li id="31">31</li>
  <li>41</li>
  <li>51</li>
</ul>
console.log(document.getElementsById("li3"))
console.log(document.getElementsByClassName("box"))
console.log(document.getElementsByTagName("li"))

元素对象内容

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

更改元素对象的属性

<img src="../..."  alt="">
<script>
    对象.属性=值
   1.获取元素
    let img=document.querySelector("img")
   2.更改src属性
    img.src="../...."
</script>
 

<input type="password" name="" id="">
<script>
    let ipt=document.querySelector("input")
    ipt.type="text"
</script>

<button disabled>点击</button>
<script>
   let btn=document.querySelector("button")
   btn.disabled-flase