文章目录
Js基础
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(){})
更多的事件:
事件对象的获取![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3de9216d9108d88e2e20058da3c3e559.png)
环境对象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>
阻止冒泡
页面加载事件
页面滚动事件