javaScript
JavaScript是一门流行脚本
快速入门
跟css一样,可以直接写在html中,放在script标签中
alert可以弹出弹窗,内容用单引号
引入的时候一定要成对出现,不能自闭和
基本语法入门
-
变量:类似于python,变量不用写类型,这里统一写var,所有的变量都用var定义。如果不使用var直接写也不会报错,但是会成为全局变量,可能以后会出现问题。
ES6中一般使用let定义局部变量,与var其实一样
var 变量名=值
-
调试要在控制台中进行
console.log()在控制台中打印变量
数据类型
数值,文本,图形,音频,视频。。。
number
js不区分小数与整数,都是number:123 12.3 10e3 -99 NaN(not a number) Infinity(无限大)
字符串
'abc' "abc"
-
多行字符串编写:用``包住内容
-
模板字符串
let name = "zheng";
let msg = `你好,${zheng}`;//结果为:你好,zheng。不需要用+
- 字符串长度str.length
- 字符串下标,可以直接用str[]数组方式取出字符
- 大小写:方法toUpperCase,toLowCase
- indexOf(查找),substring(截取)
bool
true false
逻辑运算
&& || !
比较运算符
=
== 等于(类型不一样,值一样也会为true(比如数字1和字符1))
===绝对相等(要求类型也一样)
NaN===NaN结果为假
null,undefined
空与未定义
数组
一系列对象,类型可以不相同
如果下标越界了,会给出undefined
var定义
- 输出:可以直接输出数组
- 长度length,可以通过给长度赋值改变数组大小
- indexOf,slice(截取,返回一个新数组),push,pop,unshift(头部添加),shift(头部删除),sort,reverse,concat(拼接数组,返回新数组),join,
对象
var定义
对象是大括号,数组是中括号
Person person = new person;
//js如下
var person = {
name:"zheng",
age:3,
tags(标签):['js','java']
}
//每个属性后要加逗号,最后一个不用
-
取对象的值:person.age
-
使用一个不存在的对象属性不会报错
-
动态的删减属性 delete
-
动态的添加 直接赋值
-
判断属性是否在这个对象中 xxx属性 in xxx对象(包含继承的)
-
判断一个属性是否是这个对象自身拥有的hasOwnProperty
Map和Set集合
Map
var map = new Map(['tom',100]);
var name = map.get('tom');
console.log(name);//得到100
//通过key得到value
//设置set,删除delete
Set
add delete has
iterator
for循环
forEach循环
通过for of(得到内容)/ for in(得到下标)
一般用of,in有bug
var arr = [3,4,5]
for(var x of arr){
console.log(x)
}
函数
定义函数
方式1
function 方法名(参数){
}
方式2
var abs = function(参数){
}
调用函数
js中传入任意数量的参数都不会报错
解决方法
可以用arguments.length得到参数长度,arguments包含传入的所有参数
rest可以获得除了已经定义的所有的参数 function abs(a,b, ...rest),从第三个开始都会进入到rest中
可以用typeof判断传入的参数类型,如果错误可以直接手动抛出异常
变量的作用域
在js中,var定义的变量时有作用域的
在函数体内声明,函数体外不能用(想要实现的话要用闭包)
内部函数可以访问外部函数的成员
如果内部变量与外部变量重名,从内向外查找
规范:所有变量定义在函数的头部,便于代码维护
默认所有的全局变量都会绑定在window对象上
alert本身也是window的一个变量
规范:防止多个文件调用全局变量导致冲突,一般不把全局变量绑定到window上
//唯一全局变量
var App = {};
//定义全局变量
App.name = "zheng";
App.add = function(a,b){
return a+b;
}
//把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域let,放入for循环中,循环语句外的不能使用
常量const,ES6才有,之前是约定纯大写字母命名的变量就是常量(其实可以修改)
方法
this是指向调用他的对象
apply可以控制指向的对象
JSON对象
是一种数据传输格式
在js中一切皆为对象,任何js支持的类型都可以用JSON表示
格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key : value
可以使用JSON.stringify将对象转换为JOSN对象
使用JSON.parse将JSON对象转换为对象
JSON与JS对象的区别
var obj = {a: 'hello' , b: 'hellob'};
var json = '{"a": "hello" , "b": "hellob"}';//本身是一个字符串
面向对象
js中的类叫做原型proto
老版js想要继承要用xiaoming. __proto__ = student,意思为小明的原型是学生
class关键字是在ES6后引入的,可以直接定义类
constructor(name){}//构造器
hello(){}//方法
创建实例对象的方法与java相似
继承:extends与java一样
操作BOM对象:
BOM:浏览器对象模型
window代表浏览器窗口
- 可以获取内外的高度与宽度
screen代表屏幕的尺寸
- 获取屏幕的高度宽度
location代表当前页面的URL信息
- 协议protocol
- 刷新网页reload:f reload()
- 设置新的地址location.assign('新的网址')
document代表当前的网页
- title标签的名字
- getElementById获取具体的文档树节点
- cookie获取面包碎
history网页历史记录
- back返回
- forward前进
操作DOM对象
DOM:文档对象模型
整个浏览器网页就是一个DOM树形结构
- 更新:更新DOM节点
- 遍历DOM节点:得到DOM节点,上面BOM对象可以通过Id等信息得到节点
- 添加/删除一个DOM节点
获取DOM节点
要操作一个DOM节点就要先获得他
document.getElementsById/TagName/ClassName
.chileren可以获取父节点下的所有子节点,firstChild,lastChild
更新节点
对象名.innerText修改文本的值
.innerHTML可以解析HTML文本标签
.style的一系列方法可以改变样式
删除节点
先获取父节点(.parentElement),再通过父节点删除自己 .removeChild(子节点)。子类保存在父类的children数组中
删除节点的时候,children数组是在时刻变化的
插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖
追加append
创建creatElement,使用.id赋值id,还可以创建一个script标签
newP.setAttribute('id','newP');
//等价于
mewP.id = 'newP';
使用insertBefore可以插入到某一个标签的前面
a.insertBefore(b,c) a要包含bc节点,把b插到c的前面
替换节点
replace
操作表单(验证)
表单form,本身也是DOM树的一个节点
- 文本框 text
- 下拉框 select
- 复选框,单选框 checkbox,radio
- 隐藏域 hidden
- 密码框 password
- .......
表单的目的就是提交信息
//用button替换submit,button绑定一些判定函数
<button type="button" onclick="">提交</button>
//onclick为被点击
获得提交的信息
DOM定位
.value得到值
.value = 可以赋值
对于单选框,多选框等固定的值,用value只能取到当前的值。用.check可以检测是否被选中
jQuery
jquery里面存在大量的javascript函数
公式: $(selector).action() 选择器就是css选择器
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//类选择器
时间
鼠标事件,键盘事件,
当网页元素加载完毕后响应事件
$(function(){ });
严格检查模式strict
在js的第一行加入加入一行 'use strict' 就可以打开这个模式
结语
巩固js 看jQuery源码,看游戏源码
巩固HTML,CSS 扒网站,对应修改看效果