javaScript

JavaScript是一门流行脚本

快速入门

跟css一样，可以直接写在html中，放在script标签中

alert可以弹出弹窗，内容用单引号

引入的时候一定要成对出现，不能自闭和

基本语法入门

1. 变量：类似于python，变量不用写类型，这里统一写var,所有的变量都用var定义。如果不使用var直接写也不会报错，但是会成为全局变量，可能以后会出现问题。

   ES6中一般使用let定义局部变量，与var其实一样

   var 变量名=值

2. 调试要在控制台中进行

   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']
}
//每个属性后要加逗号，最后一个不用

1. 取对象的值：person.age

2. 使用一个不存在的对象属性不会报错

3. 动态的删减属性 delete

4. 动态的添加 直接赋值

5. 判断属性是否在这个对象中 xxx属性 in xxx对象（包含继承的）

6. 判断一个属性是否是这个对象自身拥有的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树的一个节点

1. 文本框 text
2. 下拉框 select
3. 复选框，单选框 checkbox,radio
4. 隐藏域 hidden
5. 密码框 password
6. .......

表单的目的就是提交信息

//用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 扒网站，对应修改看效果

__EOF__

本文作者：Zaughter
本文链接：https://www.cnblogs.com/zaughtercode/p/17062948.html
关于博主：qq:1730119093 欢迎加我讨论
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！