视频库网站建设,租服务器空间,湖南常德房价,网络营销环境分析一、获取DOM对象 querySelector 满足条件的第一个元素 querySelectorAll 满足条件的元素集合 返回伪数组 document.getElementById 专门获取元素类型节点#xff0c;根据标签的 id 属性查找
二、操作元素内容 通过修改 DOM 的文本内容#xff0c;动态改变网页的内容。 inn…一、获取DOM对象 querySelector 满足条件的第一个元素 querySelectorAll 满足条件的元素集合 返回伪数组 document.getElementById 专门获取元素类型节点根据标签的 id 属性查找
二、操作元素内容 通过修改 DOM 的文本内容动态改变网页的内容。 innerText 将文本内容添加/更新到任意标签位置文本中包含的标签不会被解析。 innerHTML 将文本内容添加/更新到任意标签位置文本中包含的标签会被解析。
总结如果文本内容中包含 html 标签时推荐使用 innerHTML否则建议使用 innerText 属性
三、常用函数
1Math.floor()
英文含义为地板所以是向下取整方便记忆叫它地板函数。会取不大于自变量的最大整数这样自变量是3.1或3.9是没有区别的返回都是3自变量是-2.1或-2.9也是没有区别的返回都是-3例如:
Math.floor(11.46)Math.floor(11.68)Math.floor(11.5)11
Math.floor(-11.46)Math.floor(-11.68)Math.floor(-11.5)-12 2Math.ceil()
英文含义为天花板所以是向上取整它就是天花板函数。会取不小于自变量的最大整数这样自变量是3.1或3.9返回都是4自变量是-2.1或-2.9返回的都是-2例如:
Math.ceil(11.46)Math.ceil(11.68)Math.ceil(11.5)12
Math.ceil(-11.46)Math.ceil(-11.68)Math.ceil(-11.5)-11
3Math.round()
英文含义为周围环绕这个就是常用的四舍五入函数。因为它会返回离自变量最近的整数这个返回的整数可能大于也可能小于原来的数但是一定是离它最近的那个整数比如12.5返回1312.4返回12。例如
小数点后第一位5
正数Math.round(11.46)11
负数Math.round(-11.46)-11小数点后第一位5
正数Math.round(11.68)12
负数Math.round(-11.68)-12小数点后第一位5
正数Math.round(11.5)12
负数Math.round(-11.5)-11
总结以上逻辑即俗称的“四舍五入” 4Math.random()
关于random(),若要取随机整数前提得知道数组API中的Math.random()方法能取0–1的随机数它的范围是[0,1)也就是取包括0但不包括1的随机数。其次数组API中有一个Math.floor()方法代表向下取整Math.floor(X)的代表的是取≤ X 且最接近X的整数。那么我们可以通过Math.random()先取得随机数再通过乘法计算得到大致范围最后通过Math.floor()进行取整加工就可以达到目的了。int num(int)(Math.random()*n); //返回大于等于0小于n之间的随机数
//返回指定范围的随机数(m-n之间)的公式:
Math.random()*(n-m)m或者 Math.random()*(n1-m)m 四、常用属性修改
1img的属性
body
img srcimg/1.png alt
script
//获取图片元素
const imgdocument.querySelector(img)
//修改图片对象的属性
img.srcimg/2.png
img.title你好
/script
/body
2控制样式属性style
通过元素节点获得的 style 属性本身的数据类型也是对象如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。
bodydiv classbox随便一些文本内容/divscript// 获取 DOM 节点const box document.querySelector(.intro)box.style.color redbox.style.width 300px// css 属性的 - 连接符与 JavaScript 的 减运算符// 冲突所以要改成驼峰法box.style.backgroundColor pink/script
/body
任何标签都有 style 属性通过 style 属性可以动态更改网页标签的样式如要遇到 css 属性中包含字符 - 时要将 - 去掉并将其后面的字母改成大写如 background-color 要写成 box.style.backgroundColor
3操作类名(className) 操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式。 style.nav{background: pink;color: hotpink;}/style
/head
bodydiv classbox随便一些文本内容/divscript// 获取 DOM 节点const box document.querySelector(div)box.className nav/script
/body
注意
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
4通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名
追加一个类元素.classList.add(类名)删除一个类元素.classList.remove(类名)切换一个类元素.classList.toggle(类名)stylediv {width: 200px;height: 200px;background-color: pink;}.active {width: 300px;height: 300px;background-color: hotpink;margin-left: 100px;}/style
/headbodydiv classone/divscript// 1.获取元素// let box document.querySelector(css选择器)let box document.querySelector(div)// add是个方法 添加 追加// box.classList.add(active)// remove() 移除 类// box.classList.remove(one)// 切换类box.classList.toggle(one)/script
/body 5自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如 disabled、checked、selected
自定义属性在html5中推出来了专门的data-自定义属性在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
bodydiv data-id1 自定义属性 /divscript// 1. 获取元素let div document.querySelector(div)// 2. 获取自定义属性值console.log(div.dataset.id)/script
/body
五、间歇函数
setInterval 是 JavaScript 中内置的函数它的作用是间隔固定的时间自动重复执行另一个函数也叫定时器函数 // 1. 定义一个普通函数function repeat() {console.log(不知疲倦的执行下去....)}// 2. 使用 setInterval 调用 repeat 函数// 间隔 1000 毫秒重复调用 repeatsetInterval(repeat, 1000)
倒计时5秒案例 div倒计时/divbutton剩下5秒/buttonscriptconst btn document.querySelector(button);let i 5;let n setInterval(function () {i--;btn.innerText 剩下${i}秒;if (i 0) {clearInterval(n);}}, 1000);/script
六、轮播图基础版
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle.slider {width: 500px;height: 400px;margin: 0 auto;}.slider .slider-wrapper {width: 500px;height: 300px;}.slider img {width: 500px;height: 300px;margin: 0;padding: 0;}.slider .slider-footer p {margin: 0;padding-top: 10px;width: 300px;height: 30px;line-height: 30px;padding-left: 30px;}.slider .slider-footer {top: 0;height: 100px;background-color: rgb(83, 108, 108);position: relative;}.slider .slider-footer .slider-indicator {display: flex;}.slider .slider-footer li {list-style: none;width: 12px;height: 12px;margin-left: 15px;border-radius: 50%;background-color: rgb(87, 68, 68);}.slider .slider-footer li.active {background-color: rgb(236, 225, 225);}.slider .slider-footer .toggle {right: 20px;top: 10px;position: absolute;}/style/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{url: ./images/slider01.jpg,title: 对人类来说会不会太超前了,color: rgb(100, 67, 68),},{url: ./images/slider02.jpg,title: 开启剑与雪的黑暗传说,color: rgb(43, 35, 26),},{url: ./images/slider03.jpg,title: 真正的jo厨出现了,color: rgb(36, 31, 33),},{url: ./images/slider04.jpg,title: 李玉刚让世界通过B站看到东方大国文化,color: rgb(139, 98, 66),},{url: ./images/slider05.jpg,title: 快来分享你的寒假日常吧~,color: rgb(67, 90, 92),},{url: ./images/slider06.jpg,title: 哔哩哔哩小年YEAH,color: rgb(166, 131, 143),},{url: ./images/slider07.jpg,title: 一站式解决你的电脑配置问题,color: rgb(53, 29, 25),},{url: ./images/slider08.jpg,title: 谁不想和小猫咪贴贴呢,color: rgb(99, 72, 114),},];const img document.querySelector(img);const p document.querySelector(p);let i 0;setInterval(function () {i;if (i sliderData.length) {i 0;}// 把字写到 p里面p.innerHTML sliderData[i].title;//更换图片img.src sliderData[i].url;// 小圆点// 先删除以前的activedocument.querySelector(.slider-indicator .active).classList.remove(active);// 只让当前li添加activeconst li document.querySelector(.slider-indicator li:nth-child(${i 1});li.classList.add(active);}, 1000);/script/body
/html
