1 简介
一种浏览器脚本语言
ECMAScript时JavaScript的标准,目前已经到6了,但是目前主流浏览器只支持5,所以需要转换工具将6的语法转换成5的
2 QuickStart
html中的<script>
中,或者js文件中直接写,然后使用<script>
引入。注意:该标签没有自闭合
注意:引入的js编码是否和项目相同,不相同则出现乱码问题。
注释同java一样
3 类型、运算、变量
- number:所有的数字,整数、小数、科学计数法等,特殊:NaN(不是数字)、Infinity(无穷大)
- 字符串:使用单引号或者双引号
- 布尔:true|false
- 逻辑运算:&& || !(无短路运算)
=、==、===(保证类型一样)、>、<、!=
- null(空)
- undefined(没定义)
- 数组(任意类型)
- 对象:{},键值对行式,逗号分隔
注意:NaN参与逻辑运算都是false,只有isNaN()才会使true
注意:判断小数是否相等时,可以使用差值小于一定值方法判断,不可使用==
判断
注意:数组下标越界为undefined
变量:数字、字母、下划线、$组成,不能以数字开头,如果变量以var
开头为局部变量,否则为全局变量,注意:var
是伪局部变量(作用域会穿透函数!),可以使用let
来定义真局部变量。
var/let区别
var:只有两个作用域:全局和函数
let:新增块级作用域
const区别:定义和赋值同时!一旦赋值不可改变,引用数据类型不可改变指向,可以改变指向对象中的属性
typeof
可用来判断变量类型
3.1 字符串
转义字符:\
\'
\n
\t
\u4e2d \u#### Unicode编码
\x41 Ascll字符
长字符串:
var a = `abc
mn
ooo`
模板字符串(es6):
var name = "xiaopi3"
var b = `你好${name}`
字符串方法:
1. indexOf(src,indexFrom) //从_位置开始往后找src首次出现的位置
2. replace(src,dst) //将src替换成dst
3. charAt(i) 返回第i索引字符
4. indexOf(str)返回第一个子串位置,无-1
5. lastIndexOf(str)
6. split(str)
7. substring(st_i,ed_i)返回索引间字符串
8. toLowerCase()
9. toUpperCase()
注意:对一个字符串的下标取值是只读的,赋值虽然不报错,但是无效
3.2 数组
可以包含任意类型,长度可变,多出来的是undefined,少的直接消失,数组遍历也可以用for of
数组定义:
- 变长:var arr=new Array();
- 定长:var arr2=new Array(3); 注意:定长后只能写三个
数组方法:
var arr = [1,2,3,4,5]
// 取值
arr[0]
// 查找元素
arr.indexOf(2)
// 切片,需要返回值
var x = arr.slice(0,2)
// 尾部添加元素
arr.push(9)
// 尾部删除元素
arr.pop()
// 头部添加
arr.unshift(5)
// 头部删除
arr.shift()
// 排序,需要返回值
var x = arr.sort()
// 反转
var x = arr.reverse()
// 拼接
var x = arr.concat([1,2,4])
// 转换成字符串,可指定连接符
var x = arr.join("-")
3.3 对象
赋值:对象名.key=value,key和value都是之前不存在的
删除:delete 对象名.key
继承:对象的继承通过原型
注意:对象中试图获取不存在的属性,不会报错,但是可以用if判断,如果属性不存在,则为false,但要注意value为false的情况,更推荐使用:"key" in 对象
去判断该对象是否存在key属性,但是要注意该属性有可能是继承得来的,如果需要判断当前对象中是否存在自身本对象的某个属性:对象.hasOwnProperty("key")
对象遍历:可以使用for in
3.4 Map和Set
es6新特性
Map:相当于键值对集合
var map = new Map([["a",1]["b",4]["c",0]])
// 获取值
map.get("a")
// 赋值
map.set("a",12)
// 删除
map.delete("a")
// 遍历,拿到的是一个键值对,注意:只适用于实现了迭代器的对象,array|{}没有实现,所以不能使用
for(let x of map){}
Set:相当于去重集合
var set = new Set([4,11,1,11,4])
// 添加
set.add(12)
// 删除
set.delete(4)
// 判断包含
set.has(3)
// 遍历
for(let x of map){}
4 严格检查模式
在js代码最开始,第一行,书写:'use strict'
可以用作代码检查,前提是编辑器使用es6语法
5 流程控制
判断、循环等都和java一样,特别的:
遍历:
// 如果xxx为数组,则遍历的索引
// 如果为对象,则遍历key
for(var num in xxx){}
// 遍历数组,打印值
for(var num of xxx){}
// 或
xxx.forEach(function(){})
6 函数
定义:
var x = function(){}
// 或
function x(){}
函数参数:
函数内部arguments
是一个关键字,表示函数的传入的参数列表。函数参数列表不一定要和传入的参数列表长度相同!!
可变长度参数:...变量
(es6)
function f(x,y,...a){console.log(a}
全局函数:全局函数不属于任何一个内置对象。
JS 包含以下 7 个全局函数,用于一些常用的功能:
escape()
unescape()
eval() 执行代码
isNan()
isFinite()
parseFloat()
parseInt()
var s="1+2+3";
eval(s);//只能计算可计算的,数字与字符相加不可计算。
setTimeout("func()",1000);系统调用函数,每隔特定事件触发函数
6.1 变量作用域
在函数内定义的变量是独立的,无法穿透到外部,除非使用闭包
作用域提升:在相同作用域下,var定义的变量会被提升到顶部,但是赋值不会,所以会导致一些奇怪的现象。使用let不会,定义处之前的调用都报不存在错误。
所有全局变量都会绑定到window
对象上,该对象中的方法和属性可以直接使用。为了防止变量冲突,建议定义一个唯一的全局变量,其他的都定义在这个变量里即可
var all = {}
all.a=123
all.func1=function(){}
6.2 构造函数
构造函数用来构造一个对象,包括属性和方法
function person(name,age){
this.name=name;
this.age=age;
function speak(something){
...
}
this.func=speak;
}
var p1=new person("jack",12);
p1.func("asdfads");
7 this
this的指向于调用者有关,谁调用this,this就指向谁
apply:可以修改this的指向,所有函数都有这个方法
// 将需要this指向的目标对象传进去就可以了
fun1.apply(目标对象)
8 常用对象
typeof
关键字可以用来判断一个对象的类型:
typeof 123 // 'number'
typeof true // 'boolean'
8.1 Date
日期类,可以获取当前时间日期,可以设置时间日期
1. getTime()方法,返回 1970 年 1 月 1 日至今的毫秒数。
2. getFullYear() 从 Date 对象以四位数字返回年份。
3. getMonth() 从 Date 对象返回月份 (0 ~ 11)。**需要+1**
4. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
5. getHours() 返回 Date 对象的小时 (0 ~ 23)。
6. getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
7. getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
8. getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。**星期日:0**
new Date(时间戳) // 获取时间戳代表的日期对象
该类没有格式化方式
8.2 JSON
格式:
对象:{}
数组:[]
所有的key都是字符串
对象转json:JSON.stringify(对象)
json转对象:JSON.parse(json字符串)
8.3 Math
Math对象包括以下方法:
PI
abs(x)
cos(x)/sin(x)
exp(x)
floor(x)小于等于的最大整数
ceil(x) 大于等于的最小整数
log(x)
max(x)
min(x)
pow(x,y)
random()
sqrt(x)
8.4 Function
示例:
function say(name,age){
alert(name+" "+age);
}
say("pp",3);
直接new Function对象:
var sayFunc=new Function("name","age","alert(name+' '+age)");
sayFunc("pp",5);
Function属性:
返回参数个数:sayFunc.length
返回方法:sayFunc.toString()
or sayFunc.valueOf()
9 面向对象
9.1 创建对象
对象初始化器
var m={
name:"m",
age:2,
shout:function(){
alert(name+" "+age);
},
action:function(){
alert("吃");
}
};
alert(m.name);
m.shout();
构造方法
function m(name,age){
this.name=name;
this.age=age;
this.shout=function(){
alert("wo"+this.name+" "+this.age);
};
this.action=function(){
alert("吃");
};
}
var m=new m("m",2);
alert(m.name);
m.shout();
9.2 对象属性
-
对象属性
必须new出来才能调用 -
私有属性
只能用闭包取出来 -
类属性
类似java静态变量,可以用类名调用
function C(){
this.objPro="对象属性";
C.prototype.objPro2="对象属性2";
var privatePro="私有属性";
}
C.classPro="类属性";
alert(C.classPro);
var c=new C();
alert(c.objPro);
alert(c.objPro2);
方法
function C(){
var privateFunc=function(){
alert("私有方法");
};
privateFunc();
this.objFunc=function(){
alert("对象方法");
};
C.prototype.objFunc2=function(){
alert("对象方法2");
};
}
C.classFunc=function(){
alert("类方法");
};
9.3 继承
传统继承分为两种:
一种是相当于方法和属性的拷贝,在调用时是直接访问父类方法和属性;
一种是原型的继承,在访问时是调用子类的方法
// 原对象
function Animal(name,age){
this.name=name;
this.age=age;
this.shout=function(){
alert("我是:"+this.name+",今年:"+this.age);
};
this.action=function(){
alert("会吃");
};
}
// 拷贝,new Dog("pp",12)会发现就是拷贝了
function Dog(name,age){
Animal.apply(this, [name,age]);
}
// 原型
Dog.prototype=new Animal();
原型继承的其他写法:
对象1.__proto__=对象2
:对象1继承了对象2,可以调用对象2中的属性和方法,遵循就近原则
如果是函数:func1.prototype.新方法 = 方法体
可以给func1新增一个方法
class继承(es6引入):
class A extends B{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){}
}
// 使用
new A()
9.4 多态
function Animal(){
this.say=function(){
alert("我是动物");
};
}
function Dog(){
this.say=function(){
alert("我是狗");
};
}
Dog.prototype=new Animal();
function Cat(){
this.say=function(){
alert("我是猫");
};
}
Cat.prototype=new Animal();
function say(animal){
if(animal instanceof Animal){
animal.say();
}
}
var dog=new Dog();
var cat=new Cat();
say(dog);
say(cat);
9.5 对象增强写法
es6后支持这种方式定义对象,name会获取外部name的值作为对象的值,方法也不用写function了
let obj = {
name,
age,
run(){}
}
10 BOM
浏览器对象:
window______document:文档
|___history :浏览历史
|___location:地址栏
10.1 Window对象
window是js中默认对象,所有对其引用可以省略
Window.location=url;
直接改变浏览器当前地址,相当于跳转
1. alert() //弹出消息框
2. confirm() 弹出确认对话框
3. prompt()
4. setTimeout("func",ms) //定时执行一次
5. setinterval("func",ms)//执行多次
6. open(url,windowName,paras) 打开JS小个窗口
7. window.onload=... //发生在文档全部下载完毕的时候。
8. window.onresize=... //发生在窗口大小发生变化的时候。
9. close() 关闭当前窗口
10.showModalDialog(url,windowName,paras) 模式对话框,阻塞线程
11.returnValue 对话框返回值
12.dialogArguments 对话框参数
onload事件和onresize事件是标签属性,同时window也支持该事件
10.2 navigator对象
浏览器相关信息,可以被人为修改,不建议使用该对象
10.3 screen对象
获取屏幕相关信息
10.4 location(重要)
代表当前页面的url信息
host // 网址
href // 域名+网址
protocol // 协议 https
location.assign(网址) // 重定向
10.5 document
document.cookie
可以获取网页的cookie
服务端可以设置cookie:httpOnly
,这样就不能取出来
10.6 history
代表浏览器的历史记录
window.history.go(n)
:n为当前页的偏移量,正负零,需要存在浏览历史。
history.back()
:后退
history.forward()
:前进
10.7 模态对话框
str=window.showModalDialog("a.html","sss","dialogTop:100;dialogLeft:100;dialogWidth:20;dialogHeigh:5,scroll 1;status:0");
解释:
1–url
2–浏览器传递给对话框的一个对象数据,对话框可以通过window.dialogArguments
取得
3–特征参数,由逗号分割
常用特征参数
dialogHeight>=100px
dialogWidth
diaologLeft
diaologTop
center:{yes|no|1|0} yes
help:{yes|no|1|0} yes
resizable:{yes|no|1|0} no
status:{yes|no|1|0} yes(modeless) no(model)
scroll:{yes|no|1|0|on|off} yes
11 DOM
document_________links[]:超链接
|______anchors:锚点
|______images :所有标记
|______forms :所有form标记
|_____form elements :form中所有控件集合
HTML标记对象
任何标记都是DOM对象,具备:nodeName/innerHTML/innerText等属性
常用操作dom的方式:
// 通过id来获取dom节点
var id1 = document.getElementById("id1")
// 获取父节点
var parent = id1.parentElement;
// 获取第一个子节点
var child = parent.childern[0]
// 移除一个节点(自己不能移除自己)
parent.removeChild(id1)
// 插入节点
parent.appendChild(id1)
// 创建节点,创建一个p标签,然后可以将这个标签放到其他标签里
var p = document.createElement('p')
p.id = "pid"
p.innerText = "hello p"
// 自定义赋值标签属性,将p这个元素的属性名为xxx的值赋为yyy
p.setAttribute("xxx","yyy")
12 事件
click事件
除button外,超链接、submit按钮、reset按钮都有click事件,但有内置事件处理,同时也可以添加事件。【自定义事件若返回true则执行默认事件,否则取消】。
鼠标事件
onMouseOver
进入范围触发
onMouseOut
离开范围触发
onMouseMove
移动鼠标触发
onchange
主要针对文本框类标记,textbox textarea select 等,当内容改变,则触发事件。
键盘事件
主要针对与字符输入相关的标记,如文本框
onKeyDown
onKeyUp
onKeyPress
表单提交事件
form上的提交属性:onsubmit
当onsubmit="return false"
时,表单提交被拦截!!
对于使用前端做md5加密时,可以设置隐藏域,因为md5加密后密码变长,会在页面密码框中显式看出边长,不利于用户体验。使用隐藏域来,将变长的密码放在隐藏域,然后name=password,显式的密码框不设name,这样是最优的解决方案
13 JQuery
JavaScript方法库
相关文档参考:http://jquery.cuishifeng.cn
可以选择引入静态文件,也可以选择引入CDN
百度的CDN:<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
使用格式:$(选择器).动作(函数)
// 绑定到按钮bt
$(#bt).click(function(){alert("click"})
13.1 入口函数
$(document).ready(function(){})
// or
$(function(){})
13.2 操作DOM
<ul id = "test>
<li class = "js">abc</li>
<li name = "py">py</li>
</ul>
// 操作里面的文本
// 获取值
var a = $('test li[name=py]').text();
// 设置值
$('test li[name=py]').text("js");
// 操作html
$('test li[name=py]').html(...);
// 操作css
$('test li[name=py]').css({"color":"red"});
// 显隐
$('test li[name=py]').show()
$('test li[name=py]').hide()
// 显隐切换
$('test li[name=py]').toggle()
$(window).width()
学习参考:
源码之家可以看游戏源码
Layui(Layer可以学习以下)