修改元素属性：元素.属性名=属性值（先获取元素）
// 1、获取元素对象
let img = document.querySelector('img')
console.log(img)
// 2、修改元素属性 元素.属性名=属性值
img.title = "我是更改过的"
img.src = "../imgs/guozhuangmingpin.jpg"修改元素样式：元素.style.样式名
// 1、获取元素
const box = document.querySelector('.box1')
const box2 = document.querySelector('.box2')
console.log(box)
// 2、修改元素样式1:通过style操作---------->样式特多时，不适用
// box.style.backgroundColor = 'pink'
// box.style.width = "1200px"
// 3、修改元素样式2：通过操作class名更改样式 className；原来的类名不复存在
// box2.className = "pink"
// 4、修改元素样式3：classList 元素对象.classList.add()：添加类名，保留原类名
box2.classList.add('pink')
box2.classList.remove('box2')//移除类名
box2.classList.toggle('pink')//切换，由该类名时，删除该类名。没有该类名的时候，添加了该类名修改设置单元表：
// 1、获取元素对象
const btn = document.querySelector('button')
const ipt = document.querySelector('input')
// 2、设置按钮可点击
btn.disabled = false
ipt.type = "password"事件监听：
元素.addEventListener(' 事件 ',要执行的函数,冒泡或捕获（ture/false）
// 事件监听：程序检测某事件有没有发生,一旦事件发生，立刻调用一个函数作为响应
//
const start = document.querySelector('button:first-child')
const end = document.querySelector('button:nth-child(2)')
const box = document.querySelector('.box')
console.log(start, end)
// 语法：元素(事件源：谁触发).addEventListener('事件（什么事件）'，执行的函数（要做什么事情，事件触发一次，执行一次），冒泡或捕获(true\false))
// 默认冒泡
start.addEventListener('click', function () {
box.style.display = 'block'
})
function fn() {
box.style.display = 'none'
}
end.addEventListener('click', fn)加载事件：
将scrpt写在头部时：需要加载完body再执行此时输入window.addEventListener('load',function(){})
window.addEventListener('load', function () {
const start = document.querySelector('button:first-child')
const end = document.querySelector('button:nth-child(2)')
const box = document.querySelector('.box')
console.log(start, end)
// 语法：元素(事件源：谁触发).addEventListener('事件（什么事件）'，执行的函数（要做什么事情，事件触发一次，执行一次），冒泡或捕获)
start.addEventListener('click', function () {
box.style.display = 'block'
})
function fn() {
box.style.display = 'none'
}
end.addEventListener('click', fn)
})常见事件类型：
// 点击事件 click
// 鼠标经过 mouseenter
// 鼠标离开 mouseleave
// 获取焦点 focus
// 失去焦点 blur
// 键盘按下/弹出 keydown\keyup
// 滚动事件 scroll
事件对象：
window.addEventListener('keydown', function (e) {
// 事件对象：记录事件触发的相关信息的
// console.log(e)
if (e.key === 'Enter') {
console.log('111')
}
else {
console.log('出错了')
}
})事件绑定：
// 2、事件绑定
start.onclick = function () {
// console.log('111')
box.style.display = 'block'捕获冒泡：
// 1、获取元素
const gf = document.querySelector('.grandFather')
const f = document.querySelector('.father')
const son = document.querySelector('.son')
// 添加事件 第三个参数默认是false即为冒泡 true：即为捕获（爷爷---》爸爸---》儿子）
gf.addEventListener('click', (e) => {
alert('我是爷爷')
e.stopPropagation()
}, true)
f.addEventListener('click', () => {
alert('我是爸爸')
e.stopPropagation()
}, true)
son.addEventListener('click', () => {
alert('我是儿子')
e.stopPropagation()
}, true)查找结点：
const father = document.querySelector('.father')
const son = document.querySelector('.son')
const son2 = document.querySelector('.two')
console.log(father)
// 查找子节点： 父元素.children[]
console.log(father.children.length)
// father.childNodes 查找节点、文本、空格…… 了解即可
// 查找父节点
console.log(son.parentNode)
// 查找兄弟节点(了解即可)
// son2.nextElementSibling
// son2.previousElementSibling
克隆节点：
const ul = document.querySelector('ul')
console.log(ul.cloneNode(true)) //true代表子节点一起克隆
</script>创建节点和追加节点：
获取元素-(let ul = document.querySelector)->创建节点（let li =document.createElement）-->追加节点(ul.inserBefor(li,ul.children[0]))
// 1、获取元素
const ul = document.querySelector('ul')
// 1、、创建li
let li = document.createElement('li')
// console.log(li)
// 2、、给创建的节点添加内容
li.innerHTML = `<h1>我是js创建的li</h1>`
// 3、追加
// 父元素 *******************************************
// ul.append(li) //追加到父元素的最后一个子元素
ul.insertBefore(li, ul.children[0])//插入到指定位置的前面
删除节点：
获取父元素，获取要删除的子元素
父元素.removeChild(子元素)
const ul = document.querySelector('ul')
const li3 = document.querySelector('.three')
// 删除节点一定是通过父元素删除
ul.removeChild(li3)定时器：
1、setTimeout：某个函数或者某段代码(字符串格式)，在多少毫秒之后执行，返回一个整数，用来标识定时器
// 2、setInterval :函数或者一段代码，每隔一段时间，执行一次
clearInterval()清除定时器//用的哪个计时器后缀就是哪个
// 1、setTimeout：某个函数或者某段代码(字符串格式)，在多少毫秒之后执行，返回一个整数，用来标识定时器
const timer1 = setTimeout(function () {
console.log(`timer1=${timer1}`)
}, 2000)
console.log(timer1)
const timer2 = setTimeout("alert('nihao')", 2000)
// console.log(`timer2=${timer2}`)
const timer3 = setTimeout(function (a, b) {
console.log(a + b)
}, 3000, 2, 3)//3s之后，作为参数传入执行的函数
//
var x = 10
let obj = {
x: 2,
y: function () {
console.log(`方法打印出来是：${this.x}`)
console.log(this)
}
}
// console.log(obj.y())
//setTimeout(obj.y, 2000) //第一个参数为对象的方法时，this指向windows，而不是obj本身
// 解决办法：
//setTimeout(function () { obj.y() }, 2000)
setTimeout(obj.y.bind(obj), 2000)
// 2、setInterval :函数或者一段代码，每隔一段时间，执行一次
function fn() {
console.log(111)
}
const timer4 = setInterval(fn, 1000)
console.log(timer4)
// 清除定时器
clearInterval(timer4)事件委托：
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
// console.log(e)
e.target.style.backgroundColor = 'pink'
})箭头函数：简化代码解决this问题
// 简化代码，解决this问题
// 回调函数、函数表达式
// const fn = function (a, b) {
// console.log(a + b)
// }
// fn(1, 4)
// 基本语法()=>{}
const fn = (a, b) => {
console.log(a + b)
}
fn(2, 3)
// 只有一个参数，
const fn1 = a => {
console.log(a)
}
fn1('111')
// 只有一行代码，{}可以省略
const fn2 = a => console.log(a)
fn2('222')
// 只有一行代码时，return可以省略
const fn3 = () => a = 3
let c = fn3()
console.log(c)
// 直接返回对象
const fn4 = () => ({ uname: 'gouxin' })
this指向：
函数里面的this，谁调用改函数就指向谁
事件监听里面的函数，指向事件监听原
对象方法中的this指向对象本身
计时器函数中的this指向window
箭头函数中的this，箭头函数中没有this的作用域，不会创建自己的this，只会继承上一层的this
构造函数的this指向构造函数实例化的对象
js执行机制：同步任务放入执行栈执行，异步任务--》任务队列 等待同步任务执行完毕之后，会去任务队列，查看是否由准备好的异步任务，有，则将其放入执行栈中（计时器是异步任务）
js是单线程。同一时刻只能执行一个任务
location：
// location.href = "https://www.baidu.com"
document.querySelector('button').addEventListener('click', function () {
location.reload(true)//强制刷新
})
navigator：
console.log(navigator.userAgent)history：
const back = document.querySelector('button:first-child')
const forword = back.nextElementSibling
back.addEventListener('click', function () {
// history.back()
history.go(-1)
})
forword.addEventListener('click', function () {
// history.forward()
history.go(-1)
})locastroge：
localStorage.setItem('uname', 'gouxin')
console.log(localStorage.getItem('uname'))
localStorage.clear()
剩余函数：
// 剩余参数
function getSum(...arr) {
// console.log(arr)
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
let n = getSum(2, 3, 4, 5, 6)
console.log(n)
// 多个立即执行函数之间，必须添加;
; (function () {
console.log('222')
})()
; (function () {
console.log('333')
}())
展开运算符：
let arr = [1, 2, 3, 4, 5]
console.log(...arr)
扫一扫
917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
