蓝桥杯备赛

1.clientX  只读属性   

        如： clientWidth    clientHeight

2.定制定时器的执行   

let timer = setInterval(() => {
    if(!isPlay) return;
    if(parseInt(spanEle.style.left) == 0){
        spanEle.remove();
        clearInterval(timer);    //清除定时器，停止定时器的执行
    } 

3.

可选链操作符（Optional Chaining Operator）：问号用于访问可能不存在的属性或方法，以避免引发错误。它的语法是 object?.property 或 object?.method()。

var person = {
  name: "libai",
  address: {
    city: "tang"
  }
};

console.log(person.address?.city); // 输出 "tang"
console.log(person.address?.state); // 输出 undefined，而不是引发错误

4.

vertical-align

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.       非断行空格        是一个特殊的实体字符，在HTML中用于插入一个空格，但不会导致文本换行。

注意：滥用使用       来进行样式控制可能会破坏文本内容的语义结构，并且可能导致在不同设备和屏幕尺寸下的显示问题。

第五点仅为我个人记的笔记

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.Math

     number为小数

     Math.ceil(number)  ---向上取整

    Math.pow(x,y)  ---x的y次幂，y可以为小数

    Math.random() ---产生一个0到1的伪随机数（取不到一）

    Math.round(number) ---将number四舍五入

    Math.trunc(number) ---直接去掉小数部分

实例：

​
const number = 5.2
console.log(Math.ceil(number))  // 6
console.log(Math.pow(number,2)) // 27.040000000000003
console.log(Math.random())      // 0.8859793121188233
console.log(Math.round(number)) //5
console.log(Math.trunc(number)) //5

​

6.获取dom元素

1. .nextSibling：这是一个 DOM 属性，它代表当前元素的下一个相邻节点。在这种情况下，我们假设选中的单选按钮之后的相邻节点是包含文本内容的元素。

2. .textContent：这是一个 DOM 属性，它表示元素的文本内容。

3. .trim()：这是 JavaScript 字符串的内置方法，用于去除字符串首尾的空格。

 <label for="" ><input type="radio" name="male" id="male" value="0" />男</label>
 <label for=""><input type="radio" name="male" id="female" value="1" />女</label>

const sex = document.querySelectorAll('[type="radio"]') // 可获得type="radio"的dom元素

const sex = document.querySelector('[type="radio"]:checked') //可获得该类型被点击的元素

const sex = document.querySelector('[type="radio"]:checked').nextSibling.textContent // 可获得被点击后的文本

const sex = document.querySelector('[type="radio"]:checked').nextSibling.textContent.trim() // .trim() 用于去除字符串首尾的空格,若不需去除可不写

7.node.js创建端口

const http = require('http')
const server = http.createServer()
server.on('request',(req,res)=>{
    res.setHeader('Content-Type',"text/html;chatset=utf-8")
    if(req.url == '/luo'){
        res.end(JSON.stringify([{"name":"llz" ,"age": 18,},{"name":"lyh","age":18}]))
    }else{
        res.end("404")
    }
})
server.listen(8080,()=>{
    console.log("ok")
})

8.string 

        replace(),将指明的第一个字符或字符串替换

        replaceAll(),替换所有指明的字符或字符串

        都返回新字符串

let str = "dog like eat dog food ,dog love dog " 
console.log(str.replace("dog","person")) // person like eat dog food ,dog love dog
console.log(str.replaceAll("dog","person")) // person like eat person food ,person love person

  9.Array

        concat() ,合并两个或多个数组，并返回新数组

const arr  = [4,77,324,5,7,3,9,56]
let newArr = ["english","chinses","chemistry","math"]
console.log(newArr.concat(arr)) 
//[ 'english','chinses','chemistry','math',324,77,56,9,7,5,4, 3]

10.vue 自定义双向绑定

  1.update:modelValue

//父组件

<script setup lang='ts'>
import {ref, watch} from "vue"
let value = ref("null")
    //仅此处不一样
 const emit = defineEmits(["update:modelValue"])
watch(value,newValue=>{
   emit("update:modelValue",newValue)
   
})
</script>

<template>
    <div class="container">
        <input type="text" v-model="value">
        {{ value }}
    </div>
</template>

<style lang="scss" scoped>
input{
    
    background-color: aqua;
}
</style>

//子组件
<script setup lang='ts'>
import { ref, watch,  } from "vue"
import formipt from "./test.vue"
const iptValue = ref(null);
watch(iptValue,newValue=>{
  console.log(newValue)
})
</script>

<template>
<!-----------    自定义双向绑定    --------->
<formipt v-model="iptValue"></formipt> 
    </div>
</template>

<style lang="scss" scoped>

</style>

       

 2.update:value

//父组件
<script setup lang='ts'>
import {ref, watch} from "vue"
let value = ref("null")
//仅此处不一样
 const emit = defineEmits(["update:value"])
watch(value,newValue=>{
   emit("update:value",newValue)
   
})
</script>

<template>
    <div class="container">
        <input type="text" v-model="value">
        {{ value }}
    </div>
</template>

<style lang="scss" scoped>
input{
    
    background-color: aqua;
}
</style>

//子组件
<script setup lang='ts'>
import { ref, watch,  } from "vue"
import formipt from "./test.vue"
const iptValue = ref(null);
watch(iptValue,newValue=>{
  console.log(newValue)
})
</script>

<template>
<!-----------    自定义双向绑定    --------->
<formipt v-model:value="iptValue"></formipt>
    </div>
</template>

<style lang="scss" scoped>

</style>

// v-model
let number = ref()
<child :modelValue="number" @update:modelValue = "fn"></child>
<child v-model="money"></child>
//二者相等

11.Node.appendChild()

        将一个节点附加到指定节点的子节点列表的末尾处，如果DOM元素该节点，那么appendChild 只会将它从原先的位置移动到新的位置（它首先会被移除，再被插入到新的位置）。若要保留已在文档中的节点，可以先使用 Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。

        如

let li = this.cloneNode(true);
box.appendChild(li);

12.Node.cloneNode

        返回调用该方法的节点的一个副本

        语法：let newNode = node.cloneNode(deep);

      deep :  是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。

        克隆一个元素节点会拷贝它所有的属性以及属性值，当然也就包括了属性上绑定的事件 (比如onclick="alert(1)"),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用 JavaScript 动态绑定的事件。

        啥意思呢，简单来说就是，你写标签内的就能被拷贝到，你在js中给他加的就拷贝不到，下面代码中方法a能被拷贝，而他的点击事件继承不到，你在box中点击第一个元素，可以打印

<ul>
    <li onclick="a()"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="box"></div>

let ul = document.querySelector('ul');
let box = document.querySelector('.box');
let lis = ul.querySelectorAll('li');
    lis.forEach((item,index)=>{
        item.onclick = function(){
             let li = this.cloneNode(true);
             box.appendChild(li);
             this.style.visibility = "hidden";
               
        }
     })

const a = ()=>{
    console.log(1)
}

13.使用 toString() 去检查对象类

        tostring() 可以与每个对象一起使用，并且（默认情况下）允许你获得它的类。

toString.call(new Date()); // [object Date]
toString.call(new String()); // [object String]
console.log(toString.call([]));// [object Array]