javascript-Web APLs （一）

俸涛努力学前端

已于 2024-09-29 22:05:35 修改

阅读量404

点赞数 10

文章标签：前端 javascript 开发语言

于 2024-09-29 22:02:46 首次发布

本文链接：https://blog.csdn.net/2301_80115241/article/details/142641949

版权

Web APl 基本认知

变量声明

const 优先，如果变量会改变，就用 let

const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化

但是对于引用数据类型，const声明的变量，里面存的不是值，不是值，不是值，是地址

比如：

//错误写法

const girlfriend = []

girlfriend= [1,2,3]

const boy = {}

boy = {
    uname: '小帅'
}

//正确写法

const girlfriend = []

girlfriend[0] = 1
girlfriend[1] = 2
girlfriend[2] = 3

const boy = {}

boy.uname = '小帅'

建议：数组对象用 const 声明

基本数据类型的值或者引用类型的地址发生变化的时候，需要用let

作用和分类

DOM 是文档对象模型操作网页内容，可以开发网页内容特效和实现用户交

互

根据CSS选择器来获取DOM元素 (重点)

注意：里面写 css选择器必须是字符串，那要加引号

1.选择匹配的第一个元素

document.querySelector('css选择器')

参数:

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的第一个元素 ,一个 HTMLElement对象。

如果没有匹配到，则返回null

2. 选择匹配的多个元素

document.querySelectorAll('css选择器')

返回值：

CSS选择器匹配的 NodeList 对象集合

document.querySelectorAll('ul li')

//返回 ul 里面的所有 li

得到的是一个伪数组

有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得

操作元素内容

innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

<body>
 <div class="money">我会月薪过万</div>
<script>
    const money = document.querySelector('.money')  //先获取
    console.log(money.innerText)
    //我会月薪过万
    money.innerText = ('我会<strong>月薪过万</strong>')
</script>
</body>

innerHTML 属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

money.innerHTML = (`我会<strong>月薪过万</strong>`)

元素.innerText 属性只识别文本，不能解析标签

元素.innerHTML 属性能识别文本，能够解析标签

最好选择innerHTML

操作元素属性

语法：

对象.属性 = 值

//1.获取元素

const pic = document.quertSelector('img')

//2.操作元素

pic.src = './images/01.ipj'
pic.title = '我的帅照'

操作元素样式属性

1.通过 style 属性操作CSS

对象.style.样式属性 = 值

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

<body>
    <div>你好，前端，我会努力的</div>
</body>

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

<body>
    <div>你好，前端，我会努力的</div>

<script>
    const div = document.querySelector('div')
    div.style.width = '200px'
    div.style.backgroundColor = 'pink'
</script>

</body>

注意：

1. 修改样式通过 style 属性引出

2. 如果属性有 - 连接符，需要转换为小驼峰命名法如图中的 background-color

写成了 backgroundColor

3. 赋值的时候，需要的时候不要忘记加 css单位

2. 操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

语法：元素.className = 'active' active是 css的一个类名

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
       .active {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid black;
            font-size: 30px;
        }
    </style>

<body>
    <div>你好，前端，我会努力的</div>

<script>
    const div = document.querySelector('div')
    div.className = 'active'
</script>

</body>

好处：可以同时修改多个样式

直接使用 className 赋值会覆盖以前的类名

3. 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

操作表单元素属性

课外知识：想要获取表单内容用 input.value 不用 input.innerHTML

语法：表单.value = '用户名' 表单.type = 'password'

<body>
    <input type = 'text' value = '会赢吗'>
<script>
    //老规矩，先获取
    const uname = document.querySelector('input')
    //设置表单的值
    uname.type = 'password'
    uname.value = '一定会的'
</script>
</body>

先写到这，明天再继续