javascript-Web APLs （一）

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元素

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>

注意：

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法如图中的 background-color

写成了 backgroundColor

赋值的时候，需要的时候不要忘记加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>

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示

如果为true 代表添加了该属性

如果是false 代表移除了该属性

<input type="checkbox" checked>  //默认为勾选的
<script>
    const input = document.querySelector('input')
    input.checked = false    //现在变为不勾选了  只能用 true 或  false 

    input.checked = ''  //空字符串 就是 false 
</script>

<button disabled="disable">点击</button> 
//当属性和值一样，就写 属性 就行
<button disabled>点击</button>   //按钮被禁用了 ┭┮﹏┭┮

<script>
    const button = document.querySelector('button')
    console.log(button.disabled)  
    //true  这句话的意思是，button按钮要禁用吗？ true 对 被禁用了

    button.disabled = false  //放心，被我解除了，哈哈

    
</script>

自定义属性

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

//先扩展一个开发常用的小知识
  div{$}*5
//这段代码，会变成

    <div data-id="520" data-ha="不知道">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
<script>
    const one = document.querySelector('div')    
//注意，当有多个div 时，只能获得第一个，我笔记已经说了
    console.log(one.dataset)  //将 one 所有自定义属性 集合到一起 {id："520" ha:"不知道"}

    cosole.log(one.dataset.id) //获取其中一个  结果为  520  
</script>

定时器-间歇函数

作用：根据时间自动重复执行某些代码

1.开启定时器

setInterval(函数,间隔时间)

作用：每隔一段时间调用这个函数

          间隔时间单位是毫秒

function repeat() {
    console.log('加油，我们会赢得，我们一起')
}

//每隔一秒调用 repeat 函数

setInterval(repeat,1000)

注意几个点：

函数名字

**不需要加括号 **

2. 定时器返回的是一个id数字

2. 关闭定时器

let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)

//来个稍微复杂一点的，看看阁下如何应对

let timer = setInterval(function(){console.log('hi~~ 帅哥')},1000)
 
//有开启，一般也会 将他 关闭的
clearInterval(timer)

第一天结束了，希望我们能一起走下去，

标签：前端 javascript 开发语言

本文转载自: https://blog.csdn.net/2301_80115241/article/details/142641949
版权归原作者 俸涛努力学前端 所有，如有侵权，请联系我们删除。