目录
- 基础知识
- 数据类型
- 操作符和表达式
- 语句
- 函数
- 数组与字符串
- 定时器
- 数学对象
- 时间与日期
- DOM文档对象模型
- BOM浏览器对象模型
- 事件流
1> 基本知识
三大组成部分：
1） ECMAScript，提供核心语言
2） DOM 文档数据类型 提供访问和操作网页内容的方法和接口
3） BOM 浏览器数据类型 提供与浏览器交互的方法和接口
引入
<script src=””></script>
-
alert()系统弹出框 阻断程序运行 -
console.log()控制台输出 用于调试程序 报错信息的收集 -
document.write()打印到页面
2> 数据类型
5种基本数据类型：
undefined —— 未定义类型
null —— 空类型
boolean —— 布尔类型
number —— 数值型
string —— 字符串类型
1种复杂数据类型：
object —— 对象类型
Typeof类型：
undefined —— 如果这个值未定义；
boolean —— 如果这个值是布尔值；
number—— 如果这个值是数值；
string —— 如果这个值是字符串；
object —— 如果这个值是对象或null；
function —— 如果这个值是函数。
3> 操作符和表达式
1） 一元操作符（单目操作符）
- ++是递增操作符，--是递减操作符
- i++ 先赋值 后自加 i-- 先赋值 后自减
- ++i 先自加 再赋值 --i 先自减 再赋值
- 乘法操作符 / 除法操作符 % 取余操作符
2） 布尔操作符
-
&&（与）：找第一个为false的值并返回 -
||（或）：找第一个为true的值并返回 -
！（非）：取反
&&（与）和||（非）中，如果有一个操作数是null，则返回null；如果有一个操作数是NaN，则返回NaN；如果有一个操作数是undefined，则返回undefined。
语句
1）If语句：
If(){
}else if{
}else
2）swichi语句：
swich(a){
case 满足条件:
满足条件,执行;
break;
case 满足条件:
满足条件,执行;
break;
default:
都不满足执行;
}
3） for语句：
for(start;end;step){
循环体;
}
4） for in 语句：
for (var 变量 in 对象){
循环体
}
6） while语句
7） do……while语句
8） break以及continue
5> 函数
1）函数声明
function fn(){ }
2）函数表达式
var fn = function (){};
两者区别：函数声明有函数声明提升的过程
6> 数组与字符串
1） 创建方式
//数组
var arr = new Array();
var arr = [ ];
//字符串
var str = new String();
var str = “ ”;
2） 属性
console.log($.length) // 返回值为长度
3）数组转字符串方法
$.toString( )
$.join( ) // 数组转字符串
3） 栈方法和队列方法
// 栈方法
$.push()：将任意参数添加到数组末尾 // 返回值为新数组的长度
$.pop( )：将数组末尾的参数删除 //返回值为被删除项
// 队列方法
$.unshift()：将任意参数添加到数组开头 // 返回值为新数组的长度
$.shift()：将数组开头的参数删除 // 返回值为被删除项
4） 重排序和操作方法
$.reverse()： 翻转数组 // 返回值为翻转后的新数组
$.sort()： 排序
$.sort(function(a,b)){
Return a-b 升序
Return b-a 降序
}
$.concat()：拼接两个或几个数组 // 返回值为新数组
$.slice()：提取数组中的某个部分 // 返回值为被提取项
$.splice()：添加、删除、替换
$.indexOf()：通过元素找下标 // 返回值为该元素首次出现的索引值
5） 迭代方法
$.some()：数组中任何一个值为true，就返回true
$.every()：数组中每一项为true，才返回true
内容很多是不是有点困了...
thing.jpg
7> 定时器
<h1 id='names'></h1>
<script>
var names = document.getElementById('names');
console.log(names);
var arr = ['三国演义', '红楼梦', '西游记',"水浒传","白夜行","放课后","解忧杂货店","东野圭吾","百年孤独"];
var timer = null;
timer = setInterval(function () {
var num = Math.floor(Math.random() * arr.length);
names.innerHTML = arr[num];
}, 50)
setTimeout(function () {
clearInterval(timer);
timer = null;
}, 5000)
8> 数学对象
1） 属性
$.Math.min() //最小值
$.Math.max() //最大值
2） 舍入方法
$.Math.ceil() //向上舍入
$.Math.floor() // 向下舍入
$.Math.round() //标准舍入（四舍五入）
3） 随机数
$.Math.random()
4) 封装一个方法:随机生成n到m的随机数。
function random(n,m){
return Math.floor(Math.random()*(m-n+1) + n);
}
9> 时间与日期
倒计时案例：
Html：
<h3 id="downtime"></h3>
Css:
span {
display: inline-block;
color: #fff;
width: 30px;
height: 30px;
background-color: #000;
text-align: center;
line-height: 30px;
font-size: 15px;
}
Js：
var timedown = document.getElementById("downtime")
function djs(year, mo, day) {
var nowtime = new Date();
var futuretime = new Date(year, mo, day);
var shicha = futuretime - nowtime;
var tian = Math.floor(shicha / 1000 / 60 / 60 / 24);
var hour = Math.floor(shicha / 1000 / 60 / 60 % 24);
var minutes = Math.floor(shicha / 1000 / 60 % 60);
var secend = Math.floor(shicha / 1000 % 60);
var all = `<span>${tian}</span> 天 <span>${hour}</span>时 <span>${minutes}</span>分 <span>${secend}</span>秒`
return all;
}
var tim = null;
tim = setInterval(function () {
timedown.innerHTML = djs(2019, 9, 1);
}, 0)
10 >DOM文档对象模型
etElementById() 获取特定ID元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementsByClassName()[0] 获取Class名称元素的节点
getElementsByName() 获取相同名称的节点列表
getAttribute() 取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性
$.innerHTML 写入页面
获取元素的节点前面需要加
document
11> BOM 浏览器对象模型
对话框
var tak = confirm("请点击确定或取消")
alert(tak)
点击确定返回值为true
点击取消返回值为false
12> 事件流
事件分类：
事件冒泡由最深处的元素开始接受，逐层向上传递。
事件捕捉由最外围的节点开始接受，逐层传递到最具体元素。
事件类型：
所有事件类型的处理都由 on + 事件名称 组成。
1） 鼠标事件
click :单击鼠标时触发
dblclick ：双击鼠标时触发
mouseover：鼠标滑入时触发
mouseout：滑出时元素时触发
mousemove：鼠标在元素上移动式触发
2） 键盘事件
keydown：按下键盘任意键时触发，如果按着不放会重复触发
keyup：释放键盘上按键时触发
keypress：按下键盘某个字符键时触发，如果按着不放会重复触发
3） HTML事件
load：当页面所有内容加载完成后，在整个页面之上触发
unload：当页面所有内容卸载后触发
focus：获取焦点时触发
blur：失去焦点时触发
本人新建的公众号，有兴趣的小可爱可以关注一下子嗷qaq
扫码一键关注了解一下.jpg
网友评论