一, 对象的基本介绍
对象也是数据的集合
是通过属性和属性值来定义数据
属性的作用就类似于,数组的索引下标
对象是没有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),通过属性值方式获取标签对象的对应属性
标签对象.style.width
(2),通过标签对象的属性来获取
offsetHeight offsetWidth
高/宽 + padding + border
clientHeight clientWidth
高/宽 + padding
clientLeft clientTop
左/上 边框线
offsetLeft offsetTop
左/上 定位父级元素的间距
