黑马pink老师 JavaScript 视频笔记

JavaScript组成

ECMAScript

由ECMA国际进行的标准化的一门编程语言，在万维网上应用广泛，被称为 JavaScript 或 JScript ，但实际上后两者是 ECMAScript 语言的实现和拓展

DOM

文档对象模型，是处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM

浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，如弹出框、控制浏览器跳转、获取分辨率等

JavaScript 三种书写位置

行内

直接写到元素内部

• 可以将单行或少量JS代码写在HTML标签属性中(on开头的属性)，如：onclick
• 在 HTML 中尽量使用双引号，在 JS 中尽量使用单引号
• 可读性差，在 HTML 里写太多 JS 代码，不方便阅读
• 引号易错，引号多层嵌套匹配时，非常容易混淆
• 特殊情况下使用

内嵌

写在里面

• 可以将多行 JS 代码写在

外部

写在新建的 JavaScript 文件里，html head区写

• 利用 HTML 页面代码结构化，把大段 JS 代码独立到 HTML 页面外，美观又方便
• 引用外部 JS 文件的 script 标签中间不可以写代码
• 适合于 JS 代码量比较大的情况

JavaScript 注释

单行注释

//… ctrl + /

多行注释

/* … */ shift + alt + a

JavaScript 输入输出语句

方法 说明 ` 归属

alert(msg) 浏览器弹出警示框 浏览器

console(msg) 浏览器控制台打印输出信息 浏览器

prompt(info) 浏览器弹出输入框，用户可以输入 浏览器

变量的使用

声明变量

var age; //声明一个名称为 age 的变量

var 是一个 JS 关键字，用来声明变量 （variable 变量的意思）。使用后计算机会自动分配内存空间，不需要人来管

初始化

var age = 18; //声明变量的同时赋值为18

变量的使用

//1：用户输入姓名，存储到一个 myname 的变量里去

var myname = prompt(‘请输入您的名字’);

//2：输出这个用户名

alert(myname);

变量语法拓展

更新变量

一个变量被重新赋值后，它原有的值就会被重新覆盖，变量值将以最后一次赋值为准

同时声明多个变量

同时声明多个变量，只需要写一个 var ，多个变量名之间使用英文逗号隔开

var age = 18 ,

​ address = … ,

​ gz = 2000;

变量的命名规范

• 由字母(A-Z,a-z)、数字(0-9)、美元符号($)组成，如：usrAge,num01,$name
• 严格区分大小写，如：var app 和 var App 是两个不同变量
• 不能以数字开头，如：18age 是错的
• 不能是 关键字、保留字，如：var,for,while
• 变量名得有意义
• 遵守驼峰命名法：首字母小写，后面单词的首字母大写

交换两个变量

1.定义一个临时变量 temp

2.把 a1 给临时变量 temp

3.把 a2 给 a1

4.把 temp 给 a2

变量小结

• 因为一些数据需要保存，所以需要变量
• 变量就是一个容器，用来存放数据，方便使用
• 变量是内存里的一块空间，用来存储数据
• 一定要先声明变量，然后赋值
• 声明变量本质是 去申请内存空间
• 命名要规范：驼峰命名法
• 区分变量名是否合法
• 学会交换两个变量

数据类型

为了便于把数据分为所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

JavaScript 是一种弱类型或者说动态语言，意味着不用提前声明变量的类型，运行中会被自动确认

JavaScript 拥有动态类型，同时也意味着相同的变量可用于不同的类型

数据类型分类

简单数据类型

名字 说明 默认值

Number 数字型，包含整形和浮点型 0

Boolean 布尔值型，true和false等价于1和0 false

String 字符串型，带’’ “”

Underfined var a;声明了变量 a ,但没给值 unferfined

Null var a = null;声明了变量a为空值 null

JS 数值前面加 0 为八进制，0x 为十六进制

数字型 Number

最大值：

alert(Number.MAX_VALUE); // 1.7976931348623157e+308

最小值：

alert(Number.MIN_VALUE); // 5e-324

三个特殊型：

Infinity : 代表无穷大，大于任何数

-Infinity : 代表无穷小，小于任何数

NaN : Not a number, 代表一个非数值

isNaN:用来判断非数字，并且返回一个值。如果是数字，返回false，如果不是数字，返回true

字符串型 String

HTML 里使用双引号， JS 里推荐使用单引号

字符串引号嵌套：JS 可以用单双引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

即：’ “这是单包双” ’ 和 " ‘这是双包单’ "

转义符 解释

\n 换行符，n 是 newline 的意思

\\ 斜杠\

\’ ’ 单引号

\" ‘’ 双引号

\t tab 缩进

\b 空格，b 是 blank 的意思

字符串长度即拼接

字符串长度：通过字符串的 length 属性可以获取整个字符串的长度

如：str1.length

字符串拼接：多个字符串可以用 + 进行拼接，字符串 + 任何类型 = 拼接之后的字符串

拼接前会把与字符串相加的任何类型转换为字符串，在拼接成一个新的字符串

字符串拼接加强：

console.log(‘字符串1’ + 变量 + ‘字符串2’); //可以通过改变变量的方法进行对整个拼接出来的字符串进行修改

布尔型

布尔类型只有两个值：true 和 false ，其中 true 表示真 ， false 表示假

true 参与加法运算当1来看，false 当0来看

undefined

undefined 和 数字 相加，最后结果是 NaN

null

null 代表空值

null + 1 结果还是 1

获取变量数据类型

typeof 可用来获取检测变量的数据类型

var num = 10; //定义一个 number 类型的变量

console.log(typeof num); //结果是 number

var str = ‘gsl’; //定义一个 string 类型的变量

console.log(typeof str); //结果是string

prompt 取过来的值是 字符串型的

数据类型转换

通俗的说，就是把一种数据类型的变量转换为另外一种数据类型

转为字符串形

方式 说明 案例

toString() 转成字符串 var num = 1;alert(num.toString());

String()强制转换 转成字符串 var num = 1;alert(String(num));

加号拼接字符串 和字符串拼接结果都是字符串 var num = 1;alert(num + ‘字符串’);

第三种也叫隐式转换

转为数字型（重点）

方式 说明 案例

parseInt(string) 将string类型转为整数数值型 parseInt(‘78’)

parseFloat(string) 将string类型转为浮点数数值型 parseFloat(‘78.21’)

Number() 将string类型转换为数值型 Number(‘12’)

js 隐式转换( - , * , / ) 利用算数运算饮食转换为数值型 ‘12’-0

转为布尔型

方式 说明 案例

Boolean() 其他类型转为布尔型 Boolean(‘true’)

**代表空、否定的值会被转为 false **，如：0、NaN、null、undefined ,其余都会被转为 true

DOM

获取元素

根据ID获取

使用 getElementById() 方法，可以返回带有 ID 的元素对象

var xxx = document.getElementById(‘某个元素的id’);

根据标签名获取

直接根据标签名获取

使用 getElementsByTagName() 方法，可以返回带有指定标签名的对象的集合，以伪数组形式存储

var xxx = getElementsByTagName(‘标签名’);

注意：

• 得到的是一个对象的集合，所以想要操作里面的元素需要遍历

• 得到元素对象是动态的

• 如果只有一个，返回的还是伪数组形式

• 如果没有这个元素，返回的是空的伪数组形式

根据父级内部的标签名获取

element.getElementsByTagName(‘标签名’);

**注意：**父元素必须是单个对象（必须指明是哪个元素对象） 获取的时候不包括父元素自己

如：

var ol = document.getElementsByTagName(‘ol’);

console.log(ol[0].getElementsByTagName(‘li’)); //输出第一个 ol 的 li 元素

或：

var ol = document.getElementsById(‘ol’); //查找 id 为 ol 的标签

console.log(ol.getElementsByTagName(‘li’)); //输出这个标签里所有 li 元素

通过 HTML5 新增的方法获取

类名选择

document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合

如：

var xxx = document.getElementsByClassName(‘box’);

console.log(boxs);

指定选择器选择

document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对象,切记选择器要加符号

如：

var firstbox = dodument.querySelector(‘.box’); //选择第一个类名为 box 的元素对象

console.log(firstbox);

或：

var nav = dodument.querySelector(‘#nav’); //选择第一个id名为 nav 的元素对象

console.log(nav);

根据指定选择器返回

document.querySelectAll(‘选择器’); //根据指定选择器返回所有元素对象的集合

如：

var allbox = document.querySelectorAll(‘.box’);

console.log(allbox);

获取 HTML 和 body 元素

var xxx = document.body;

var xxx = document.documentElement;

事件

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为

简单理解：触发 — 响应机制

每个元素都可以触发

事件三要素

事件源

事件被触发的对象

事件类型

如何触发 什么事件 比如：鼠标点击(onclick) 鼠标经过 键盘按下

事件处理程序

通过一个函数赋值的方式完成

如：

<button id = "btn">
    唐伯虎
</button>

<script>
	var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert('...');
    }
</script>

执行事件的步骤

获取事件源

	var div = document.querySelector('div');

注册事件(绑定事件)

	div.onclick

添加事件处理程序(采取函数赋值形式)

div.onclick = function(){
	console.log('...');
}

常见鼠标事件

鼠标事件								 触发条件

onclick									鼠标点击左键触发

onmouseover								鼠标经过触发

onmouseout								鼠标离开时触发

onfocus									获得鼠标焦点触发

onblur									失去鼠标焦点触发

onmousemove								鼠标移动触发

onmouseup								鼠标弹起触发

onmousedown								鼠标按下触发

操作元素

改变元素内容

element.innerText

从初始位置到最终位置的内容，但它去除 html 标签，同时空格和换行也会去掉

element.innerHTML

从初始位置到最终位置的内容，保留 html 标签，同时空格和换行也保留

innerText 和 innerHTML 的区别

这两个属性是可读写的，也就是能获取相对应元素里面的内容

innerText 不识别 html 标签且去除空格和换行，innerHTML 识别 html 标签

如：

var div = document.querySelect('div');

div.innerText = '<strong>今天是：</strong> 2023年...';

div.innerHTML = '<strong>今天是：</strong> 2023年...';

/*上面两个中，innerHTML 会加粗，而 innerText 不会，会把 <strong> 标签也输出出来，因此，要是想对元素里添加一些标签进行修改，应该用 innerHTML*/

表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

type value checked selected disabled

var btn = document.querySelect('button');
var input = document.querySelect('input');

btn.onclick = function(){
    input.value = '被点击了';
    //如果想要某个表单被禁用，不能再点击了，就用 disabled
    btn.disabled = true;
    或
    this.disabled = true;
    //this 指向的是事件函数的调用者
}

样式属性操作

可以通过 JS 修改元素的大小、颜色、位置等样式

• element.style 行内样式操作

• element.className 类名样式操作

注意：

• JS 里的样式采取驼峰命名法 比如：fontSize background Color

• JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

行内样式操作

element.style.xxx = xxx;

隐藏一个 div

var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');

btn.onclick = function(){
	box.style.display = 'none';
}

获得焦点事件

onfocus

失去焦点事件

onblur

使用 className 修改样式属性

element.className = xxx;

把类 change 的效果赋值给点击之后的 div

<div>文本</div>

<script>

	var test = document.querySelector('div');
	
	test.onclick = function(){
	
		this.className = 'change';
		
	}
	
</script>

注意：

• 如果样式修改较多，可以采取操作类名放是更改元素样式

• class 因为是保留字，因此使用 className 来操作元素类名属性

• className 会直接更改元素的类名，会覆盖原先的类名

如果想要保留原先的类名，我们可以这样做：

this.className = 'first change';

自定义属性的操作

获取属性值

• element.属性 获取属性值

• element.getAttribute(‘属性’);

• element.dataset.index (H5新增)

区别

• element.属性

获取内置属性值(元素本身自带的属性)

• element.getAttribute(‘属性’);

主要获得自定义的属性(标准) 程序员自定义的属性

<div id = "demo" index = "1"></div>

//js 部分：

var div = document.querySelector('div'); 

console.log(div.id);	//获取内置属性值

console.log(div.getAttribute('index'));	//获得自定义的属性值(如 自定义的index)

设置移除自定义属性

• element.属性 = ‘值’

设置内置属性值

• ·element.setAttribute(‘属性’，‘值’);

主要针对于自定义属性

div.id = 'test';	

div.className = 'navs';	//设置内置属性值

div.setArribute('index',2);		//把自定义的属性值设置为2

div.setArribute('class','footer');	//把 div 的类换成 footer

• element.removeAttribute(‘属性’);

移除属性

<div id = "demo" index = "1" class = "nav"></div>

//js 部分：

div.removeAttribute('index');

设置 H5 自定义属性

data- 开头作为属性名并赋值

<div data-index= "1"></div>

或使用 js 设置

element.setAttribute('data-index',2)

节点操作

父子层级关系

父级节点

var xxx = document.querySelector('.xxx');

console.log(xxx.parentNode);

子级节点

第一种

得到所有子节点的集合，包含 元素节点、文本节点等

var xxx = document.querySelector('.xxx');

console.log(xxx.childNodes);

文本节点 nodeType : 3

元素节点 nodeType : 1

var xxx = document.querySelector('.xxx');

for(var i = 0; i < ul.childNodes.length; i++){
    if (ul.childNodes[i].nodeType == 1){
        //如果 ul 的子节点是元素节点
        console.log(ul.childNodes[i]);
    }
}

第二种

返回所有的子元素节点集合，其余节点不返回

var xxx = document.querySelector('.xxx');

console.log(xxx.children);

获取第一个子节点

返回不管是文本节点还是元素节点

parentNode.firstChild

返回第一个元素节点

parent.firstElementChild

或

parent.children[0]

获取最后一个节点

返回不管是文本节点还是元素节点

parentNode.lastChild

返回最后一个元素节点

parentNode.lastElementChild

或

parent.children[parent.children.length - 1]

兄弟节点

获取下一个节点

返回当前元素下一个兄弟节点，不管是文本节点还是元素节点

node.nextSibling

返回当前元素下一个元素节点

node.nextElementSibling

获取上一个节点

返回当前元素上一个兄弟节点，不管是文本节点还是元素节点

node.previousSibling

返回当前元素上一个元素节点

node.previousElementSibling

为了解决兼容性问题，可以自己封装一个

function getNextElementSibling(element){
    var el = element;
    while(el = el.nextSibling){
        if (el.nodeType === 1){ //如果是元素节点
            return el;
        }
    }
    return null;
}

创建节点

document.creatElement('li')

添加节点

node.appendChild(child)	//node 父级 child 子级

将一个节点添加到指定父节点的子节点列表末尾，类似于 css 里的 after 伪元素

node.insertBefore(child,指定元素)//node 父级 child 子级 指定元素 父节点的某个子节点

将一个节点添加到父节点的指定子节点前面，类似于 css 里的 before 伪元素