建网站吧,wordpress 设置七牛,网站做留言板怎么清空源码,哪个网站有学做吃的变量声明的时候建议 const优先#xff0c;尽量使用const
原因#xff1a;
const语义化更好很多变量我们声明的时候就知道他不会被更改了#xff0c;那为什么不用const呢#xff1f;实际开发中也是#xff0c;比如react框架#xff0c;基本const如果你有纠结的时候…变量声明的时候建议 const优先尽量使用const
原因
const语义化更好很多变量我们声明的时候就知道他不会被更改了那为什么不用const呢实际开发中也是比如react框架基本const如果你有纠结的时候建议 有了变量先给const如果发现它后面是要被修改的再改为letconst声明的值不能更改而且const声明变量的时候需要里面进行初始化但是对于引用数据类型const声明的变量里面存的不是值不是值是地址数组和对象使用const来声明 以下的可不可以把let改为const 因为const并不表示定义的值是不可变的它表示的是变量本身不可被重新赋值。当你用const定义一个数组或对象时该数组或对象本身仍然是可变的你可以对其进行修改或添加新的属性。地址没有改变。就比如拿你自己来说你昨天穿了三件衣服今天穿了两件但是你还是你地址。
1、Web API基本认知
1.1 作用和分类
作用就是使用JS去操作html和浏览器
分类DOM文档对象模型、BOM浏览器对象模型 1.2 什么是DOM
DOMDocument Object Model——文档对象模型是用来呈现以及与任意HTML或XML文档交互的API
白话文DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用
开发网页内容特性和实现用户交互
1.3 DOM树
将HTML文档以树状结构直观的表现出来称为文档树或DOM树
描述网页内容关系的名词
作用文档树直观的体现了标签与标签之间的关系 1.4 DOM对象 DOM对象浏览器根据html标签生成的JS对象DOM对象 所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上 DOM的核心思想 把网页内容当做对象来处理 document对象 是DOM里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的 例document.write()网页所有内容都在document里面 2、获取DOM对象
2.1 根据CSS选择器来获取DOM元素重点 查找元素DOM元素就是利用JS选择页面中标签元素 2.1.1 选择匹配的第一个元素 语法document.querySelector(css选择器) 参数包含一个或多个有效的CSS选择器 字符串 返回值 CSS选择器匹配的第一个元素一个HTMLElement对象。 如果没有匹配到则返回null。 获取一个DOM元素可以直接操作修改。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 100px;height: 200px;}/style
/head
bodydiv classbox123/divdiv classboxabc/divp idnav导航栏/pulli测试1/lili测试2/lili测试3/li/ulscript// 1.获取匹配的第一个元素// const box document.querySelector(div)const box document.querySelector(.box)console.log(box) // 都是显示123不会显示abc因为只选第一个// 获取pconst nav document.querySelector(#nav)console.log(nav); // nav//nav.style.color red // 可以修改// 获取第一个小ulliconst li document.querySelector(ul li:first-child)console.log(li);/script
/body
/html
2.1.2 选择匹配的多个元素 语法document.querySelectorAll(css选择器) 参数包含一个或多个有效的CSS选择器 字符串 返回值CSS选择器匹配的NodeList 对象集合 获取多个DOM元素不可以修改只能通过遍历的方式一次给里面的元素做修改 // 根据2.1.1的选择所有的小li
document.querySelectorAll(ul li) 使用 document.querySelectorAll(css选择器) 得到的是一个伪数组 有长度有索引的数组但是没有pop()、push()等数组方法 想要等到里面的每个对象则需要遍历for)的方式获得。 2.1.3 练习 请控制台依次输出3个li的DOM对象 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul classnavli我的首页/lili产品介绍/lili联系方式/li/ulscript// 1.获取元素const lis document.querySelectorAll(.nav li)// console.log(lis);for(let i 0; i lis.length; i){console.log(lis[i]); // 每一个小li对象}/script
/body
/html 注意哪怕只有一个元素通过querySelectAll()获取过来的也是一个伪数组里面只有一个元素而已 2.2 其他获取DOM元素方法了解 script// 其他获取DOM元素方法了解// 根据id获取一个元素document.getElementById(nav)// 根据标签获取一类元素 获取页面 所有divdocument.getElementsByTagName(div)// 根据 类名获取元素 获取页面 所有类名为 w的document.getElementsByClassName(w)/script
3、操作元素内容 DOM对象都是根据标签生成的所以操作标签本质上就是操作DOM对象。 就是操作对象使用的点语法。 如果想要修改标签元素的里面的内容则可以使用如下几种方式 对象.innerText属性对象.innerHTML属性 3.1 对象.innerText属性 将文本内容添加/更新到任意标签位置显示纯文本不解析标签 bodydiv classbox我是文字的内容/divscript// const obj {// name:red// }// console.log(obj.name);// // 修改内容// obj.name blue// 1. 获取元素const box document.querySelector(.box)// 2. 修改文字内容 对象.innerText 属性console.log(box.innerText) // 获取文字内容// box.innerText 我是一个盒子 // 修改文字内容box.innerText strong我是一个盒子/strong // 不解析标签/script
/body
3.2 对象.innerHTML属性 将文本内容添加/更新到任意标签位置会解析标签多标签建议使用模板字符 bodydiv classbox我是文字的内容/divscript// 1. 获取元素const box document.querySelector(.box)// 2. innerHTML 解析标签console.log(box.innerHTML);// box.innerHTML 我要更换box.innerHTML strong我要更换/strong/script
3.3 练习 年会抽奖案例 需求从数组随机抽取一等奖、二等奖和三等奖显示到对应的标签里面 素材 html文件结构数组名单周杰伦,刘德华,周星驰,黎明,张学友 分析 声明数组const personArr [周杰伦,刘德华,周星驰,黎明,张学友]一等奖随机生成一个数字0-数组长度找到对应数组的名字通过innerText或者innerHTML将名字写入span元素内部二等奖依次类推 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}/style
/head
bodydiv classwrapperstrong年会抽奖/strongh1一等奖span idone???/span/h1h3一等奖span idtwo???/span/h3h5一等奖span idthree???/span/h5/divscript// 1.声明数组const personArr [周杰伦,刘德华,周星驰,黎明,张学友]// 2. 先做一等奖// 2.1 随机数 数组的下标const random Math.floor(Math.random()*personArr.length)// console.log(personArr[random]);// 2.2 获取one 元素const one document.querySelector(#one)// 2.3 把名字给oneone.innerHTML personArr[random]// 2.4 删除数组这个名字personArr.splice(random,1)// console.log(personArr);// 3. 二等奖// 3.1 随机数 数组的下标const random2 Math.floor(Math.random()*personArr.length)// console.log(personArr[random2]);// 3.2 获取two元素const two document.querySelector(#two)// 3.3 把名字给onetwo.innerHTML personArr[random2]// 3.4 删除数组这个名字personArr.splice(random2,1)// console.log(personArr);// 4. 三等奖// 4.1 随机数 数组的下标const random3 Math.floor(Math.random()*personArr.length)// console.log(personArr[random3]);// 4.2 获取three元素const three document.querySelector(#three)// 4.3 把名字给onethree.innerHTML personArr[random3]// 4.4 删除数组这个名字personArr.splice(random3,1)// console.log(personArr);/script
/body
/html
4、操作元素属性 复习splice()方法用于添加或删除数组中的元素 注意这种方法会改变原始数组。 4.1 操作元素常用属性 可以通过JS设置/修改标签元素属性比如通过src更换图片 最常见的属性比如href、title、src等 语法对象.属性 值 img src ./images/1.webp alt script // 1. 获取元素const pic document.querySelector(img)// 2. 操作元素pic.src ./images/bo2.jpgpic.title 你好啊/script
4.1.1 练习 页面刷新图片随机更换 需求当我们刷新页面页面中的图片随机显示不同的图片 分析 ①随机显示则需要用到随机函数 ②更换图片需要用到的图片src属性进行修改 ③核心思路 获取图片元素随机得到图片序号图片.src图片随机路径 bodyimg src./images/1.webp altscript// 取得N—M的随机整数function getRandom(N,M){return Math.floor(Math.random()*(M - N 1)) N }// 1. 获取图片对象const img document.querySelector(img)// 2. 随机得到序号const random getRandom(1,6)// 3. 更换路径img.src ./images/${random}.webp/script
/body
4.2 操作元素样式属性 通过JS设置/修改标签元素的样式属性 比如通过轮播图小圆点自动更换颜色样式点击按钮可以滚动图片这是移动的图片的位置left等等 4.2.1 通过style属性操作CSS 语法对象.style.样式属性 值 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 300px;height: 500px;background-color: pink;}/style
/head
bodydiv classbox/divscript// 1. 获取元素const box document.querySelector(.box)// 2. 修改样式属性 对象.style.样式属性 值 要跟单位box.style.width 300px// 多组单词的采取 小驼峰命名法box.style.backgroundColor hotpinkbox.style.border 2px solid bluebox.style.borderTop 2px solid red/script
/body
/html
注意
修改样式通过style属性引出如果属性有-连接符需要转换为小驼峰命名法赋值的时候需要的时候不要忘记加CSS单位 练习页面刷新页面随机更换背景图片 需求当我们刷新页面页面中的背景图片随机显示不同的图片 分析 ①随机函数 ②css页面背景图片background-image ③标签选择body因为body是唯一的标签可以直接写document.body.style !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {background: url(./images/desktop_1.jpg) no-repeat top center /cover;}/style
/head
bodyscript// console.log(document.body);// 获取N-M的随机整数function getRandom(N,M){return Math.floor(Math.random()*(M - N 1)) N } // 随机数const random getRandom(1,10)document.body.style.backgroundImage url(./images/desktop_${random}.jpg)/script
/body
/html 4.2.2 操作类名(className)操作css 如果修改的样式比较多直接通过style属性修改比较繁琐可以通过借助于css类名的形式。 语法 // active 是一个css类名
元素.className active 注意 由于class是关键字所以使用className去代替className是使用新值换旧值如果需要添加一个类需要保留之前的类名 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: red;}.nav {background-color: blue;}.box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border:1px solid black;}/style
/head
bodydiv classnav123/divscript// 1.获取元素const div document.querySelector(div)// 2.添加类名 class是这个关键字 我们用classNamediv.className nav box/script
/body
/html
4.2.3 通过classList操作类控制css 解决className容易覆盖以前的类名可以通过classList方式追加和删除类名 语法 // 追加一个类
元素.classList.add(类名)
// 删除一个类
元素.classList.remove(类名)
// 切换一个类
元素.classList.toggle(类名) !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;color: royalblue;}.active {color: red;background-color: pink;}/style
/head
bodydiv classbox文字/divscript// 通过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)/script
/body
/html 使用className和classList的区别 修改大量样式的更方便修改不多样式的时候方便classList是追加和删除不影响以前类名 4.3 操作表单元素属性 表单有很多情况也需要修改属性比如点击眼睛可以看到密码本质是把表单类型转换为文本框正常的有属性有取值的跟其他的标签属性没有任何区别 获取DOM对象.属性名 设置DOM对象.属性名新值 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyinput typetext value请输入button disabled按钮/buttoninput typecheckbox name id classagreescript// 1. 获取元素let input document.querySelector(input)// 2. 取值或者设置值 得到input里面的值可以用 value// console.log(input.value)input.value 小米手机input.type password// 2. 启用按钮let btn document.querySelector(button)// disabled 不可用 false 这样可以让按钮启用btn.disabled false// 3. 勾选复选框let checkbox document.querySelector(.agree)checkbox.checked false/script
/body/html
4.4 自定义属性
标准属性标签自带的属性 比如class id title等可以直接使用点语法操作比如disabled、checked、selected 自定义属性 在html5中推出了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodydiv data-id1 自定义属性 /divscript// 1. 获取元素let div document.querySelector(div)// 2. 获取自定义属性值console.log(div.dataset.id)/script
/body/html
