***
1、什么是javascript ？ 2、常量和变量 3、标识符的命名规范 驼峰式 匈牙利 4、类型 基本类型 字符 数值 布尔 引用类型 object 特殊类型 ： undefined null 5、运算符和表达式 算术 一元 ++ -- i++ 和 ++i 区别 ： 二元 + 100+"90" 100-"90" 赋值 = += 关系 == === 条件 ? : 逻辑 && || !
---
短路现象 ： 真 || 不执行 假 && 不执行
类型转换 ： 自动转换 isNaN("23") 强制转换
选择结构
if
if else if
switch
----
三大结构
顺序结构
运算符和表达式
五类
选择结构
控制语句 ：
if else
switch
循环结构
for
while
do..while
break 和 continue
---
1、函数
2、函数定义
function 函数名(){ .... }
var fn = function(){...}
3、 函数参数
4、返回值
---
运算符和表达式
算术
关系 ：主要应用与布尔环境 （表示判断 if() while() ）
逻辑 : 与关系连用
条件 ： ？ : 布尔环境
赋值 : =
选择结构
if switch()
循环结构 ：
while
do..while
for
break 和 continue
函数：
函数参数
函数返回值
作用域 ：
全局和局部
function fn(num){
num = 90;
}
fn()
alert( num )
alert( fn )
var fn = 90;
function fn(){ ... }
函数和事件的关系
-----
对象 ：
对象类型和基本类型区别 ：
对象中存的数据是批量的 基本类型存一个数据
传值时 ：对象传地址 基本类型传数值
对象类型都有属性和方法 而基本类型没有属性和方法
构造函数 ： Array Object
数组 ：
定义方式 ：
var arr = []
var arr = new Array()
数组遍历 ：
for..in
数组的操作方法 ：
push pop shift unshift splice
reverse()
join() concat() slice()
栈和堆 ：
---
去重算法 ： 定义一个空数组 判断原数组中的某个数在空数组中是否存在 不存在就存入到空数组中
排序算法 ： 冒泡 和 选择 sort(function(a,b){}) 排序方法
严格模式 ： "use strict"
数组的扩展方法 ：
forEach map indexOf filter reduce some every
字符串操作方法：
查 ： charAt charCodeAt String.fromCharCode
拆 ： split()
转 ： toLowerCase() upper
替 ： replace()
截 ： substr substring slice
复制 ： repeat
连接 ：concat
去两边空格 ：trim arr.forEach(function(item,index,array){ 操作内容 } ）
arr.filter(function(item,index,array){ 操作内容 })
arr.map(function(item,index,array){
})
reduce() 归并
arr.reduce(function(pre,next){
pre 表示上一次操作返回的结果 如果第二个参数有数据，prev的初始值为第二个参数
next 表示 下一个数 next 表示数组中的每一个数据
},第二个参数)
---
1、数学对象 获取任意区间的随机整数值 Math.round( Math.random()*(max-min) + min ); 2、日期对象 日期定义 ： 当前系统时间 new Date( ) 自定义时间 new Date( "" ) 获取时间 ：get.... 时间差 ： getTime() 时间格式的设置 ： 设置3天后的时间 var now = new Date(); now.setDate( now .getDate() + 3 ); setDate() 改变原来的时间 alert( now ); 定时器 ： 让时间动起来
---
BOM对象模型： 浏览器对象模型 window--location document history navigator screen window对象常见的方法 ： 两个定时器 ： setInterval setTimeout open() window对象特点 ： location对象 document对象 ： 操作样式、属性、内容 非行内样式值获取 ：getComputedStyle .style.样式
---
1、内置对象
Array
数组的操作方法 ：
push pop shift unshift splice slice reverse concat join sort
扩展方法 ： forEach map filter indexOf reduce
数组去重
数组排序
String
操作方法 ：
charAt charCodeAt String.fromCharCode
indexOf lastIndexOf
substr substring slice
concat
toLowerCase toUpperCase
split
Math :
随机整数获取
取整方法 ：ceil floor round
Date
日期定义 获取日期 设置日期时间格式
BOM 和 DOM
BOM ：浏览器对象模型 window --- location history document navigator screen
window对象的特点 ： setTimeout setInterval open() alert confirm prompt
document对象 :
DOM : 文档对象模型
DOM操作:
增
createElement
appendChild insertBefore
删
remove removeChild
改
改样式
obj.style.样式
obj.className
obj.style.cssText = "color:red";
改属性
非自定义属性： obj.属性
自定义属性 ： obj.getAttribute() / setAttribute()
改内容
obj.innerHTML / innerText / value
查
获取元素方法
getElementBy....
querySelector...
---
1、事件对象 2、对象的定义 ： e || event 3、兼容 4、鼠标事件对象属性 坐标属性 pageX/Y clientX/Y x/y offsetX/Y screenX/Y 5、button 6、获取键盘按键值 keyCode || which 功能键 ： 7、事件流 ： 冒泡 捕获 8、事件监听 addEventListener onclick 区别
---
1、事件委托
好处 ： 提高程序执行效率 动态添加元素添加事件
2、实现 ： 事件源获取、判断
3、offset家族属性 ：
offsetWidth/height
clientWidth / height
获取实际宽度 ： 对象.style.width 非行内 ：
offsetLeft/offsetTop
4、json
对象.键 [键]
for..in 遍历json
5、onmouseenter 和 onmouseover
6、onload
--
1、事件
事件对象的创建
事件中的兼容 ： 事件 事件冒泡 取消浏览器的默认行为....
事件冒泡和事件捕获 ：
事件的三个过程 :事件捕获 事件目标阶段 冒泡
事件监听:
事件委托:
鼠标事件对象的坐标属性 ：offsetX
2、json
定义 { }
取值 json[""] json.键
3、拖拽
onmousedown onmousemove onmouseup
4、正则
单字符 . \ | ^ $ 组合 \d \D \w \s 量词 + ? * 括号 {} [] ()
---
正则中的几个操作方法： test() exec() 正则的方法 可以操作正则 可以操作正则的字符串方法： search match replace es6中的常见语法格式 ： let 块级作用域 const 定以后值不可以改变 改变this指向 ： apply call bind for...of 字符串模板 `` 箭头函数 不支持bind 解构赋值 set集合 自动去重 map集合 class定义的构造函数 Symbol类型 generator函数 * Array.from() Array.of() Object.assign()
---
事件对象：
鼠标事件对象的属性：
e.offsetX offsetY
pageX/clientX
兼容问题 ：
事件对象创建 ： e || event
阻止事件冒泡
阻止浏览器的默认行为 preventDefault
事件源获取 ： target || srcElement
键盘按键值 ： keyCode || which
事件冒泡和事件捕获
事件监听 addEventListener 和 不同添加事件
addEventListener("click") 和 obj.onclick = function(){} 区别：
事件委托
json对象：定义和获取
拖拽 ：
scroll家族属性: 获取页面滚走距离
document.documentElement.scrollTop || document.body.scrollTop
或者
widnow.scrollY
offset家族属性 :
obj.offsetLeft/offsetTop/Width/Height
正则:
定义 ：
var reg = /^$/ 或 var reg = new RegExp("\\w",修饰符"ig");
特殊字符 ：
. \ | ^ $ + ....
下面哪些是正则对象的方法 ：test exec
可以操作正则 ： test exec replace seach match
es6:
let 块级作用域 { }
const 常量定义的关键字，如果变量在执行的过程中不会发生变化，也可以使用const const btn = document.getElementById()
箭头函数
解构赋值
改变this指向的方法：
将伪数组转数组：
dom操作高级
匀速--缓冲--多物体--链式--完美
var timer = null;
function move(obj,json,cb){
clearInterval( obj.timer )
obj.timer = setInterval( ()=>{
var flag = true;
for( var attr in json ){
var current = parseInt( getStyle( obj,attr ) );
//判断透明度
var speed = (json[attr]- current)/10;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor(speed);
if( json[attr]!= current ){
flag = false;
}
//判断透明度
obj.style[attr] = current + speed + "px"
}
},30 )
if(flag){
clearInterval(obj.timer);
if( cb ){
cb();
}
}
}
//获取一个元素实际样式值
function getStyle(obj,attr){
}
16
原文地址：https://www.cnblogs.com/yuanjili666/p/11350441.html
时间： 2024-11-10 13:16:04