JavaScript基础

最新推荐文章于 2024-09-12 16:05:15 发布

置顶红的黄的绿绿的_

最新推荐文章于 2024-09-12 16:05:15 发布

阅读量134

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.youkuaiyun.com/Zhaoshuang98/article/details/104899365

版权

JavaScript学习专栏收录该内容

1 篇文章

订阅专栏

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()移除事件。
事件处理中的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()方法：向前跳转。