J S笔记

JavaScript基础与应用教程

最新推荐文章于 2025-11-21 18:22:48 发布

原创最新推荐文章于 2025-11-21 18:22:48 发布 · 1.5k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

JSday5

1-随机数函数

//左闭右开能取到0 但取不到1 中间的随机一个小数

console.log((Math.random()))

//0-10之间的整数

console.log(Math.floor(Math.random()*11))

let arr=['red','green','blue']

let random=Math.floor(Math.random()*arr.length)

//console.log(random)

console.log(arr[random])

//生成N-M之间的随机数

//Math.floor(Math.random()*(M-N+1))+N

//N-M间随机数函数

function getRandom(N,M)

{

return Math.floor(Math.random()*(M-N+1))+N

}

console.log(getRandom(4,8))

APIday1

1-DOM对象

2-获取DOM元素

语法：console.log()

3-修改对象内容

1. 获取元素

const box = document.querySelector('.box')

2. 修改文字内容对象.innerText 属性

console.log(box.innerText) // 获取文字内容

// box.innerText = '我是一个盒子' // 修改文字内容

box.innerText = '<strong>我是一个盒子</strong>' // 不解析标签

3. innerHTML 解析标签

console.log(box.innerHTML)

box.innerHTML = '我要更换'

box.innerHTML = '<strong>我要更换</strong>'

4-修改元素常见的属性

// 1. 获取图片元素

const img = document.querySelector('img')

// 2. 修改图片对象的属性对象.属性 = 值

img.src = './images/2.webp'

img.title = 'pink老师的艺术照'

5-通过style更换样式

// 1. 获取元素

const box = document.querySelector('.box')

//2. 修改样式属性对象.style.样式属性 = '值' 别忘了跟单位

box.style.width = '300px'

// 多组单词的采取小驼峰命名法

box.style.backgroundColor = 'hotpink'

box.style.border = '2px solid blue'

box.style.borderTop = '2px solid red'

6-通过类名更换样式

// 1. 获取元素

const div = document.querySelector('div')

// 2.添加类名 class 是个关键字我们用 className

div.className = 'nav box'

7-通过classList更换样式

// 通过classList添加

// 1. 获取元素

const box = document.querySelector('.box')

// 2. 修改样式

// 2.1 追加类 add() 类名不加点，并且是字符串

// box.classList.add('active')

// 2.2 删除类 remove() 类名不加点，并且是字符串

// box.classList.remove('box')

// 2.3 切换类 toggle() 有还是没有啊，有就删掉，没有就加上

box.classList.toggle('active')

8-定时器-间歇函数

// setInterval(函数, 间隔时间)

// setInterval(function () {

// console.log('一秒执行一次')

// }, 1000)

day2

1-按下回车发布评论

const str=' pink'

console.log(str.trim())

trim:去除字符串左右的空格

2-环境对象this以及回调函数

环境对象this:他代表着当前运行所处的环境

判断this指向的规则：谁调用，this就是谁

回调函数：把函数当做另外一个函数的参数传递

day3

1-全选按钮案例

const checkAll =document.querySelector('#checkAll')

const cks =document.querySelectorAll('.ck')

checkAll.addEventListener('click',function(){

for(let i=0;i<cks.length;i++){

cks[i].checked=this.checked

}

})

for(let i=0;i<cks.length;i++){

cks[i].addEventListener('click',function(){

checkAll.checked =document.querySelectorAll('.ck:checked').length===cks.length

})

}

.ck:checked：伪类选择器

document.querySelectorAll('.ck:checked').length===cks.length：该语句结果为true或false

2-事件流的两个阶段

事件捕获：从大到小

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

1.addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

2.若传入false代表冒泡阶段触发，默认就是false

3.若是用L0监听，则只有冒泡阶段，没有捕获

事件冒泡：从小到大

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

3.阻止冒泡

实际上是阻止事情的流动传播，对捕获和冒泡都有效

事件对象.stopPropagation()

son.addEventListener('click', function (e) {

alert('我是儿子')

// 组织流动传播事件对象.stopPropagation()

e.stopPropagation()

4.解绑事件

1. L0 事件移除解绑

btn.onclick = function () {

alert('点击了'）

btn.onclick = null

2. L2 事件移除解绑

function fn() {

alert('点击了')

}

btn.addEventListener('click', fn）

btn.removeEventListener('click', fn)

5.事件委托

优点：减少注册次数，可以提高程序性能

事件对象.target.tagName

if (e.target.tagName === 'LI') {

e.target.style.color = 'red'

}

6.自定义属性

const div = document.querySelector('div')

console.log(div.dataset.id) // 0

</script>

7.阻止元素默认行为

（1）阻止冒泡

事件对象.stopPropagation

(2)阻止元素默认行为

e.preventDefault()

form.addEventListener('submit', function (e) {

// 阻止默认行为提交

e.preventDefault()

})

8.页面添加事件

（1）load事件

监听整个页面给window加

等待页面所有资源加载完毕，就回去执行回调函数

window.addEventListener('load', function () {

const btn = document.querySelector('button')

btn.addEventListener('click', function () {

alert(11)

})

img.addEventListener('load', function () {

// 等待图片加载完毕，再去执行里面的代码

})

（2）DOMContentLoaded

给document加

无需等待样式表、图像完全加载

document.addEventListener('DOMContentLoaded', function () {

const btn = document.querySelector('button')

btn.addEventListener('click', function () {

alert(11)

})

9.元素滚动事件

window.addEventListener('scroll', function () {}）

可读写： document.documentElement.scrollTop = 800

10.页面尺寸时间

// resize 浏览器窗口大小发生变化的时候触发的事件

window.addEventListener('resize', function () {

console.log(1)

})

获取元素宽度：console.log(div.clientWidth)

高度同理

11.offsetWidth offsetHeight 和offsetTop offsetLeft

day4

1-常见日期对象的方法

// 获得日期对象

const date = new Date()

// 使用里面的方法

console.log(date.getFullYear())

console.log(date.getMonth() + 1) // 月份要 + 1

console.log(date.getDate())

console.log(date.getDay()) // 星期几

2-获得时间戳的三种方式

// 1. getTime()

const date = new Date()

console.log(date.getTime())

// 2. +new Date()

获得当前的时间戳：

console.log(+new Date()) //+把字符型转换为数字型

获得指定时间的时间戳：

console.log(+new Date('2022-4-1 18:30:00'))

// 3. Date.now()

console.log(Date.now());

// 我要根据日期 Day() 0 ~ 6 返回的是星期一

const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

// const date = new Date()

console.log(arr[new Date().getDay()])

3-倒计时

4-DOM结点

克隆节点：深克隆（1） ul.appendChild(ul.children[0].cloneNode(true))

（ 2） const li1 = ul.children[0].cloneNode(true)

ul.appendChild(li1)

浅克隆： ul.appendChild(ul.children[0].cloneNode())

（不克隆里面的内容）

删除结点：

const ul = document.querySelector('ul')

// 删除节点父元素.removeChlid(子元素)

ul.removeChild(ul.children[0])

m端事件：

// 1. 触摸

div.addEventListener('touchstart', function () {

console.log('开始摸我了')

})

// 2. 离开

div.addEventListener('touchend', function () {

console.log('离开了')

})

// 3. 移动

div.addEventListener('touchmove', function () {

console.log('一直摸，移动')

})

swiper插件的用法

day5

1-BOM

2-延时函数

语法：setTimeout(回调函数，等待的毫秒数)

//清楚延时函数

let timer = setTimeout(回调函数，等待的毫秒数)

clearTimeout(timer)