web笔记

最新推荐文章于 2024-11-02 15:22:06 发布
最新推荐文章于 2024-11-02 15:22:06 发布
阅读量49 收藏
点赞数
文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74256660/article/details/132005976
版权

第七天

【1】修改元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./1 2023-07-25 160959.png" alt="" title="国际大牌">
    <script src="./1-修改元素属性.js"></script>
</body>
</html>
// 1、获取元素对象
let img = document.querySelector('img')
console.log(img)

// 2、修改元素属性   元素.属性名 = 属性值
img.title = "我已更改"

img.src = "./4 2023-07-25 161142.png"

【2】修改元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box2 {
            width: 200px;
            height: 200px;
            border: 2px solid black;
        }
        .pink {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script src="./2-修改元素样式.js"></script>
</body>
</html>
// 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('box2')

【3】修改设置表单元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>我同意该协议</button>
    <form action="#">
        <input type="text" name="" id="">
    </form>
    <script src="./3-修改设置表单元素.js"></script>
</body>
</html>
// 1、获取元素对象
const btn = document.querySelector('button')
// 2、设置按钮可点击   添加true/false
btn.disabled = false

ipt.type = "passeord"

【4】事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: none;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <div class="box">我是一个盒子</div>
    <script src="./4-事件监听.js"></script>
</body>
</html>
// 事件监听：程序检测某事件有没有发生，一旦事件发生，立刻调用一个函数作为响应
// 
const start = document.querySelector('button:first-child')
const end = document.querySelector('button:nth-child(2)')
const box = document.querySelector('.box')
console.log(start, end ,box)
// 语法：元素(事件源：谁触发).addEventListener('事件(什么事件)',执行的函数(要做什么事情，事件触发一次，执行一次)，冒泡或捕获（true/false）)
start.addEventListener('click', function(){
    box.style.display = 'block'
})

function fn() {
    box.style.display = 'none'
}
end.addEventListener('click', fn)

【5】加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: none;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
    <script>
        // 解决方法
        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 ,box)
        // 语法：元素(事件源：谁触发).addEventListener('事件(什么事件)',执行的函数(要做什么事情，事件触发一次，执行一次)，冒泡或捕获（true/false）)
        start.addEventListener('click', function(){
            box.style.display = 'block'
        })

        function fn() {
            box.style.display = 'none'
        }
        end.addEventListener('click', fn)
        })
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <div class="box">我是一个盒子</div>
</body>
</html>

【6】常见的事件类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 4000px;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    <script src="./6-常见的事件类型.js"></script>
</body>
</html>
// 点击事件      click
// 鼠标经过       mouseenter
// 鼠标离开       mouseleave
// 获取焦点      focus
// 失去焦点      blur
// 键盘按下/弹出    keydown\keyup
// 滚动事件    scroll

const ipt = document.querySelector('input')
ipt.addEventListener('focus',function() {
    ipt.style.backgroundColor = 'pink'
})
ipt.addEventListener('blur', function() {
    ipt.style.backgroundColor = 'green'
})
window.addEventListener('scroll', function() {
    console.log(document.documentElement.scrollTop)
})


// resize事件    ：窗口尺寸发生变化时触发的事件

【7】事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./7-事件对象.js"></script>
</body>
</html>
window.addEventListener('keydown', function(e) {
    // 事件对象：记录事件触发的相关信息的
    // console.log('111')
    // console.log(e)
    if(e.key === 'Enter'){
        console.log('111')
    }
    else {
        console.log('出错')
    }
})

【8】事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: none;
        width: 300px;
        height: 300px;
        background-color: aqua;
    }
</style>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <div class="box">我是一个盒子</div>
    <script src="./8-事件绑定.js"></script>
</body>
</html>
// 1、获取元素
const start = document.querySelector('button:first-child')
const end = document.querySelector('button:nth-child(2)')
const box = document.querySelector('.box')

// 2、事件绑定
start.onclick = function () {
    box.style.display = 'block'
}

【9】捕获冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandFather {
            width: 1200px;
            height: 1200px;
            background-color: aqua;
        }
        .father {
            width: 800px;
            height: 800px;
            background-color: aquamarine;
        }
        .son {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="grandFather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <script src="./9-捕获冒泡.js"></script>
</body>
</html>
// 1、获取元素
const gf = document.querySelector('.grandFather')
const f = document.querySelector('.father')
const son = document.querySelector('.son')
// 2、添加事件   第三个参数默认是false即为冒泡   
//   true： 即为捕获  （爷爷————》爸爸————》儿子）
gf.addEventListener('click',(e) => {
    alert('爷爷')
    // 阻止默认冒泡/捕获的行为
    e.stopPropagation()
}, true)
f.addEventListener('click',() => {
    alert('爸爸')
    e.stopPropagation()
}, true)
son.addEventListener('click',() => {
    alert('儿子')
    e.stopPropagation()
}, true)

【10】查找节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">
        <div class="son">son1</div>
        <div class="son">son2</div>
        <div class="son">son3</div>
        <div class="son">son4</div>
    </div>
    <script src="./10-查找节点.js"></script>
</body>
</html>
const father = document.querySelector('.father')
const son = document.querySelector('.son')
const son2 = document.querySelector('.two')
console.log(father)
// 查找子节点    父元素.children[]
console.log(father.children[0])
// father.childNodes    查找节点、文本、空格……   了解即可

// 查找父节点
console.log(son.parentNode)

// 查找兄弟节点   了解即可
son2.nextElementSibling
son2.previousElementSibling

【11】克隆节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="./11-克隆节点.js"></script>
</body>
</html>
const ul = document.querySelector('ul')
console.log(ul.cloneNode(true))
// true代表子节点一起克隆

【12】创建节点和追加节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <button>点击</button>
    <script src="./12-创建节点和追加节点.js"></script>
</body>
</html>
// 1、获取元素
const ul = document.querySelector('ul')
// 1:创建li
let li = document.createElement('li')
// 2:给创建的节点添加内容
li.innerHTML = `<h1>我是li</h1>`
// 3:插入
// 父元素
// 追加到父元素的最后一个子元素
ul.append(li) 

// 插入到指定位置的前面
ul.insertBefore(li, ul.children[0])


const btn = document.querySelector('button')
btn.addEventListener('click', function() {
    ul.insertBefore(li, ul.children[0])
})

【13】删除节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="three">3</li>
        <li>4</li>
    </ul>
    <script src="./13-删除节点.js"></script>
</body>
</html>
const ul = document.querySelector('ul')
const li3 = document.querySelector('.three')
// 删除节点一定是通过父元素来
ul.removeChild(li3)

【14】定时器

// 1、setTimeout：某个函数或者某段代码(字符串格式)，在多少毫秒之后执行，返回一个整数，用来标识定时器
const timer = setTimeout(function() {
    console.log('111')
}, 2000);
// 2000:2秒
// console.log(timer)
const timer2 = setTimeout("alerrt('nihao')", 2000)
console.log(`timer2=${timer2}`)

const timer3 = setTimeout(function(a, b) {
    console.log(a + b)
},3000, 2, 3)
// 3s之后，作为参数传入执行的函数


// 
let x = 1
let obj = {
    x: 2,
    y: function () {
        console.log(`方法打印出来的是：{$this.x}`)
    }
}
// console.log(obj.y())

// setTimeout(obj.y, 2000)
// 第一个参数为对象的方法时，this指向windows，而不是obj本身
// 解决办法：
// 1、
setTimeout(function() { obj.y()}, 2000)
// 2、改变this指向
setTimeout(obj.y.bind(obj), 2000)



// 2、setInterval：函数或者一段代码，每隔一段时间，执行一次
function fn() {
    console.log(111)
}
// setInterval (fn, 1000)
const timer4 = setInterval(fn, 1000)
console.log(timer4)

// 清除定时器
clearInterval(timer4)

【15】事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script src="./15-事件委托.js"></script>
</body>
</html>
const ul = document.querySelector('ul')
ul.addEventListener('click', function(e) {
    e.target.style.backgroundColor = 'pink'
})

【16】箭头函数

// 简化代码，解决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:'喜羊羊' })

【17】this指向

console.log(this)
// windows
function fn() {
    console.log(this)
}
window.fn()
// 函数谁调用，指向谁
const btn =document.querySelector('button')
btn.addEventListener('click', function() {
    this.style.backgroundColor = 'pink'
})
// 事件监听里边的this指向事件源

let obj = {
    x: 4,
    y: function () {
        console.log(this)
    }
}
obj.y()
// 对象方法中的this指向对象本身

setInterval(function () {
    console.log(this)
}, 1000)
// this指向window

// 箭头函数中的this，箭头函数中没有this的作用域，不会创建自己的this，只会继承上一层的this
btn.addEventListener('click', () => {
    console.log(this)
    this.style.backgroundColor = 'pink'
})


let obj1 = {
    x: 4,
    y: () => {
        console.log(this)
    }
}
obj1.y()


// 构造函数中的this，指向构造函数实例化的对象

【18】location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>刷新</button>
    <script src="./19-location.js"></script>
</body>
</html>
location.href = "http://www.baidu.com"
document.querySelector('button').addEventListener('click', function( ){
    location.reload(true)
    // 强制刷新    ctrl+f5
})

【19】navigator

console.log(navigator.userAgent)
        // 伪装成浏览器

【20】history

back():可以后退功能

forword()：前进功能

go()：1：前进一个页面        -1：后退一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>后退</button>
    <button>前进</button>
    <script src="./21-history.js"></script>
</body>
</html>
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)
})

【21】localStorage

localStorage.setItem('uname', '喜羊羊')
        
console.log(localStorage.getItem('uname'))

 

【22】剩余参数

// 剩余参数
function getSum(...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')
})()

【23】展开运算符

let arr=[1, 2, 3, 4, 5]
// 展开运算符（在外边）： ...arr       如果在函数里当形参则为剩余参数
console.log(...arr)

【24】js执行机制

console.log('111')
setTimeout(function () {
    console.log('222')
}, 0)

// 同步任务：一件事情未完成不去执行下一件
// 异步任务：一件事情进行时同时做另一件事情
// js是单线程。同一时刻只能执行一个任务
// js执行机制：同步任务放入执行栈执行，异步任务————》任务队列
    // 等待同步任务执行完毕之后，会去任务队列，查看是否由准备好的异步任务，
    // 有，则将其放入执行栈中

 【25】bom：浏览器对象模型，整个浏览器页面就是bom

bom包含：dom、navigator、location、history、screen

所有通过var定义的全局变量、函数都会变成window的属性和方法

【26】块作用域

js中，被{}包含的，都是代码块，其中声明的变量可能无法被访问

m0_74256660
关注
python-django框架web笔记网页编程笔记
weixin_45848346的博客
04-10 1544
#主要作为自己学习备忘录使用 第一部分：创建python的虚拟环境，安装django框架 #1.首先在python中创建一个隔离虚拟环境，用于存放编写的代码以及程序依赖的python包资源。 1.1 选定一个目录，并创建文件夹django_test：D:\~\Pycharm\django_test 1.2在pycharm中创建虚拟环境-venv 1.3 windos10 中激活venv环境：终端里面输入-- venv\Scripts\activate 1.4 在-venv环境中，安装
WEB 笔记笔记
12-24
web 开发笔记 超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。它是超级媒体的简称。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画[2]。 Internet...
Web笔记
zzidea的专栏
12-29 612
现在开始用Web来做笔记了，以后学习的技术，都采用Web来做笔记了，哈哈。有批评才会有进步啊。
移动web笔记
yhl_nsd的博客
02-24 1267
文章目录一、移动web基础1.移动端开发现状2.移动端与pc端 web开发的区别1）浏览器不同2）屏幕尺寸3）布局方式3.视口viewport（重要）4. 屏幕与分辨率（了解）1）屏幕尺寸2）屏幕分辨率5.物理像素 和 css像素6.2倍图与3倍图（重要）7.移动端调试问题二、less1.Less简介2.less的编译1）引入less.js文件（了解）2）使用考拉3）VScode 安装 Easy LESS 插件3.Less语法1）less初体验2）注释3）变量4）mixin混入5）混入函数6）嵌套7）导入8
Web笔记6
dyr_080508的博客
03-12 1529
Web笔记6
Web笔记-移动前端开发笔记
IT1995的博客
02-16 4923
因为最近有个移动端的小项目，在此稍微学习下移动端开发基础概念。免得用框架的时候莫名其妙。 px(CSS pixels)：逻辑像素，浏览器使用的抽象单位； dp,pt(device independent pixels)：设备无关像素； dpr(devicePixelRatio)：设备像素放缩比； 计算公式：1px = (dpr)^2 * dp 下面先解释下dp，为设备像...
Web入门笔记
yfdddong的博客
10-29 833
超文本传输协议。
Web学习笔记（1）
qq_52227393的博客
01-02 2882
目录 Web前端开发概述 Web前端开发相关的概念 Web前端开发相关的技术 HTML5基础 HTML5-文档头部 HTML5-文本控制类标签 HTML5-图像的运用 表格标签-表格基本结构 HTML5-超链接的应用 表格标签—表格高级样式的设置 Web前端开发概述 Web前端开发相关的概念 1.Web系统的组成 Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。 2.Web开发 Web开发就是设计实现Web系.
Web笔记-session及cookie
IT1995的博客
02-13 4748
此博文笔记并不全（对于像本人这样开发经验不足的已经够了），只是记录了本人目前对session和cookie的理解，以及在开发时，应该注意些什么。 首先看下两个概念： session：对象存储特定用户会话所需的属性及配置信息。 session是服务器如何产生的? 当访问服务器否个网页的时候，会在服务器端的内存里开辟一块内存，这块内存就叫做session，而这个内存是跟浏览器关联在...
Web前端笔记
weixin_51582215的博客
04-29 633
Web前端笔记
java笔记 Java-Web笔记 J2EE三大框架笔记
10-19
Java-Web笔记和J2EE三大框架笔记是学习Java Web开发的关键资料，这些笔记涵盖了从基础到高级的诸多知识点，旨在帮助开发者掌握Java在Web环境中的应用。 首先，Java笔记主要涉及Java语言的基础语法、面向对象编程...
Java Web 笔记总结
12-23
Java Web 笔记总结 Java Web 笔记总结主要讲解了 Servlet 的概念、生命周期、创建方式、映射细节、线程安全、获取配置信息等知识点。 Servlet 概念 Servlet 是运行在 Web 服务器中的小型 Java 程序（即：服务器端...
java web 笔记整理
12-22
这份"java web 笔记整理"涵盖了该领域的关键概念和技术，包括Servlet、JSP、MVC模式、JNDI、JTA以及EJB等核心内容。以下是根据笔记内容整理出的知识点详解： 1. **Servlet**：Servlet是Java平台上的服务器端组件，...
web 笔记，包含JavaScript、CSS、HTML 等；各种前端开发的小技巧及总结.zip
01-02
web 笔记，记录自己学习前端的历程，记录自己学习的代码，包含JavaScript、CSS、HTML 等；各种前端开发的小技巧及总结. web 笔记，记录自己学习前端的历程，记录自己...web 笔记，记录自己学习前端的历程，记录自己学
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 746
学习UART串口的简明学习笔记
[自用，更新自day5]瑞吉外卖代码及笔记
lapiii的博客
11-01 807
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
点云学习笔记3——读取点云文件、进行统计滤波/直通滤波后可视化
qq_64095888的博客
10-29 201
【代码】点云学习笔记3——读取点云文件、进行统计滤波后可视化。
嵌入式通信协议：MODBUS简明学习笔记
最新发布
weixin_73867577的博客
11-02 207
学习Modbus的简明学习笔记
pythonweb笔记添加流程图
05-13
添加Python Web笔记的流程如下： 1. 打开你的笔记软件或者文档。 2. 创建一个新的笔记或者打开一个现有的笔记，用于记录你的Python Web笔记。 3. 在笔记中，记录你所学习的Python Web知识，包括相关的代码示例、说明...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值