js使用基础总结（简单封装，事件，foreach 原生js写法）

最新推荐文章于 2023-01-04 12:27:03 发布

小秃头学编程

最新推荐文章于 2023-01-04 12:27:03 发布

阅读量426

点赞数

文章标签： javascript 前端 css html

本文链接：https://blog.youkuaiyun.com/qq_55738988/article/details/124810280

版权

本文总结了JavaScript的基础知识，包括forEach的遍历用法、switch的精准判断、回调函数和普通函数的区别、字符串拼接与原生JS生成元素的不同、数据结构的判断需求以及封装公用函数的概念。同时，讲解了DOM操作如创建元素、添加类名和属性，以及事件监听如click、mouseover等，并列举了一些常见的JavaScript报错情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.forEach的灵活使用

【注意】数组专用的-----遍历函数方法相当于for循环

语法结构

arr.forEach(function(obj,index){
obj---数组中的具体数据，可以是基本数据类型，也可以是获取的标签
index---数据或标签的索引})

2.switch的使用

【注意】

1.判断相当于是===的判断（精确值的判断）

2.判断机制是循环的底层，所以要使用break结尾

    let num = "2"
    switch (num) {
        case 1:
            alert('ok')
            break;
        case 2:
            alert('ook')
            break;
        default:
            alert('nook')
            break;
    }
//结果是nook

3.回调函数和普通函数

1.运动框架----当前的函数执行完运动后，再执行的操作

 box.onmouseout = function () {
        startMove(this,{"height":"20px"},500,"bounceOut",function(){
            startMove(box,{"width":"100px"},500,"bounceOut")
        })

2.普通函数---自定义函数---内置函数

4.拼接和原生js生成的区别

拼接的内容永远是字符串---通过innerHTML添加到标签中，多次添加相当于替代

<!-- 拼接 -->
<ul class="text">
</ul>
<script>
    // 获取标签
    let text=document.querySelector('.text')
    let str="<li>"
        str+=`${"好好学习"}`
        str+="</li>"
        // 传输内容
        text.innerHTML=str
</script>

自动生成的标签是一个字符串---通过object对象---通过appendChild()添加，多次添加相等于累加

<!-- js原生 -->
<ul class="text">

</ul>

<script>
  let  arr=[11,22,33,44]
    let text=document.querySelector('.text')
    arr.forEach(function(obj,index) {
        //生成标签
        let li=document.createElement('li')
        // 生成文字
        li.innerHTML=obj
         // 把生成和装载完毕的li添加到ul中
        text.appendChild(li)

    });
</script>

5.遍历数据结构中的判断需求

 <ul class="list girl">

    </ul>
    <ul class="list boy">

    </ul>
    <script>
        let list = document.querySelector(".list")
        let dataArray = [
            { name: "aaa", age: 12, sex: "男" },
            { name: "bbb", age: 6, sex: "女" },
            { name: "ccc", age: 24, sex: "男" },
            { name: "ddd", age: 78, sex: "男" },
            { name: "eee", age: 40, sex: "女" },
            { name: "fff", age: 50, sex: "男" },
            { name: "ggg", age: 3, sex: "女" },
        ]
        // // 遍历显示所有人的名字到list的li中
        let girl = document.querySelector(".girl")
        let boy = document.querySelector(".boy")
        // dataArray.forEach(function (obj, index) {
        //     let li = document.createElement("li")
        //     li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`
        //     list.appendChild(li)
        // })
           // 遍历显示所有女生的名字到list的li中
    dataArray.forEach(function (obj,index) {
        if (obj.sex == "女") {
            let li = document.createElement("li")
            li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`
            list.appendChild(li)
        }
    })
    dataArray.forEach(function (obj, index) {
        if (obj.sex == "男") {
            let li = document.createElement("li")
            li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`
            boy.appendChild(li)
        }
        if (obj.sex == "女") {
            let li = document.createElement("li")
            li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`
            girl.appendChild(li)
        }
    })

    </script>

6.封装公用函数的概念

原理：封装让代码写起来更简单

// 封装一个专门获取标签多个的方法
function getElAll(tagName) {
    return document.querySelectorAll(tagName)
}
// 使用方法
let nu(自己定义的变量)=getElAll()
// 封装一个专门获取标签单个的方法
function getEl(tagName) {
    return document.querySelector(tagName)
}
// 使用方法
let num(自己定义的变量)=getEl()
// 封装一个大家都可以使用的选项卡函数
function checkTab(allTitle, allList, titleClassName, listClassName, num = 0) {
    if (num == 0) {
        for (let a = 0; a < allTitle.length; a++) {
            allTitle[a].onclick = function () {
                for (let b = 0; b < allTitle.length; b++) {
                    allTitle[b].classList.remove(titleClassName)
                    allList[b].classList.remove(listClassName)
                }
                this.classList.add(titleClassName)
                allList[a].classList.add(listClassName)
            }

        }
    } else {
        for (let a = 0; a < allTitle.length; a++) {
            allTitle[a].onmouseover = function () {
                for (let b = 0; b < allTitle.length; b++) {
                    allTitle[b].classList.remove(titleClassName)
                    allList[b].classList.remove(listClassName)
                }
                this.classList.add(titleClassName)
                allList[a].classList.add(listClassName)
            }

        }
    }

}
// 使用方法
 // 获取标签名
 let titleLists = getElAll(".loginTitle .titleList")
 let listBoxs = getElAll(".loginBar .listBox")   
 checkTab(titleLists(获取的标签),listBoxs,"active"(要使用的类名),"show",num=0(可以不写默认为0))

7.js原生标签掌握的和一些属性方法

createElemet()----生成
classList.add()---添加类名
setAttribute(属性名，属性值)----添加属性
getAttribute(属性名)----获取属性
innerHTML----添加文本
父级标签.appendChild(子级标签)

写法如下：


    // 窗口列表的数据
    let listDataArr = [
      
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
      
    //   获取标签
    let realList = document.querySelector(".main_realList")

    for (let a = 0; a < listDataArr.length; a++) {
        // 生成li
        let li = document.createElement("li")
        // 如果isSpecial 的值为true 就要添加企业专用
         // 生成div
         let div = document.createElement("div")
        if (listDataArr[a].isSpecial == true) {
            // 添加类名
            div.classList.add("main_comIcon")
            // 添加文字内容
            div.innerHTML = "企业专用"
           
        } else {
            // 添加类名
            div.classList.add("main_comIcon1")
        }
         // li 添加div为子级
         li.appendChild(div)
        // 生成img
        let img = document.createElement("img")
        // 给img添加路径
        img.src = "./imgs/"+listDataArr[a].img
        // 生成图片盒子
        let imgBox = document.createElement("div")
        // 添加类名
        imgBox.classList.add("main_imgBox")
        // 添加img
        imgBox.appendChild(img)
        // 把生成的imgBox添加到li做子级
        li.appendChild(imgBox)
        // 生成文字内容
        let p1 = document.createElement("p")
        // 添加类名
        p1.classList.add("main_content")
        p1.classList.add("fs12")
        p1.classList.add("c181")
        // 给p1添加内容
        p1.innerHTML = listDataArr[a].name
        // 把生成的p1添加到li做子级
        li.appendChild(p1)
        // 生成价格
        let p2 = document.createElement("p")
        // 添加类名 如果是免费---green 否则 ---red
        if (listDataArr[a].price == "免费") {
            p2.classList.add("main_price","green")
            // p2.classList.add("green")
        } else {
            p2.classList.add("main_price","red")
            // p2.classList.add("red")
        }
        // p2添加价格
        p2.innerHTML = listDataArr[a].price
        // 把生成好的p2添加到li中
        li.appendChild(p2)
        // 生成装按钮的盒子div
        let btn = document.createElement("div")
        // 添加类名
        btn.classList.add("main_btn")
        // 生成按钮
        let button = document.createElement("button")
        // 添加按钮文字
        button.innerHTML = "申请数据"
        // 把生成的按钮添加到装它的div盒子中
        btn.appendChild(button)
        // 把按钮盒子装入li中
        li.appendChild(btn)
        console.log(li);
        // 把生成和装载完毕的li添加到ul中
        realList.appendChild(li)
    }

获取浏览器的宽高
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);

窗口大小变化监听事件
window.onresize = function () {

console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);

}

给页面做蒙层

 <style>
        /* 蒙层盒子 */
        .mogoriya {
            background: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            /* display: none; */
        }
    </style>

    <div class="mogoriya"></div>

    <script>
        // 蒙层的设置
        let mogoriya =document.querySelector(".mogoriya")
        // console.log(mogoriya);
        mogoriya.style.width = document.documentElement.clientWidth + "px"
        mogoriya.style.height = document.documentElement.clientHeight + "px"
        // 窗口大小变化监听事件
        window.onresize = function () {
            // 把改变以后的窗口大小设置给蒙层
            mogoriya.style.width = document.documentElement.clientWidth + "px"
            mogoriya.style.height = document.documentElement.clientHeight + "px"

        }
    </script>

监听事件
元素.addEventListener("事件名",function () {

})

//获取标签
let close = getEl(".closed span")
//监听事件
    close.addEventListener("click",function () {
        mogoriya.style.display = "none"
    })

click---点击
mouseover---鼠标移入
mouseout----鼠标移出
scroll----监听滚动条
resize----监听窗口大小变化
blur------失焦事件
change----输入改变事件

8.基本报错

XX is not defined----变量没定义
XX is not a function---不是一个函数
ERR_FILE_NOT_FOUND----图片路径错误
Cannot set properties of undefined (setting 'onclick') --- 标签没找到