时间对象
new Date()：会将时间转化为字符串输出
-
不传值就是直接显示当前时间
-
传一个参数会在1970.1.1.0:0:0这个基础上添加并且参数单位默认为毫秒
-
传多个参数就是设定固定时间，不过月份会从0开始数。
var 变量=new Date(2023,,0,9,22,48,10) -
传字符串也是设定固定时间
var 变量=new Date("2023-1-9 22:49:10")
常用方法
-
getFullYear:得到年份
时间对象变量名.getFullYear() -
getFullMonth:得到月份(月份是从0开始算，共11个月)
-
getDate:得到日
-
getDay:得到星期几(是从0开始算，周日开始为0)
-
getHours、getMinutes、getSeconds、getmilliseconds
-
getTime：时间戳，当前时间距离1970.1.1 0:0:0的时间距离，单位是毫秒
-
setFullYear:在变量名得到的时间的基础上设置年份
时间对象变量名.setFullYear(想要的年份) -
setFullMonth、setDate、setDay、setHours、setMinutes、setSeconds、setTime
定时器
定时器是异步的，即等所有同步代码实行后才会开始计时并实行
-
延时定时器setTimeout
setTimeout(function(){ 执行代码 },倒计时间毫秒) -
间隔定时器setInterval
setInterval(function(){ 执行代码 },间隔时间毫秒) -
清除定时器
clearTimeout(定时器变量名)/clearInterval(定时器变量名)/ -
添加按钮停止定时器案例
<button id="btn1">停止延时定时</button> <button id="btn2">停止间隔定时</button> var time1=setTimeout(function(){ console.log("我是延时定时器") },5000) var time2=setInterval(function(){ console.log(new Date()) },3000) <script> //设置两个定时器 console.log(btn1,btn2) //给两个按钮连接到js的控制台 btn1.onclick=function(){ clearTimeout(time1) } btn2.onclick=function(){ clearInterval(time2) } //给两个按钮添加行为：理解为给按钮添加onclick属性，属性值为一个函数 </script> -
倒计时案例：
<div id="box"></div> <script> var targetDate=new Date("2023/2/13") //设置目标时间 function diffTime(current,target){ var sub=Math.ceil((target-current)/1000) //两个时间对象相减会自动转化为时间戳相减，并返回时间戳 var obj={ day:parseInt(sub/(60*60*24)), hours:parseInt(sub%(60*60*24)/(60*60)), minutes:parseInt(sub%(60*60)/60), seconds:parseInt(sub%60) } //用一个对象把倒计时装起来 return obj } //设置一个计算倒计时的函数 setInterval(function(){ var currentDate=new Date() //设置当前时间，用间隔计时器更新当前时间，如果放在代码开头那么运行那一刻就固定住了。 var res=diffTime(currentDate,targetDate) //引用计算倒计时的函数 box.innerHTML=`距离开学还有-${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒` //innerHTML属性可以让新的内容覆盖之前的内容 },1000) //设置一个更新倒计时的函数 </script>
BOM
浏览器对象模型，核心对象是window，就是操作浏览器的一些能力
以下方法全属于window对象，但可以省略window.
获取浏览器窗口尺寸
console.log(innerHeight,innerWidth)
包括滚动条的尺寸
浏览器的弹出层
注：但以下三种方法一般不使用，因为js是单线程的，当弹出框出来后，后面的代码不再执行，有阻塞的影响
- alert警示框
- confirm询问框：有确定与取消两个选择，按确定返回true值，取消 返回false值
- prompt输入框
浏览器的地址信息location
location的属性有
- href:网页链接
- reload:刷新
浏览器的历史记录history
history必须是在有历史记录的情况下使用，一个没有跳转过的页面没有历史记录，他不知道要返回或者前进到哪里 history的属性有
- back:在本页面中返回上一页面
- forward:在本页面中去到下页页面
- go(值)：值可正可负，正代表前进，负代表后退
本地存储
用户输入的信息可以存储
-
永久存储localStorage
localStorage属性值有
- setItem(“key值”,“value值”):存
只能存字符串，要存其他的要转化为字符串再存，取的时候要转回来。
-
getItem(“key值”):取
-
removeItem(“key值”):单删
-
clear():全删
-
会话存储sessionStorage:关闭页面就丢失
属性值与功能和localStorage一样
-
案例：记住用户名
<div> 用户名： <input type="text" id="username"> 密码： <input type="password" id="password"> </div> <div> <button id="login">登录</button> </div> <script> login.onclick=function(){ localStorage.setItem("username",username.value) localStorage.setItem("password",password.value) } //存用户名，密码 var uservalue=localStorage.getItem("username") var passvalue=localStorage.getItem("password") //从本地读取用户名，密码 username.value=uservalue password.value=passvalue //将用户名，密码赋值 </script>
浏览器的常见事件
-
页面所有资源加载完毕后才会实行执行语句
window.onload=function(){执行语句} -
页面改变尺寸后才会实行执行语句
window.onresize=function(){执行语句} -
页面滚动滚动条才会实行执行语句
window.onscroll=function(){执行语句} -
滚动到指定位置
window.scrollTo(纵向滚动距离，横向滚动距离) -
在新页面中打开链接
window.open("链接") -
关闭本页面
window.close() -
滚动距离
window.onscroll=function(){ console.log(document.documentElement.scrollTop ||document.body.scrollTop)//以防有些浏览器不支持 HTML5就可以用到后面的式 子实现 //纵向滚动距离 console.log(document.documentElement.scrollLeft ||document.body.scrollLeft) //横向滚动距离 }
DOM
文档对象模型，核心对象是document，就是操作HTML中标签的一些能力
获取元素的方式
-
为元素设置id,但id具有唯一性
-
非常规html,head,body
document.documentElementdocument.headdocument.body
-
常规
-
document.getElementsById("id名") -
document.getElementsByClassName("class名")获取的是一个伪数组，只有部分数组属性
- 可以利用length属性进行元素的遍历
- 可以通过
class名[下标]找到对应的子元素 - 可以利用
Array.from(伪数组名)将其转化为真数组
-
document.getElementsByTagName("标签名")同上
-
document.getElementsByName("name名")一般给input等标签设name，获取的也是一个维数组，具有唯一性
-
给name标签赋值案例：注意要给标签加0下标
var item=document.getElementsByName("username") item[0].value="666"
-
-
document.querySelector("")只获取遇到的第一个，引号内匹配html标签的方式和css语法一致
-
document.querySelectorAll("")获取所有，引号内匹配html标签的方式和css语法一致
-
操作元素属性
- HTML中的属性分为原生属性和自定义属性
-
操作原生属性
<input type="checkbox" checked id="rember"/> <script> rember.checked=false //复选框的取消勾选，如果勾选返回值会是 true photo.src="图片链接" </script> -
操作自定义属性
标签名.setAttribute("属性名","属性值")设置与修改标签名.getAttribute("属性名")获取标签名.removeAttribute("属性名")删除 -
操作自定义属性h5约定date：为了分别自定义属性和原生属性
标签名.dateset.属性名="属性值"设置与修改标签名.dateset获取delete 标签名.dateset.属性名删除
-
案例：密码可视
<input type="password" id="password"> <button id="eyebtn">eye</button> <script> var passInput=document.getElementById("password") var eyeBtn=document.querySelector("#eyebtn") eyeBtn.onclick=function(){ if(passInput.type==="password"){ passInput.type="text" } else{ passInput.type="password" } } </script> -
案例：购物车全选
分析：点一次全选，全部商品被选中
再点一次全选，全部商品取消选中
单点商品会被选中
当吧所有商品都选中的时候，全选框被点亮
<input type="checkbox" id="all">全选/取消全选 <hr> <ul class="shop"> <li> 商品1 <input type="checkbox"> </li> <li> 商品2 <input type="checkbox"> </li> <li> 商品3 <input type="checkbox"> </li> <li> 商品4 <input type="checkbox"> </li> <li> 商品5 <input type="checkbox"> </li> </ul> <script> var oAll=document.querySelector("#all") //得到全选框的值判断是否被选上 var oitems=document.querySelectorAll(".shop input") //得到商品复选框的值判断是否被选上 all.onclick=function(){ for(var i=0;i<oitems.length;i++){ oitems[i].checked=all.checked } } //将全选框的值一个一个地赋值给商品复选框 for(var i=0;i<oitems.length;i++){ oitems[i].onclick=handler } //商品每被点击一次就数一次别选中的商品数 function handler(){ var count=0 for(var i=0;i<oitems.length;i++){ if(oitems[i].checked) count++ } //计算有多少数量商品被选中 if(count===oitems.length){ oAll.checked=true }else{ oAll.checked=false } //决定全选框的状态 } </script>
操作元素文本内容
-
innerHTML
标签名.innerHTML：取出完整的元素内容,里面什么样就是什么样，包括标签标签名.innerHTML=""：覆盖元素内容
-
innerText
标签名.innerText：只简单明了地取出元素的文本信息，并不解析html
-
value:适用于表单标签
-
标签名.value -
标签名.value="" -
<select name="" id="select"> <option value="1">1111</option> <option value="2" selected>2222</option> <option value="3">33333</option> </select> <script> console.log(select.value) //此时菜单默认选中为2 select.value="3" //可以利用value值将下拉菜单选中3333 </script>
-
-
案例：渲染页面
操作元素样式
-
style：只能获取行内样式
元素.style.属性特别地：对于background-color等
元素.style["background-color"]或元素.style.backgroundColor -
style：只能修改行内样式
元素.style.属性="值" -
getComputedStyle:标准方法，能获取各种样式，但只能读不能写
getComputedStyle(元素).属性
操作元素类名
-
className
元素.className：获取类名元素.className="类名"：修改类名元素.className+=" 类名"通过字符串增加类名 -
classList
元素.classList元素.classList.add("类名")元素.classList.remove("类名")元素.classList.toggle("类名"):原本有设置的类名就会自动删除，没有就增加
DOM节点
-
分类
-
元素节点
getElementBy... -
文本节点
包括换行，回车
getAttributeBy... -
注释节点
-
属性节点
没有所谓的父子关系
-
根节点：document
-
-
获取节点
- childNodes属性:获取所有子节点
- children属性：获取所有子元素
- firstchildren属性：获取第一个子节点
- firstElementChild属性：获取第一个子元素节点
- lastchildren属性：获取最后一个子节点
- lastElementChild属性：获取最后一个子元素节点
- previousSibling属性:获取上一个兄弟节点
- previousElementSibling属性:获取上一个兄弟元素节点
- nextSibling属性:获取下一个兄弟节点
- nextElementSibling属性:获取下一个兄弟元素节点
- parentNode属性:获取父节点
- parentElement属性:获取父元素节点
getAttribute("属性")：获取属性值- attributes属性：获取所有属性
attributes[下标]：获取单个属性
-
操作节点
- 在js中创建新节点
var odiv=document.createElement("div") odiv.innerHTML="我是新创建的元素节点" odiv.id="" odiv.className="" ... //odiv是一个对象-
追加子节点
元素.appendChild(插入节点) -
插入节点
元素.insertBefore(插入节点，谁的前面插入) -
删除子节点
元素.removeChild(目标节点) -
删除自己和所有后代节点
元素.remove(目标节点) -
替换子节点
元素.repleceChild(新节点，老节点) -
克隆节点
元素.clonenode()传true值表克隆后代，默认false不克隆后代
-
节点属性：
- nodeType:每种节点都有特定的值，用于区分什么节点
- nodeName:属性名字
- nodeValue：属性值
-
获取元素尺寸
注
getComputedStyle(元素).width只能获取内容的宽-
offsetWidth、offsetHeight：
①content+padding+border
②单位是数字
③box-sizing没影响
④display：none会显示无尺寸
-
clientWidth、clientHeight：
①padding+content
-
-
获取元素偏移量
-
offsetLeft、offsetTop
参考点是定位父级，没有父级定位就相对于body
-
clientLeft、clientTop：
参考点是自己的边框左上角
-
-
获取可视窗口尺寸
innerHeight,innerWidth
不包括滚动条
事件
-
事件的组成
- 事件源：触发谁的事件
- 事件类型：触发什么事件
- 事件处理函数：触发后做什么
-
事件形式的分类
-
dom0类型
后面设置的事件回覆盖住前面的，但我们可以把不同的事件处理函数都放在一个事件中解决
形如： box.onclick=function(){ console.log("111") } -
dom2类型
可以绑定多个事件处理函数，按照顺序执行
形如： box.addEventListener("click",function){ console.log("111") } box.addEventListener("click",function){ console.log("222") }
-
-
解绑事件
-
disabled属性
元素.onclick=function(){ 事件处理函数 this.disabled="disabled" //this就表示当前的元素 } -
dom0类型：
元素.onclick=function(){ 事件处理函数 this.onclick=null //连续赋值，让后面的空事件处理函数覆盖前面的 } -
dom2类型：
function handler(){ 事件处理函数 } //将事件处理函数单独写 元素.addEventListener("click",handler) 元 素.removeEventListener("click",handler)
-
-
常见事件类型
用的时候前面+on
鼠标点击事件
-
click：单击，点击后移动到其他地方再松开可以取消
-
dblclick：双击
-
contextmenu：右键单击
鼠标移动事件
-
mousedown:鼠标点击，一点击就触发
-
mousemove：在元素内移动鼠标就触发
-
mouseup：鼠标点击后抬起就触发
移入移出:鼠标进入或退出元素触发
-
mouseover mouseout:后代元素也会被赋予此事件
-
mouseenter mouseleave
键盘事件
-
keydown:按下就触发
-
keyup:抬起使触发
浏览器事件：上面笔记
表单事件
-
focus:获取焦点就触发
-
blur：失去焦点就出发
-
change:在焦点的获得与失去时对比里面的内容不一致时才会触发
-
input：内容不一样就会触发
form事件：加给form标签，点击对应按钮就触发
-
submit
一般提交会直接跳转链接，我们可以利用submit让页面留在当前页面校验内容
-
reset：
触摸事件：用于移动端
-
touchstart
-
touchmove
-
touchend
-
-
事件对象
当你触发了事件后，对该事件的一些描述信息
形如，通过传形参evt(也可以自己定义成其他的) 元素.onkeyup=function(evt){ console.log(evt.keycode) }- clientX，clientY:距离浏览器可视窗口的左上角
- pageX，pageY:距离页面文档流的左上角
- offsetX，offsetY:距离点击元素的左上角
-
需要注意的 是，由于冒泡事件的存在，即使点击事件是加给父容器的，但当我们点到它的后代上时，会变成距离它后代容器左上角的距离
-
事件的传播现象
当元素触发一个事件时，它的父元素也会触发相同事件，并且它的父元素的父元素也会触发相同事件，以此类推；如果父元素没有相同事件，也不会组织事件继续向下传播。这是由于DOM事件流的存在
这里的相同事件，是指事件的类型，不是事件处理函数
-
DOM事件流：
标准过程：捕获：window=>document=>body=>outer
目标：inner
冒泡：outer=>body=>document=>window
默认情况下，事件只在冒泡过程触发
按照dom2形式绑定时间再进行一定配置才能看到捕获的回调函数
inner.addEventListener("click",function(){},true) //传第三参数 -
阻止事件传播
evt.stopPropagation()"evt"是事件对象中的那个形参
特别地，这个方法对IE浏览器中不管用，要用
evt.cancelBubble=true
-
-
阻止默认行为
像在浏览器右击，点击提交按钮等都会触发默认的行为
-
dom0形式阻止
return false如：
document.oncontextmenu=function(){ console.log("单击右键，自定义菜单") return false } -
dom2形式阻止
evt preventDefault()特别地，这个方法对IE浏览器中不管用，要用
evt.returnValue=false如：
document.addEventListener("contextmenu",function(evt){ console.log("单击右键，自定义菜单") evt.preventDefault() })
-
-
事件委托
-
target
属于事件对象的属性，表示你点击的元素
IE不兼容，要用srcElement
-
nodeName
可以通过元素属性nodeName检测点击元素的属性，从而消灭误点也触发事件的机会，返回值是字符串
-
-
案例：鼠标跟随效果
<style>
*{
margin: 0;
padding: 0;
}
#box{
width:200px ;
height: 200px;
background-color:blanchedalmond;
position: relative;
}
#box p{
width: 100px;
height: 100px;
background-color: #fede4f;
opacity: 0.3;
position: absolute;
left: 50px;
top: 50px;
z-index: 100;
pointer-events: none;
display: none;
}
</style>
<div id="box">
京东图片
<p>
黄色框
</p>
</div>
<script>
box.onmouseover=function(){ this.firstElementChild.style.display="block"}
box.onmouseout=function(){ this.firstElementChild.style.display="none"}
box.onmousemove=function(evt){
//鼠标跟随
this.firstElementChild.style.left=evt.offsetX+"px" this.firstElementChild.style.top=evt.offsetY+"px"}
</script>
-
鼠标拖拽
<style> *{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background-color: #fede4f; opacity: 0.3; position: absolute; left: 50px; top: 50px; z-index: 100; } </style> <p id="box">黄色框</p> <script> box.onmousedown=function(){ //鼠标按下后才计算鼠标在文档内的移动距离 document.onmousemove=function(evt){ //让鼠标处于移动元素的中央 var x=evt.clientX-box.offsetWidth/2 var y=evt.clientY- box.offsetHeight/2 //确保移动元素在窗口内移动 if(y<=0) y=0 if(x<=0) x=0 if(x>=document.documentElement.clientWidth-box.offsetWidth) x=document.documentElement.clientWidth-box.offsetWidth if(y>=document.documentElement.clientHeight-box.offsetHeight) y=document.documentElement.clientHeight-box.offsetHeight //让盒子移动 box.style.left=x+"px" box.style.top=y+"px" } } box.onmouseup=function(){ //鼠标抬起，解绑盒子的移动事件 document.onmousemove=null } </script> -
案例：自定义右键菜单
<style> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 200px; padding: 10px; border: 1px solid black; display: none; position: absolute; left:0; top: 0; } ul li:hover{ background-color: skyblue; } </style> <ul id="list"> <li class="a">111</li> <li class="b">222</li> <li class="c">333</li> </ul> <script> document.addEventListener("contextmenu",function(evt){ //删除右键的默认事件 evt.preventDefault() //右击选项出现 list.style.display="block" //选项跟随鼠标出现 var x=evt.clientX var y=evt.clientY if(x>=document.documentElement.clientWidth-list.offsetWidth) x=document.documentElement.clientWidth-list.offsetWidth if(y>=document.documentElement.clientHeight-list.offsetHeight) y=document.documentElement.clientHeight-list.offsetHeight list.style.left=x+"px" list.style.top=y+"px" }) //随便点击左键选项消失 document.addEventListener("click",function(){ list.style.display="none" }) //taget事件委托，精确点击那个选项出现什么事件 list.addEventListener("click",function(evt){ console.log(evt.target||evt.srcElement) }) </script>
4464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
