JavaScript基础
1、 简介
- JavaScript包括三部分:ECMAScript、DOM、BOM
- JavaScript特点:解释型语言、类似于C和Java的语法结构、动态语言、基于原型的面向对象
2、数据类型
-
变量用var定义
-
JavaScript共6种数据类型:
①基本数据类型:字符串型(String)、数值型(Number)、布尔型(Boolean)、Null、Undifined
②其他类型都称为Object -
使用var声明变量但未对其进行初始化的变量值为Undifined。Undifined值由null值衍生出来,所以比较Undifined和null是否相等时返回true。
-
typeof运算符:用来检查一个变量的数据类型。如:
typeof 123;
对没有初始化和没有声明的变量都会返回undefined。typeof检查null会返回一个Object。
3、运算符
- 算术运算符
逻辑运算符:与(&&)、或(||)、非(!)
赋值运算符
关系运算符:<、>、<=、>=
相等:==
全等:===(判断两个值时不会自动类型转换)
三元运算符
4、语句
- 代码块:{}
- 条件语句:if…else、switch…case
- 循环语句:while、do…while、for
- label:使用label语句在代码中添加标签,以便将来使用。
5、对象
-
对象是一种复合值,它将很多值聚合在一起,可以通过名字访问这些值。
对象也可以看做是属性的无序集合,每个属性都是一个名/值对。
对象除了可以创建自有属性,还可以通过从一个名为原型的对象那里继承属性。 -
Object类型,JavaScript中的引用数据类型。除了字符串、数字、null、true、false和undefined之外,JavaScript中的值都是对象。
创建对象两种方式、两种访问方式:
var person = new Object();
person.name = "孙悟空";
person.age = 18;
var person = {
name = "孙悟空",
age = 18
};
-
数组也是对象的一种。
var arr = [1,3,4];
var arr = new Array(数组长度);
var arr = new Array('123','34');
-
在JavaScript中函数也是一个对象。声明函数需要function关键字。
声明:var sun = function(a,b){return a+b;}
调用:var result = sum(1,3);
值传递- 函数内部两个特殊对象:
①arguments:该对象实际上是一个数组,用来保存函数的参数。同时该对象还有一个属性callee来表示当前函数。
②this引用
- 函数内部两个特殊对象:
-
函数也是一个对象,可以作为参数传递给另一个函数,函数作为参数时不加()。
-
函数对象的方法:每个函数都有两个方法call()和apply()。call()和apply()可以指定一个函数的运行环境对象,就是设置函数执行时的this值。
-
属性:在对象中保存的数据或者说是变量,成为一个对象的属性。每个对象都有一个constructor属性,它引用了当前对象的构造函数。
-
instanceof运算符:用于检查一个对象的具体类型。
-
引用类型:Object、Arrary、Date、Function
-
闭包(closure):当前作用域总是能访问外部作用于中的变量。因为函数是JS中喂养拥有自身作用域的结构,因此闭包的创建依赖于函数。也可以理解为相关的局部变量在函数调用结束后将会继续存在。
-
基本包装类型:Boolean、Number、String
使用方法和普通对象一样。
6、原型
- 原型实际上指在构造函数中存在着一个名为原型的(prototype)对象,这个对象中保存着一些属性,凡是通过该构造函数创建的对象都可以访问存在于原型中的属性。
最典型的原型属性就是toString()函数,实际上我们的对象中并没有定义这个函数,到却可以调用,那是因为这个函数存在于Object对应的原型中。 - 设置原型:原型是一个对象,可以通过构造函数获取原型对象,可以添加删除修改原型中的属性,也可以修改原型对象的引用。
原型属性只存在于函数对象中,其他对象没有原型属性。
每一个对象都有原型,包括原型对象也有原型。特殊的是Object的原型对象没有原型。
7、DOM
- DOM,全称Document Object Model,文档对象模型。
文档:整个HTML网页文档
对象:将网页中的每一部分都转换成了一个对象
模型:使用模型来表示对象之间的关系,方便获取对象 - 节点:构成HTML文档最基本的单元。
①文档节点(document):整个HTML文档,网页中的所有节点都是它的子节点。
document对象作为windows对象的属性存在,不可以直接使用。
通过该对象可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
②元素节点(element):HTML中的各类标签,可以通过document方法获取元素节点。如:document.getElementById();
③文本节点(text):HTML标签中的文本内容。获取文本节点时,一般要先获取元素节点,再通过元素节点获取文本节点。如:元素节点.firstChild;
获取元素节点中的第一个子节点,一般为文本节点。
④属性节点(attr):元素的属性,即标签中的一个个属性。属性节点并非元素节点的子节点,而是元素节点的一部分。如:元素节点.getAttributeNode("属性名");
- 获取元素节点:通过document对象调用
getElementById()
:通过id属性获取一个元素节点对象
getElementsByTagName()
:通过标签名获取一组元素节点对象
getElementsByName()
:通过name属性获取一组元素节点对象 - 获取元素节点的子节点:通过具体的元素节点调用
getElementsByTagName()
:方法,返回当前节点的指定标签后代节点
childNodes
:属性,标识当前节点的所有子节点
firstChild
:属性,表示当前节点的第一个子节点
lastChild
:属性,标识当前节点的最后一个子节点 - 获取父节点和兄弟节点:通过具体的节点调用
parentNode
:属性,表示当前节点的父节点
previousSibling
:属性,表示当前节点的前一个兄弟节点
nextSiling
:属性,表示当前节点的后一个兄弟节点 - 元素节点的属性
获取:元素对象.属性名
例:element.value
、element.id
、element.className
设置:元素对象.属性名 = 新的值
例:element.value = "hello"
- 其他属性
nodeValue
:文本节点可以通过nodeValue
属性获取和设置文本节点内容
innerHTML
:元素节点通过该属性获取和设置标签内部的HTML代码 - 使用css选择器进行查询
querySelector()
和querySelectorAll()
两个方法都是用document对象来调用,方法使用相同,都是传递一个选择器字符串作为参数,方法会自动根据选择器字符串去网页中查找元素。
querySelector()
:只返回找到的第一个元素
querySelectorAll()
:返回所有符合条件的元素 - 节点的修改:主要指对元素节点的操作
创建节点:document.createElement(标签名)
删除节点:父节点.removeChild(子节点)
替换节点:父节点.replaceChild(新节点,旧节点)
插入节点:父节点.appendChild(子节点)
、父节点.insertBefore(新节点,旧节点)
8、事件
-
事件:文档或者浏览器窗口欧发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过时间实现的。
-
为一个元素绑定事件处理程序的两种方法:
- 通过HTML元素指定时间属性来绑定(不推荐使用)
<button onclick = "alart('hello'); alart('world')">按钮</button>
- 通过DOM对象指定的属性来绑定
var btn = document.getElementById('btn'); btn.onclick = function(){ alart("hello"); };
- 设置事件监听器:前边两种方式只能绑定一个程序,而不能为一个事件绑定多个程序
元素对象.addEventListener()
需要设置两个参数:事件响应字符串、响应函数
btn.addEventListener('click', fuction(){alart("hello");} );
使用removeEventListener()和detachEvent()移除事件。
- 通过HTML元素指定时间属性来绑定(不推荐使用)
-
事件处理中的this:在事件处理程序内的this所引用的对象即是设定了该事件处理程序的元素。
-
事件对象:在DOM对象上的某个事件被触发时,会产生一个事件对象event,这个对象中包含着所有事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
DOM标准的浏览器会将一个event对象传入到实践的处理程序当中。无论事件处理程序是什么都会传入一个event对象。
event对象包含与创建它的特定事件有关的属性和方法。
获取event对象方式,例:btn.onclick = function(event){alert(event.type);};
-
IE中的事件对象:与访问DOM中的event对象不同,访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。
在IE中event对象作为window对象的属性存在,可以使用window.event
来获取event对象。
在使用attachEvent()
的情况下,也会在处理程序中传递一个event对象,也可以按照前边的方式使用。 -
事件的触发:事件的发生主要是由用户操作引起的。当指定事件被触发时,浏览器就会调用对应的函数去响应时间,一般情况下事件每触发一次,函数就会执行一次。
-
事件的传播:网页中标签之间存在嵌套关系
事件的处理分为捕获阶段、目标阶段、事件冒泡三个阶段。
捕获阶段:这一阶段会从window对象开始向下一直遍历到目标对象,如果发现有对象绑定了响应事件则做出相应的处理。
目标阶段:这一阶段已经遍历结束,则会执行目标对象上绑定的响应函数。
冒泡阶段:这一阶段事件的传播方式和捕获阶段正好相反,会从事件目标一直向上便利,直至window对象结束,这是对象上绑定的响应函数也会执行。 -
取消事件传播
可以使用event对象的两个方法完成:stopPropagation()
、stopImmediatePropagation()
取消默认行为:preventDefault()
9、BOM
- BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些与任何网页内容无关.
BOM将浏览器中的各个部分转换成了一个一个的对象,我们通过修改这些对象的属性,调用它们的方法,从而控制浏览器的各种行为。 - window对象是BOM的核心,它代表一个浏览器的实例。
在浏览器中我们可以通过window对象来访问操作浏览器,同时window也是作为全局变量存在的。
全局作用域:window作为浏览器中的全局对象,因此所有在全局中声明的变量、对象、函数都会变成window对象的属性和方法。 - 窗口大小
网页窗口大小:innerWidth
、innerHeigth
浏览器本身的尺寸:outerWidth
、outerHeigth
- 打开窗口:使用
window.open()
方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。
该方法需要4个参数:需要加载的URL地址、窗口的目标、一个特性的字符串、是否创建新的历史记录 - 超时调用:
setTimeout()
,超过一定时间以后执行指定函数,需要两个参数(要执行的内容、超过的时间)
取消超时调用:clearTimeout()
超时调用都是在全局作用域中执行的。 - 间歇调用:
setInterval()
,每隔一段时间执行指定代码,需要两个参数(要执行的代码、间隔的时间)
取消间隔调用:clearInterval()
- 系统对话框:浏览器通过
alert()
、confirm()
、prompt()
方法调用系统对话框向用户显示消息。它们的外观由操作系统及浏览器设置决定,而不由css决定。
显示系统对话框会导致程序终止,当关闭对话框会恢复执行。alert()
方法接受一个字符串并显示给用户。调用alert()
方法会向用户显示一个包含一个确认按钮的对话框。confirm()
方法与alert()
方法相似,只不过confirm()
方法弹出的对话框有一个确认和取消按钮。这个函数的执行会返回一个布尔值true或false。prompt()
会弹出一个带输入框的提示框,并可以将用户输入的内容返回。它需要两个值作为参数:显示的提示文字、文本框中的默认值。
- location对象:提供了当前窗口中加载的文档有关信息,还提供了一些导航功能。
href
属性:可以获取或修改当前页面的完整的URL地址,使浏览器跳转到指定页面。assign()
方法:所用和href
属性一样,使浏览器跳转页面,新地址错误参数传递到assign()
方法中。replace()
方法:功能一样,只不过replace()
方法跳转地址不会提现到历史记录中。reload()
方法:用于强制刷新当前页面。
- navigator对象:包含浏览器版本、浏览器所支持的插件、浏览器所使用的语言等哥终于浏览器相关的信息。可以用navigator的
userAgent
属性检查用户浏览器版本。 - screen对象:基本上只用来表示客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。
- history对象:保存着用户上网的历史记录,从窗口被打开的那一刻算起。
go()
方法: 使用go()
方法可以在用户的历史记录中任意跳转,可以向后也可以向前。back()
方法:向后跳转。forward()
方法:向前跳转。