这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战
☆☆☆ 今天学习的内容: ( 对前面的学习进行一次简单系统的总结
)
>查缺补漏< ☆☆☆
可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中
结合自己的理解, 用白话文简单又全面概括
JavaScript
学习过程中的基础知识点, 方便加深理解!
开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!
1、第一周知识点梳理
数据类型:
typeof
基本: 字符 数值 布尔
复合 : object
特殊 : null undefined
运算符表达式
-
算术 :
++ --
+ - * / % "8" - 9
-
关系 - 逻辑 - 条件 - 赋值
-
优先级最高 : () 算术 关系 逻辑 条件 赋值(=)
-
类型转换 : parseInt() parseFloat() Number("200px") Boolean() toString(16)
三大结构 :
顺序 选择 循环
if (范围条件) {
} else {
}
switch (固定值条件) {
case 1:
break
}
选择:
循环:
while
do..while
for
for...in
for( var i = 0 ; i < 10 ; i++ )
alert(i); 循环体
break : 结束当前循环
函数:
参数概念
形参 : 是一个变量 函数定义中 一一对应
返回值 return
变量作用域:
- 全局变量
- 局部变量
var num = 90
function fn(num) {
num = 100
alert(num)
100
}
fn(num)
alert(num)
90
alert(a)
function a() {
console.log(19)
}
var a = 100
function a() {
console.log(19)
}
函数和事件关系:
事件三要素 : 事件源 事件 事件处理程序(function)
常见的事件 :
函数递归调用: 函数自己调用自己
function fac(num) {
if (num == 1) {
return 1
} else {
return num * fac(num - 1)
}
}
2、第二周知识点梳理
对象 :{ }
构造函数 : new String()
内置对象
Array
排序算法 : 冒泡排序 选择排序
去重算法 :
新数组 : 取出原数组中的数,判断这个数在新数组中是否存在,如果不存在,就添加到 newArr
数组操作方法:
push()
pop()
shift()
unshift()
splice()
join()
....
值传递和地址传递 :
var arr = [1, 2, 3]
var brr = arr
brr[0] = 10
arr[0] = 10
String
操作方法
字符串转成数组 : split()
Date()
获取日期 get....
设置几天后的日期 now.setDate( now.getDate() + 8 )
Math :
获取任意区间整数值 :
正则
BOM : window ---- location history document screen event navigator
DOM :
-
增 appendChild() insertBefore() createElement()
-
删 remove() removeChild()
-
改
-
改样式 .className .style.color = xx .style.cssText
-
改属性: .属性 = 值 .setAttribute("属性","值") .getAttribute();
-
改内容
.value
.innerHTML
-
-
查
getElementsBy....
3、第三周知识点梳理
事件对象 event
事件对象相关属性 : pageX offsetX keyCode
兼容性 :
事件传播方式:
- 事件冒泡 由子元素向父元素传播
- 事件捕获 由父元素向子元素传播
事件监听
addEventListener(事件,function(){}, false/true);
事件委托(代理) :
好处 : 提高执行效率 动态创建的元素 利用委托 在函数外部添加事件
获取事件源 :
target || srcElement
json
{ "键":值 } for in json[键]
拖拽 :
三步 : 三个事件 offset 家族属性 : offsetLeft/Top Width/height scroll 家族属性: 获取页面滚走的距离
正则 :
- 特殊字符含义 : \d \w \s + ? * . | .....
- 表单验证
- 方法 : test() replace() search() Exec() match()
cookie:
设置 cookie
document.cookie = 'uname=xn213'
获取 cookie
document.cookie
删除 cookie
将cookie的键设置为 '' 或生存期 设置为 -1
生存期 :
document.cookie = 'uname=xn213;expires = ' + now
cookie 参数 : 键和值 ./ 会话跟踪技术 :
ES6
- 块级作用域 let 关键字
- 常量定义 const
- this 指向改变 : bind apply call
- for of 和 for in 区别 :
- 字符串模板 :
${ 变量 函数调用 }
- 箭头函数 () => { }
- 解构赋值 [x,y] = [3,2] {a,b} = {b : 3, a : 9}
function fn({ b, a }) {}
fn({ a: 8, b: 9 })
- 互换值:
;[x, y] = [y, x]
Array.from()
将具有 length 属性的伪数组转数组new Set()
Array.from( new Set([]) )去重new Map()
Symbol 类型
保护对象的属性
"use strict"
严格模式
4. 兼容问题总结
4.1、事件对象创建
e || event
4.2、事件冒泡
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
4.3、取消浏览器的默认行为
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
return false
4.4、事件委托中获取事件源
e.target || e.srcElement
4.5、获取键盘按键值
e.keyCode || e.which
4.6、获取页面滚走距离
document.documentElement.scrollTop || document.body.scrollTop
4.7、取消拖拽时文字选中状态(选记)
widnow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
4.8、获取非行内元素样式值
function getStyle(obj, attr) {
return window.getComputedStyle
? window.getComputedStyle(obj, false)[attr]
: obj.currentStyle[attr]
}
预告: 加油, 追梦人
学习就是一个不断进行的过程, 坚持下去, 定有收获!
日积月累, 巩固基础, 早进大厂!
坚持很不容易, 坚持下来更不容易, 你真棒!
更多阅读:
前文更新回顾
【重学 JS】每天学习巩固基础:
【day2】各种运算符、 【day3】数据类型、 【day4】循环结构 & 条件语句、 【day5】函数(重点)、 【day6】作用域 & 事件、
【day7】对象 & 数组方法总结、 【day8】字符串方法 & 部分排序、
【day9】Math 对象 & 封装函数、 【day10】BOM-浏览器对象模型、
【day12】Event 事件对象初识(一)、 【day13】Event 事件对象初识(二)、
更多期待在路上...任重而道远==-..-==
Calm Down & Carry On!