javascript学习笔记

概述

简介

javascript是基于面向对象和事件的脚本语言
基于面向对象：就是说是在js中已经帮我们内置了很多对象，我们可以直接使用。
脚本语言：嵌入在其他语言中的语言
历史发展：livescript到javascript
W3C制订标准：ECmascript

语言特点及与java的区别

js和java没有任何关系，仅仅是语法上抄袭了 java的语法
js直接由浏览器解析执行
js是一个弱势语言
js运行于一个叫沙箱的环境中，不允许和硬盘有任何交互（出于安全考虑，否则不怀好意者可通过用户访问网页对用户的硬盘信息做出修改，这是绝对不被允许的）
js基于对象，java面向对象
在html页面中书写时js采用的标签是script，java采用的标签是<% %>

javascript的组成

javascript=ECmascript+bom+dom
ECmascript：主要规定了js的语法，变量声明。
Bom：browser Object Model 浏览器对象模型。在js中内置了一个顶级对象window，浏览器对象，相当于java 中的Object类。从window衍生出来的一系列子对象合起来就称为Bom模型，包括一些Bom事件。
Dom：document object model 文档对象模型，在此模型中document是顶级对象，document是window的子对象。Dom就是把一个html文件看作一个dom树，html文档中的每个成分都是节点，根节点是html标签，节点之间就有了父子兄弟关系。

javascript和html结合方式

有三个位置：
1.在开始标签当中采用事件来书写
2.在页面中采用script标签来书写
3.建立外部js文件(charset属性规定文件的编码方式，遇到乱码可尝试如此解决)

javascript语法

注释：同java

//单行注释

/*
多行注释
*/

变量：js把内存作为一个整体，不像java将内存分成栈，堆等
定义变量：var 英文variable，由于弱势语言特性，不写var也可
let 定义变量
const定义常量，不可再赋值
var定义和let定义的区别：
var定义的变量也是window对象的子对象，而let定义的不是
var定义的变量可以重复定义，而let不行
var定义的变量是全局变量，let是局部变量

var x = 20;
let y = "aaa";
const A = "bbb";

数据类型：
分为两类：
基本类型：6类
undefined：变量没给值时候的类型
String：字符串类型
number：数字类型
boolean：真假类型
function：函数类型
null：空类型
采用typeof()可以判断变量的具体类型
对象类型：Object
类型转换：
其他类型转String：+""即可
字符串转number：parseInt()，parseFloat()或者*1
其他类型转换为boolean类型：非0为真，0为假，undefined也为假
运算符：大都同java
js没有整数相除不会自动去尾，即除不尽就会出现小数。
关于=的不同：

==比较的只是内容而与类型无关（123=="123";true;）
===比较的是内容和数据类型(123==="123";false;)

三种结构：大都同java
js中的foreach：
for(var a in 对象){} 含义是对对象的所有属性进行循环
for(var a of 对象){} 含义同java
**函数的定义：**函数就是java中的方法。浏览器不能直接执行函数，必须通过事件或手动进行调用
定义方式：
使用function定义：function 函数名(){函数体}
匿名函数：
var f=function(){}; 采用f()方式调用。
var f=（）=>{}; 采用f()方式调用。

函数定义的时候注意的问题：
函数的调用与参数无关，js引擎是根据方法名来调用，与参数无关。
在js中没有重载概念，因此函数不能重名

js常用的内置对象

array数组对象
定义数组
1.采取new的方式 var list = new Array;定义了一个数组，初始长度为0
2.var list = [];
特点：
数组长度是动态变化的
数组的元素可以是任意对象
数组的下标理论上可以是任意对象，原因是js中没有二维数组的概念
方法：
push：在数组末尾添加一个新的元素
shift：删除首个元素并将所有元素前移再返回数组的第一个元素
join：用指定的参数将数组的元素链接为一个字符串。不传参意味着用逗号串链接
sort：排序
String对象
innerHTML：表示开始标签和结束标签之间的HTML代码
innerText：表示开始标签和结束标签之间的文本
Math对象：完全同java
random（）：0~1之间的随机数，可以等于0，不能等于1
ceil（）：向上取整
floor（）：向下取整
Data对象：
new Date()；
getXXX方法
toLocaleDateString（）；符合习惯的时间显示格式
getFullYear（）；正常年分获取方法(不需要加或减)

BOM

Bom对象

Bom：browser Object Model 浏览器对象模型。
window：根对象，代表一个浏览器对象
三种弹出框：
消息框：alert()
确认框：confirm()
输入框：prompt()
open方法：特征
两个计时器：
setTimeout()：倒计时秒表，归零自动销毁
setInterval()：同为倒计时秒表，但不会自动销毁，会持续计时（负数），每次调用都产生一块新表
js调用HTML及css
js调用HTML只能采用innerHTML属性
js调用css方式有两种：
第一种：采用style对象调用，后面直接写css属性
注意：在调用css属性时，如果属性是由多个单词组合而成，此时必须将单词之间的-去掉，后面单词首字符大写
第二种：采用className属性。用来指定类选择器的名字。
this关键字：this写在那个标签中就代表了那个标签对象。
location：用于向服务器发送一个指定的请求
属性：
href：请求目标地址
paehname：获取当前访问的URL
reload（）：刷新页面
history：历史对象。会记录访问过的页面，将页面按顺序把地址保存在history对象中。
back（）浏览器后退按钮
forward（）浏览器前进按钮
go（）：去指定的某个页面，参数为整数，正值向前，负值向后，都是相对于当前页面的0

事件

页面加载和关闭事件
onload：body标签属性，初始化网页
onunload：body标签属性，关闭网页
鼠标事件：
onmousemove：鼠标移动
onmouseover:鼠标进入HTML元素
onmouseout:鼠标移出HTML元素
event：代表了一个事件对象，封装了与事件相关的一些信息，event写在哪里就是哪个对象的信息
键盘事件
onkeydown：键盘按下
onkeyup：键盘松开
onkeypress：键盘按下并松开
焦点事件：
onfocus：获取焦点
onblur：失去焦点
表单的提交和重置事件：
onsubmit：提交事件，点击提交按钮发生
onreset：重置事件，点击重置按钮发生
改变事件
onchange：

Dom

概述

每个文档都有五种节点：文档节点，标签节点，属性节点，文本节点，注释节点
每个节点三个属性：nodeName，nodeValue，nodeType

导航属性

parentnode：父节点
childnodes：子节点集合
fristnode：第一个子节点
lastnode：最后一个子节点

DOM节点的各种操作：

docment对象是整个HTML文档
docment.all获取页面所有标签对象，放入指定数组；
docment.forms[];此数组中存储所有当面页面的form表单的对象
docment.images[];存储当前页面所有图片对象
docment.write();在当前页面上打印字符串

docment对象获取标签对象的三种方式：
docment.getElementById();获取页面上第一个id符合参数的标签引用
docment.getElementsByTagName();获取所有符合参数的标签的数组
docment.getElementsByName();获取所有Name符合参数的标签的数组
获取属性
getAttribute()获取属性值 getAttributeNode()获取属性节点
setAttribute(“属性名”,“值”)设置属性值
节点操作
CreateElement()创建标签节点
appendChild()添加子节点
removeChild()删除(子)节点：
cloneNode();参数为true或false，为true表示复制节点及子节点，默认为false表示只复制此节点
replaceChild();，节点替换，使用父节点，操作子节点。两个参数，第一个为新节点，第二个为被替换节点

js的面向对象

创建对象

		function fun(){};
		var f = new fun();//f即为创建的对象

创建类的公有属性
1.在函数中： this.属性名=属性值;
2.在函数外：函数名.prototype.属性名=属性值
创建类的私有属性
1.在函数中： var 属性名 = 属性值; 只能在函数中访问
2.在函数外：对象名.属性名=属性值； 只有此对象拥有此属性
创建类的公有方法
1.在函数中：this.方法名=匿名函数;
2.在函数外：函数名.prototype.方法名=匿名函数；
创建类的私有方法
1.在函数中： var 方法名 = 匿名函数; 只能在函数中访问
2.在函数外：对象名.方法名=匿名函数； 只有此对象拥有此方法
扩展已知js对象的方法
给对象添加私有或公有方法

jQuery库相关

jquery库：内部封装的是dom的种种操作，可以帮我们极大的简化代码
dom对象与jquery对象
dom对象就是通过docment拿到的对象
jquery对象是对dom对象进行包装后的对象

dom对象不能直接调用jquery方法
jquery对象不能直接调用dom方法

dom对象转jquery对象：$（dom对象）;
jquery对象转dom对象：
1.采用[0]的方式：jquery对象[0];
2.调用get方法：jquery对象.get(0);