JS基础
2018-09-07 16:48:11 1 举报AI智能生成
JS基础大全导图
作者其他创作
大纲/内容
JS学习书单
1.JavaScript DOM编程艺术
锋利的jQuery
JavaScript高级程序设计
JavaScript语言精粹
ECMAScript
注释
//单行注释
/*多行注释*/
JSDoc注释
变量
变量名
区分大小写
首字母必须是字母、_、$
非关键字和非保留字
关键字
break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
比较运算符，boolean类型
new
return
switch
this
throw
try
typeof
var
void
while
with
保留字
boolean
abstract
子主题
byte
char
一个字节8位
class
const
常数；不变的
debugger
子主题
double
export
出口；输出
enum
extends
延展
final
float
goto
implements
工具；手段
import
let
int
2个字节，16位
interface
接口
long
4个字节，32位
native
本国的；天生的
package
private
protected
public
short
static
静止的
super
synchronized
同步的
throws
transient
短暂的；临时的
volatile
易变的；不稳定的
全局变量和局部变量
数据类型
基本类型
Number
数值类型
Int
Float
NaN
数值转换
Number()
parseInt
把字符串转为数值
parseFloat
数值范围
isFinite()
数学函数
JS内置的Math对象
Math.?
String
索引从0开始
type.charAt(i)
Boolean
！(取反)操作符
console.log(!1)//false
console.log(!1)//true
console.log(!!-3.14)//true
console.log(!!' ')//true
console.log(!![])//true
console.log(!!{})//true
console.log(!0)//true
console.log(!'')//true
console.log(!NaN)//true
console.log(!null)//true
console.log(!undefined)//true
console.log(!8-1)
-1
Null
var a = null;
typeof null为啥是object
历史遗留问题。。
Undefined
var a;
引用类型
对象字面量//推荐
键值对
读操作
bottle[x]
‘isKeepWarm’:true
bottle['isKeepWarm']
bottle.x//推荐
写操作
bottle.x=149;
bottle[x]=1;
构造函数
var a = new Object()
Object
数组
数组字面量
var bottles=['绿','蓝','紫']；
读操作
bottles[index]
写操作
bottles[0]='黄';
bottles.length=4;//不推荐
则bottles[3]打印出来为undefined；
Array构造函数
var bottles = new Array('绿','蓝','紫');
数组常用方法
push()
末尾加
pop()
末尾减
shift()
开头减
unshift()
开头加
slice()
选取
splice()
选取/剪切原数组
concat
合并
排序
reverse
倒序
sort
默认升序
降序
.sort(function(a,b){
return b-a；
})
return b-a；
})
随机排序
.sort(function(){
return 0.5 - Math.random();
});
return 0.5 - Math.random();
});
测试是否符合条件
every()
每个数据都要满足条件，则返回true
some()
任何一个数据满足条件，则返回true
includes()
判断当前数组是否包含某指定的值，返回true或false
filter()
条件筛选
返回所有满足条件数据组成的数组
让每个人都干点啥
forEach()
数组的每个元素执行一次提供的函数，该方法没有返回值
map()
创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数
其他
indexOf、join等等
函数
函数构造
function关键字
函数名
参数
函数体
返回值
函数声明
function countB(color){}
Javascript Hoisting
函数表达式
var countB = function (color){}
作用域
全局作用域
函数作用域
全局变量
a=0
局部变量
var a=0;
运算符
算术运算符
+
-
*
/
%
++/--
自增
自减
赋值运算符
=
复合赋值运算符
+=
-=
*=
/=
%=
比较运算符
>
<
>=
<=
==或===
相等/严格相等(包括类型的比较)
!=或!==
不相等/严格不相等(推荐使用)
逻辑运算符
！（逻辑非）
&&（逻辑与）
||（逻辑或）
流程控制
if语句
三元运算符//简单时候用
判断条件？(条件为真时执行):(条件为假时执行)
switch语句
循环
while语句
do-while语句
至少执行一次
for语句
for-in语句
break语句
continue语句
BOM
window
global
窗口身份
系统对话框
alert
confirm
prompt
location
属性
hash
host
hostname
href
pathname
port
protocol
search
方法
assign()
reload()
replace()
navigator
userAgent
platform
history
属性
length
方法
back()
forward()
go()
DOM
node
nodeType
Element
var div = document.creatElement('div')
div.id='biu'
div.className='biub'
Attr
Text
CDATASection
EntityReference
Entity
ProcessingInstruction
Comment
Document
DocumentType
DocumentFragment
Notation
nodeObject.nodeType
nodeObject.nodeName
nodeObject.nodeValue
DOM查找
document.getElementById();
[document | Element].getElementsByClassName();
[document | Element].getElementsByTagName();
[document | Element].querySelector();
[document | Element].querySelectorAll();
DOM新增和删除
新增
DocumentFragment
appendChild()
insertBefore()
删除
removeChild()
DOM修改
property和attribute
1.公认的attribute会映射到property
2.读写方式
修改样式
$0.className='blue';
$0.style.color='blue';
浏览器接口
classList
$0.classList.remove('red');
$0.classList.add('blue')
修改内容
innerHTML
outerHTML
DOM遍历
HTMLcollection
.children
parentElement/parentNode
访问兄弟节点
previousElementSibling
previousSibling
回调函数
事件
事件处理程序
h1.addEventListener(type,handle,false)
h1.remove.EventListener(type,handle,false)
事件对象
function(event){}
event.stopPropagation()
事件兼容性初探
事件模型
事件对象
获取对象的方式不同
事件对象几个常用的属性和方法也不标准
跨浏览器事件
封装了on函数
绑定事件的历史演进
事件类型
鼠标类
click
mousedown
mouseup
mouseenter
mouseleave
mouseover
mouseout
mousemove
键盘类
keydown
keypress
keyup
UI类事件
load
unload
resize
scroll
jQuery简单教程
$
选择器
基本选择器
$(tag)
$(.class)
$(#id)
$(*)
组合选择器
$(selector1,selector2)
$(selector1 selector2)
$(selector1>selector2)
$(selector1+selector2)
其他选择器
$(selector : first-child)
$(selector : last-child)
$(selector : eq(index))
$(attribute = value)
遍历DOM元素
添加和删除DOM元素
新增
删除
jQuery事件监听
HTML中引入JS的方式
行内
外链
内嵌
0 条评论
下一页
