1. 复习
<!--
一, 对象的基本介绍
对象也是数据的集合
是通过属性和属性值来定义数据
属性的作用就类似于,数组的索引下标
对象是没有length属性的
一般从数据库获取的数据形式
[
{},
{},
{},
]
数组,forEach循环 , for , for...in
对象,只能使用 for...in 循环
对象的基本操作方法
基本操作方法与数组相同,是通过属性来操作具体的数据
对象中的this
普通函数:
声明式 : function fun(){} window
赋值式 : var fun = function(){} window
对象中的函数 : var obj = {fun:function(){}} 对象obj
二, 严格模式
'use strict'
三, ECMAScript 的基本介绍
四, Math方法
随机数 : Math.random()
取整 : Math.floor() 向下
Math.ceil() 向上
Math.round() 四舍五入
幂运算 : Math.pow()
平方根 : Math.sqrt()
绝对值 : Math.abs()
五, Date方法 时间对象
创建时间对象
1, var d = new Date()
没有参数,获取当前时间
2, var d = new Date(时间参数)
获取指定时间的,时间对象
参数语法1: '年-月-日 时:分:秒' '年 月 日 时:分:秒' '年/月/日 时:分:秒' '年,月,日 时:分:秒'
参数语法2: 年,月,日,时,分,秒
获取时间数据
年 时间对象.getFullYear() 4位数值的年份
月 时间对象.getMonth() 0-11的数值
日 时间对象.getDate() 日期数值
星期 时间对象.getDay() 星期数值,0-6的数值,0是星期日
时 时间对象.getHours() 小时数值,24进制
分 时间对象.getMinutes() 分钟
秒 时间对象.getSecondS() 秒
时间戳 时间对象.getTime() 当前时间对象,距离格林尼治时间1970年1月1日0点0分0秒的毫秒数值
设定时间数据
年 时间对象.setFullYear() 4位数值的年份
月 时间对象.setMonth() 0-11的数值
日 时间对象.setDate() 日期数值
时 时间对象.setHours() 小时数值,24进制
分 时间对象.setMinutes() 分钟
秒 时间对象.setSecondS() 秒
时间戳 时间对象.setTime() 当前时间对象,距离格林尼治时间1970年1月1日0点0分0秒的毫秒数值
不能设定星期
六, 定时器,延时器
定时器: setInterval( 函数 , 时间 )
按照参数2设定的时间间隔,重复执行参数1,函数中定义的程序
延时器: setTimeout( 函数 , 时间 )
按照参数2设定的延迟时间,延迟执行行参数1,函数中定义的程序
清除定时器,延时器
clearInterval() clearTimeout()
可以混合使用,不做清除对象的区分
异步执行
1,大部分程序是同步执行程序,按照三大顺序流程来执行
2,特定的程序才是异步程序,定时器,延时器,事件绑定,ajax
3,计算机执行程序:
(1),同步程序按照顺序直接执行
(2),异步程序,存储在异步池中,暂时不执行
(3),等所有同步程序执行结束,再开始执行异步程序
(4),异步池中的异步程序,是同时开始执行
时间间隔/时间延迟 短的先执行
时间间隔/时间延迟 一样,先定义的先执行
七, DOM和BOM 操作
BOM 浏览器对象模型
1,三大弹窗
window.alert() 提示框/警告框
转义符 \n 换行
\r 回车
\' 单引号
\" 双引号
window.prompt() 输入框
输入数据,以字符串形式存储
window.confirm() 确认框
点击确定 true
点击取消 false
2,浏览器的滚动条
兼容 <!DOCTYPE html> 有没有
var h = document.documentElement.scrollTop || document.body.scrollTop
var w = document.documentElement.scrollLeft || document.body.scrollLeft
3,浏览器地址栏信息
window.location 浏览器地址栏信息对象
window.location.reload() 重新加载页面
window.location.href 地址栏中url地址
中文会显示为 %XX(两个十六进制数值)
正常显示中文 decodeURIComponent(url地址信息)
设定页面的跳转地址 编程式导航
window.location.href = 'url地址'
window.location.host 主机
window.location.prot 端口
window.location.search 传参
4,浏览器跳转
window.history 浏览器跳转信息对象
window.history.length 跳转的次数,长度
window.history.back() 跳转上一个页面
window.history.forward() 跳转下一页页面
window.history.go() 设定跳转的长度
设定0,就是跳转至当前页面,刷新当前页面
5,浏览器信息对象
window.navigator 浏览器信息对象
window.navigator.userAgent 浏览器版本等信息
window.navigator.appName 浏览器名称 统一都是 网景
window.navigator.appVersion 浏览器只有版本的信息
window.navigator.platform 浏览器所在操作系统
6,浏览器的常见事件
window.onload 页面加载事件
window.onscroll 滚动条事件
window.onresize 大小改变
window.open() 新窗口打开
window.close() 关闭当前窗口
八, DOM 文档类型声明
1,获取标签对象
document.getElementById('id属性值');
获取一个标签对象
document.getElementsByClassName('class属性值');
获取一个伪数组 , 不能 forEach循环
document.getElementsByTagName('标签名称');
获取一个伪数组 , 不能 forEach循环
document.getElementsByName('name属性值');
获取一个伪数组 , 可以 forEach循环
document.querySelector(条件);
获取符合条件的第一个标签对象
document.querySelectorAll(条件);
获取符合条件的所有标签对象
获取一个伪数组 , 可以 forEach循环
2,设定标签对象
(1),属性操作
标签对象.setAttribute('属性' , 属性值) 设定
标签对象.getAttribute('属性') 获取
标签对象.removeAttribute('属性') 删除
一般是操作自定义属性
标签本身就具有的属性,推荐使用
标签对象.属性 来操作
(2),样式操作
JavaScript中,不支持-减号,带有减号的属性,要写成小驼峰命名法
标签对象.style.属性 行内样式操作,获取样式的属性值
标签对象.style.属性 = 数值 行内样式操作,设定样式的属性值
获取标签最终执行的样式的属性值
if(window.getComputedStyle){
var res = window.getComputedStyle(标签对象).样式
}else{
var res = 标签对象.currentStyle.属性
}
(3),标签参数
input
text password url phone email...
可以输入数据的,直接获取标签对象.value
radio checkbox hidden
只能通过标签的value属性值来设定参数
判断 标签对象.checked true 是被选中
false 没有被选中
file
不支持设定标签的value属性,只能点击选取上传的文件
可以通过 标签对象.value 获取参数
select
select>option 配合使用
value属性定义在 option 标签上
获取参数,是获取 select 上的value属性
textarea
标签不支持value属性
可以通过 标签对象.value 获取参数
3,获取标签的占位
(1),通过属性值方式获取标签对象的对应属性
标签对象.sytle.width
(2),通过标签对象的属性来获取
offsetHeight offsetWidth
高/宽 + padding + border
clientHeight clientWidth
高/宽 + padding
clientLeft clientTop
左/上 边框线
offsetLeft offsetTop
左/上 定位父级元素的间距
-->
2. OffsetLeft
offsetLeft : 到定位父级左边界的间距
offsetTop : 到定位父级上边界的间距
每一个标签对象,都有一个属性,叫 offsetParent
表示这个标签的定位父级对象是谁
- 标签本身,没有定位属性,定位父级对象 是 body
此时是这个标签到body的间距
不管是body的padding,还是标签的margin,都是到body的间距
如果有父级,计算的也是当前标签到 body 的总间距 - 标签本身有定位,要看定位父级对象是谁
position: relative; 定位父级仍然是 body
position: absolute; 要看具体的定位是谁
position: fixed; 定位父级是 null 指的是 视窗窗口
表示的仍然是到定位父级的间距,只是定位父级有可能不同 - 本身没有定位,父级有定位属性
此时定位对象父级是 带有定位属性的父级标签
表示的是到这个父级标签的间距
总结:
offsetLeft offsetTop 情况很复杂
需要先确定 offsetParent 定位父级对象标签
获取的数据,就是当前标签,到父级定位标签的总间距
先找爹,确定爹,到爹的间距
3. <style>
4. *{
5. margin: 0;
6. padding: 0;
7. }
8. body{
9. padding: 50px;
10. }
11.
12. .div1{
13. margin-left: 100px;
14. position: fixed;
15. }
16.
17. .div2{
18. position: fixed;
19. }
20. </style>
</head>
<body>
<div class="div1">
<div class="div2">我是div</div>
</div>
. <script>
var oDiv = document.querySelector('.div2');
console.dir(oDiv);
</script>
3．DOM操作之写入内容
DOM操作,之写入内容
给标签对象,写入内容
是,全覆盖写入
新写的内容,会覆盖标签中,之前定义的内容
包括文字,以及子级标签
标签对象.innerHTML() 支持标签
标签对象.innerText() 不支持标签
对div标签,写入内容
新写入的内容,会覆盖,之前div标签的所有内容
包括文字,标签等
- 标签对象.innerHTML 获取标签对象中所有的内容,包括标签
标签对象.innerText 获取标签对象中所有的内容,不包括标签 - 标签对象.innerHTML = ‘内容’ 设定标签对象的内容,支持解析标签
标签对象.innerText = ‘内容’ 设定标签对象的内容,不支持,不解析标签 ;执行结果就是,纯字符串写入
<div>
我是文字内容
<span>1</span>
<a href="#">2</a>
<ul>
<li>3</li>
</ul>
<h1>4</h1>
</div>
<script>
var oDiv = document.querySelector('div');
// oDiv.innerHTML = '我是写入的内容';
// 1, 标签对象.innerHTML 获取标签对象中所有的内容,包括标签
// 标签对象.innerText 获取标签对象中所有的内容,不包括标签
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
// 2, 标签对象.innerHTML = '内容' 设定标签对象的内容,支持解析标签
// 标签对象.innerText = '内容' 设定标签对象的内容,不支持,不解析标签
// 解析h1 标签,执行结果是 写入一个 h1标签,标签内容是 我是innerHTML写入的
oDiv.innerHTML = '<h1>我是innerHTML写入的</h1>';
// 不支持,不解析标签,执行结果就是,纯字符串写入
oDiv.innerText = '<h1>我是innerHTML写入的</h1>';
</script>
4. 作业
<script>
// 方法1 window.prompt
var sex = window.prompt('请您输入性别,男/女');
var h = window.prompt('请您输入身高,单位CM')-0;
var w = window.prompt('请您输入体重,单位KG')-0;
isStandardBodyWeight();
function isStandardBodyWeight (){
// 获取数据数据之后,应该做验证判断
// 数据安全,没有问题之后,再执行程序
// 之后会有很多对于数据的判断,这里先写一个意思意思
if( !( sex == '男' || sex == '女' ) ){
document.write('您输入的性别有误,请输出男/女');
// 通过return来终止程序的执行
return;
}
// 根据性别,计算出标准体重
if(sex == '男'){
// 男士计算公式
var sbw = (h - 80) * 0.7;
}else{
// 女士计算公式
var sbw = (h - 70) * 0.6;
}
// 计算小数时有可能会有误差
// 要保留小数位数 -- 来个保留两位小数,意思意思
// 方法1: 数值*100 取整 再 除100
var maxSbw = parseInt(sbw * 100 * 1.15) / 100;
var minSbw = parseInt(sbw * 100 * 0.85) / 100;
// 方法2: toFixed(保留小数的位数)
// 四舍五入取整,而且执行结果是字符串
// var a = 123.456789;
// console.log(a.toFixed(2));
// 判断体重范围
// 体重在标准体重范围内容
if( w >= minSbw && w <= maxSbw ){
document.write('您是标准体重');
// 超过最大标准体重
}else if ( w < minSbw ) {
document.write('您的体重太轻了');
// 小于最小标签体重
}else if ( w > maxSbw) {
document.write('您的体重太沉了');
}
}
// 总结:思路步骤
// 1,获取前端参数
// 2,判断数据安全性
// 有没有数据,数据的内容,类型等等
// 如果数据有误,终止执行之后的程序
// 3,执行程序的业务逻辑
// 根据性别,计算出标准体重
// 计算出标准体重的最大值和最小值,保留2位小数
// 判断输入的体重,对应的标准体重的范围
// 根据输入体重所在范围,输出不同结果
// +- 15% 标准
// +- 30% 偏胖偏瘦
// +- 45% 太胖胖太瘦
// +- 60% 特别胖特别瘦
//
// 作业1: 字符串 100px 如何只获取 100 ,不要px
// 最常用最简单方法 parseInt('100px')
// 脑洞方法1: 截取字符串至倒数第三个字符
// 脑洞方法2: 反转字符串,从第三个字符开始截取,将结果再反转回来
// 脑洞方法3: 字符串转数组,定义数组长度 length-2,删除最后的2个单元
// 再将数组拼接为字符串
// 脑洞方法4: 字符串转数组,执行两次 pop(),删除最后两个单元
// 再将数组拼接为字符串
// 脑洞方法5: 字符串转数组,反转数组,执行两次 shift(),删除起始两个单元
// 反转数组,再将数组拼接为字符串
// 脑洞方法6: 循环遍字符串,对每一个字符串,执行 -0操作,转化为数值
// 判断数据类型,是否可以转化为数值,如果是数值,执行拼接操作
// .......
// 作业2 , 标准体重
// 数据的收入,可以通过 window.prompt() 也可以是前端input等标签
</script>
5. 事件
- 事件的三大要素
事件绑定对象
指的是,绑定事件和事件处理函数的标签
这个标签有可能不是触发事件的标签 - 事件类型
绑定的标签的事件类型
鼠标事件 表单事件 键盘事件 触摸事件 特殊事件
3.事件处理函数
触发事件时执行的程序
一个标签,往往相同的事件类型只能绑定一个事件处理函数
如果要绑定多个事件处理函数,需要使用事件监听语法
6. 事件类型之鼠标事件
鼠标事件
通过操作鼠标,来触发事件
var oDiv = document.querySelector('div');
-
左键单击事件 click
oDiv.onclick = function(){ console.log('触发的是鼠标左键单击事件'); } -
左键双击事件 dblclick
oDiv.ondblclick = function(){ console.log('触发的是鼠标左键双击事件'); } -
右键单击事件 contextmenu
oDiv.oncontextmenu = function(){ console.log('触发的是鼠标右键事件'); } -
鼠标按键按下事件 mousedown
当鼠标按下时,触发事件
鼠标的点击事件是 两个动作完成的
一个是鼠标按下,一个是鼠标抬起
如果只有按下动作,只会触发 mousedown
抬起时,完成一个完整的点击效果,才会触发 clickoDiv.onmousedown = function(){ console.log('鼠标按下了'); } -
鼠标按键抬起事件 mouseup
当鼠标抬起时,触发事件oDiv.onmouseup = function(){ console.log('鼠标抬起来了'); }
总结:
- 鼠标点击事件,分为两部分完成
鼠标按下 鼠标抬起 - 只操作鼠标按下,只会触发鼠标按下事件
- 只操作鼠标抬起,只会触发鼠标抬起事件
- 两个操作都完成后,才会触发鼠标点击事件
- 鼠标按下抬起,不区分左键右键
- 鼠标移入事件
经过标签边界线的时候触发
mouseover mouseenter
经过子级会触发 oDiv.onmouseover = function(){ }
经过子级不触发 oDiv.onmouseenter = function(){ } - 鼠标移出事件
经过标签边界线的时候触发
mouseout mouseleave
经过子级会触发 oDiv.onmouseout = function(){ }
经过子级不会触发 oDiv.onmouseleave = function(){ } - mousemove 鼠标移动
鼠标在标签范围内移动,会触发事件
效果类似于 :hover
总结:
-
鼠标移出,移出事件,只有经过标签边界线时触发
在标签内部时,不会触发 -
mouseover mouseout
经过当前标签边界线时会触发
经过子级标签边界线时也会触发 -
mouseenter mouseleave
只有经过当前标签时会触发
经过子级标签时,不会触发
<style>
div{
width: 200px;
height: 200px;
border:1px solid black;
}
span{
border: 1px solid green;
}
</style>
</head>
<body>
<div>我是div
<span>我是span标签</span>
</div>
<script>
// 鼠标事件
// 通过操作鼠标,来触发事件
var oDiv = document.querySelector('div');
// 1,左键单击事件 click
oDiv.onclick = function(){
console.log('触发的是鼠标左键单击事件');
}
// 2,左键双击事件 dblclick
// oDiv.ondblclick = function(){
// console.log('触发的是鼠标左键双击事件');
// }
// 3,右键单击事件 contextmenu
// oDiv.oncontextmenu = function(){
// console.log('触发的是鼠标右键事件');
// }
// 4,鼠标按键按下事件 mousedown
// 当鼠标按下时,触发事件
// 鼠标的点击事件是 两个动作完成的
// 一个是鼠标按下,一个是鼠标抬起
// 如果只有按下动作,只会触发 mousedown
// 抬起时,完成一个完整的点击效果,才会触发 click
// oDiv.onmousedown = function(){
// console.log('鼠标按下了');
// }
// 5,鼠标按键抬起事件 mouseup
// 当鼠标抬起时,触发事件
// oDiv.onmouseup = function(){
// console.log('鼠标抬起来了');
// }
// 总结:
// 1,鼠标点击事件,分为两部分完成
// 鼠标按下 鼠标抬起
// 2,只操作鼠标按下,只会触发鼠标按下事件
// 3,只操作鼠标抬起,只会触发鼠标抬起事件
// 4,两个操作都完成后,才会触发鼠标点击事件
// 5,鼠标按下抬起,不区分左键右键
// 6,鼠标移入事件
// 经过标签边界线的时候触发
// mouseover mouseenter
// 经过子级会触发
oDiv.onmouseover = function(){
console.log('我进来了1111');
}
// 经过子级不触发
oDiv.onmouseenter = function(){
console.log('我进来了2222');
}
// 7,鼠标移出事件
// 经过标签边界线的时候触发
// mouseout mouseleave
// 经过子级会触发
oDiv.onmouseout = function(){
console.log('我出去了1111');
}
// 经过子级不会触发
oDiv.onmouseleave = function(){
console.log('我出去了2222');
}
// 总结:
// 1,鼠标移出,移出事件,只有经过标签边界线时触发
// 在标签内部时,不会触发
// 2,mouseover mouseout
// 经过当前标签边界线时会触发
// 经过子级标签边界线时也会触发
// 3,mouseenter mouseleave
// 只有经过当前标签时会触发
// 经过子级标签时,不会触发
// 8,mousemove 鼠标移动
// 鼠标在标签范围内移动,会触发事件
// 效果类似于 :hover
oDiv.onmousemove = function(){
console.log('我动来动去');
}
</script>
7. 事件类型之表单事件
<form action="./01_复习.html">
账号 : <input type="text"><br>
<button>提交</button>
</form>
<script>
// 表单事件
// 与form表单相关的事件
var oIpt = document.querySelector('input');
var oForm = document.querySelector('form');
// 1, focus 标签获取焦点事件
// 所谓的鼠标检点,就是鼠标点击的对象是当前标签
oIpt.onfocus = function(){
console.log('我被点击了,我获取了焦点');
}
// 2, change 标签失去焦点,并且数据改变,触发事件
// 触发事件有两个条件
// 1,标签失去焦点 --- 焦点在其他标签上
// 2,标签的数据,发生改变
oIpt.onchange = function(){
console.log('我失去焦点了,而且我被改变了')
}
// 3, input 标签输入内容时,触发事件
oIpt.oninput = function(){
console.log('我被输入数据了')
}
// 4, submit 表单提交事件
// 绑定给form表单标签
// 可以阻止提交表单
// 多用于,提交数据时,做判断操作
// 如果数据不符合要求,就阻止表单提交
oForm.onsubmit = function(e){
// 阻止表单提交,后面详细讲
e.preventDefault();
window.alert('您输入的数据有误')
}
</script>
8. form表单
<form action="./01_复习.html">
注册账号: <input type="text" name="us" placeholder="请你您输入账号,8-16位"><span name="username"></span><br>
注册密码: <input type="password" placeholder="请你您输入密码,8-16位"><br>
重复密码: <input type="password" placeholder="二次输密码,与密码一致"><br>
验 证 码 : <input type="text" placeholder="请你您二次验证码"> <br>
<span name="vc"></span><button type="button" name="reset">看不清刷新</button><br>
<button>提交</button>
</form>
<script>
// 简单的form表单验证demo
// 1,要获取生成,验证码
// 实际项目中,往往是与第三方机构获取验证码
// 目前本地生成一个随机的6位验证码
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCEDEFGHIJKLMNOPQRSTUVWXYZ';
var oVc = document.querySelector('[name="vc"]');
oVc.innerHTML = setVc(str);
var oBtnReset = document.querySelector('[name="reset"]');
oBtnReset.onclick = function(){
oVc.innerHTML = setVc(str);
}
// 2,当标签获取焦点时,给标签后,输入提示信息
// 标签要在不同的事件中获取数据,不能直接获取数据
// 一般是先获取标签对象,然后在事件执行的时候,获取 标签对象.value数据
// 当输入账号标签获取焦点时
var oIptUserName = document.querySelector('[name="us"]');
var oSpanUserName = document.querySelector('[name="username"]');
// 获取焦点,在span标签中输入提示
oIptUserName.onfocus = function(){
oSpanUserName.innerHTML = '请您输入账号,不能为空,长度是8-16位';
oSpanUserName.style.color = 'black';
}
// 输入数据,在span标签中输入提示
oIptUserName.oninput = function(){
// 1,获取input标签数据的数据,length属性就是输入的数据长度
var usernameValue = oIptUserName.value;
oSpanUserName.innerHTML = `您当前输入${usernameValue.length}个字符,最多输入16位字符,您还是可以输入${16-usernameValue.length}个字符`;
oSpanUserName.style.color = 'black';
}
// 当失去焦点时,判断,输入的数据,是否符合规范
// 目前就判断数据的长度是8-16为字符
oIptUserName.onchange = function(){
// 验证数据长度在8-16位之间
var usernameValue = oIptUserName.value;
// 当账号长度在8-16位之间时,输入账号符合规范的提示信息
if( usernameValue.length >= 8 && usernameValue.length <= 16 ){
oSpanUserName.innerHTML = '您输入的账号符合规范';
oSpanUserName.style.color = 'black';
// 当账号长度不在8-16位之间时,输入账号不符合规范的提示信息
}else{
oSpanUserName.innerHTML = '您输入的账号不符合规范';
oSpanUserName.style.color = 'red';
}
}
// 其他输入框的验证,自己补全
// 爱怎么写怎么写,能有提示内容和效果就可以
// 当点击提交按钮时,进行数据验证
// 数据必须符合规范,才能执行提交表单效果
// 否则会阻止表单提交
var oForm = document.querySelector('form');
// 提交事件,要阻止调教,参数必须有一个e
oForm.onsubmit = function(e){
// 1,输入内容不能为空
// 如果输入内容是空字符串,就在对应项输入提示,并且组织表单提交,终止程序
var usernameValue = oIptUserName.value;
// 如果账号数据为空
if( usernameValue === '' ){
// 阻止表单提交
e.preventDefault();
oSpanUserName.innerHTML = '您输入的账号,不能为空';
oSpanUserName.style.color = 'red';
return;
}
// 其他的为空判断,自己来补充完整
// 验证数据长度
if( !( usernameValue.length >= 8 && usernameValue.length <= 16 ) ){
e.preventDefault();
oSpanUserName.innerHTML = '您输入的账号,不符合长度规范,请输入8-16位账号';
oSpanUserName.style.color = 'red';
return;
}
// 其他的长度判断,自己来补充完整
// 密码和二次输入密码,数据必须完全一致
// ===
// 输入的验证码数据,必须与生成的验证码内容,完全一致
// ===
// 如果之前所有的if判断,都没有被执行
// 证明输入的账号,密码符合规范
// 才能正确提交数据
}
function setVc(str) {
var vc = '';
while (vc.length < 6) {
var num = parseInt(Math.random() * str.length);
if (vc.indexOf(str[num]) === -1) {
vc += str[num];
}
}
return vc;
}
9. 事件对象event
事件对象event
事件对象,指的是触发绑定事件的标签
有时触发事件的标签和绑定事件的标签,不是一个标签
就是所谓的 事件委托
事件对象,是事件处理函数的参数
这个参数中,JavaScript自动存储触发事件标签的相关信息
这个参数可以随便定义,一般定义成 event 或者 e,表示是 事件对象
事件对象有兼容处理
一般浏览器 || 低版本IE浏览器
兼容语法 e = e || window.event
var oDiv = document.querySelector('div');
没有参数,就没有容器,就没有存储内容的变量
定义了参数,JavaScript程序,就自动向这个参数中,存储事件对象的相关信息
oDiv.onclick = function(e){
e = e || window.event;
console.log(e);
}
要组织默认事件的执行,必须是
事件对象.preventDefault();
