[Js]常识一

胡小禾

已于 2023-07-27 11:55:48 修改

阅读量49

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

于 2023-05-04 00:09:38 首次发布

本文链接：https://blog.csdn.net/qq_30118563/article/details/130478922

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括构成（ECMAScript,WebAPI,DOM,BOM），基础语法，数据类型检测，以及DOM和BOM的使用。还详细讲解了事件处理，如事件监听、事件流、事件捕获和冒泡、事件解绑和阻止传播。此外，提到了页面加载、滚动和尺寸变化等事件的应用。

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

Js基础

js构成

ECMAScript
WebApi
- DOM
- BOM (浏览器操作对象)

js位置

内部Js
- html从上到下执行，js放到 </body>上方
外部js
- <script src=>
内联js
- 代码写在标签内部 <button click='alert()'>

js基础语法

let
const
数组let arr=['a','b']
~~var~~
- 基本弃用的关键字，let是替代。因var有诸多不合理，如可先使用再声明，变量提升等
运算符

console.log('a' < 'b') //true
console.log('a' < 'aa') //true
console.log(NaN === NaN) //false
console.log(1 == '1') //true
console.log(1 === '1') //false 全等运算符，包括类型也要是一致的

函数

(function(){
    alert(this)
})()

逻辑运算符
js这种动态语言的隐式数据类型转化让习惯了静态语言的人很懵，比如

if (1 || 0) {
    console.log(`1||0=true`)
}
console.log(1 || 0)
console.log(2 || 0)// 2 【注意这是 2，不是true】
console.log(Boolean(2||0)) //true
console.log(1 && 0) //0
console.log(true || 1); //true
console.log(false || 1); //  1 【注意是 1 不是false】

js 数据类型

Number
- 不区浮点、整数等类型，统一都是Number
NaN (not a numer)
String类型，支持 + 连接，单引号、双引号、反引号
- 模板字符串 let str=`${name} is already good`
bool
undefined 类型，注意undefined是一种特殊的类型，而且只有一个取值

用途：声明一个变量，等待发送来的数据；通过检查变量=undefined,判断有没有数据过来
null类型，注意null是声明并且赋值了，只不过赋值了null

let num
console.log(num)//undefined （声明了变量但是未赋值）

let person = null //null类型，声明了变量而且赋值为了null
console.log(person)

console.log(undefined + 1)//NaN
console.log(null + 1) //1 （这个居然可以得到 1）

检测数据类型

typeof()

console.log(typeof num)//undefined
console.log(typeof person)//object

表单、prompt 获取的数据类型默认是字符串

let num=prompt('input a num')
console.log(typeof num === 'string') //true
console.log(parseInt(num)) //NaN

类型的转化
- js中，空串、0、null、false、NaN、undefined转化为布尔值时，均为false，其余都是true。这里的其余，包括函数、数值、对象等等一切

console.log(typeof +'123') //mumber 【这个写法太骚了】
console.log(parseFloat('123.45px')) // 123.45
console.log(Number('123.45')) // 123.45
console.log(parseInt('123.45px')) // 123
console.log(Number('123.45px')) // NaN
console.log(parseFloat('abc123.45')) //NaN
console.log(1-"") //1 【注意 "" 会被隐式转化为 0，这太魔幻了】

js容器

数组 let arr=[] ，本质是个动态数组
- 除了 push/pop等操作，还有 shift/unshift ，splice（删除） 等操作，API丰富

作用域

全局作用域：作用于所有代码执行的环境（整个< script>标签内部），或者一个独立的js文件
局部作用域
变量的坑：如果函数内部的变量没有声明，直接使用，那么它的作用域是全局，强烈不推荐

js对象

js对象长得和json很像

 let obj = {} // 对象是属性 和 方法的集合
obj.name = 'ht'  //属性
obj.fn = function (x, y) { // 方法（函数）
    return x + y
}

//对象内部属性和函数的遍历.【这种for循环一般不推荐用于数组遍历（不知道为啥），而是用于对象遍历】
for(let k in obj) {
    console.log(obj[k]);
}

console.log(obj['name']) //这种方式也可以获取对象属性
console.log(obj.name)
console.log(obj.fn(1, 2))
delete obj.fn // delete 是个特殊的操作符
console.log(obj.fn(1, 2)) //Uncaught TypeError TypeError: obj.fn is not a function

web api

DOM & BOM

// 选择匹配的【第一个】元素，注意只选一个
const div = document.querySelector('div')
console.log(div.innerHTML)
// 注意这种获取元素的语法，这个没啥好说的，就是规定死的API语法
const li = document.querySelector('ul li:first-child')
console.log(li)

更多的内容，参看 mdn link

操作元素常用属性
- href
- title
- `src
操作样式属性
通过类名操作样式

element.className='类名'

通过classList操作类控制css

element.classList.add('类名')
element.classList.remove('类名')
element.classList.toggle('类名')//切换

操作表单属性
- 获取： DOM对象.属性名
- 设置：DOM对象.属性名='password'

<input type="checkbox" name="cbx" id="" />
let cbx = document.querySelector('input[type="checkbox"]')
cbx.checked = true

自定义属性(H5)

<div data-id="1">test-1</div>
<div data-id="2">test-2</div>

let data = document.querySelector('div')
console.log(data.dataset.id) 
【注意拿到的 是 data-id 对应的 1 ，而不是 test-1 】

定时器

setTimeout()
setInterval()
clearInterval(f)

事件

事件监听

对象.addEventListener('eventName',function(){})

事件对象的获取

环境对象this

在这里插入图片描述

let button = document.querySelector('button')
// button.addEventListener('click', () => {
//    this.style.color = 'red'; // lamba函数没有 this
// })
button.addEventListener('click', function(){
  console.log(this) // 当前的这个button对象
  this.style.color = 'red';
})

事件流

在这里插入图片描述

事件捕获

在这里插入图片描述

事件冒泡

在这里插入图片描述

阻止传播

既能阻止捕获，也能阻止冒泡，本质是阻止传播。不过，实践中多用来阻止冒泡。
在这里插入图片描述

事件解绑

解绑方式一

const button = document.querySelector('button')
button.onclick = function(event){
    alert('this is click')
    button.onclick = null
}

解绑方式二

在这里插入图片描述

事件注册的两种方式和区别

在这里插入图片描述

鼠标经过事件的区别

在这里插入图片描述

事件委托

在这里插入图片描述

<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <p>I don't need color change</p>
    </ul>
</body>
<script>
    const ul = document.querySelector('ul')
    ul.addEventListener('click',function(e) {
        if (e.target.tagName === 'LI'){
            e.target.style.color = 'red';
        }
    })
</script>