目录
js简介
HTML:超文本标记语言，设计网页，内容（内容）
CSS:层叠样式表，表现（外观）
JavaScript:动态行为
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
应用场景
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
构成
ECMAScript:核心语法：
变量、类型、运算符......，简称ES，由ECMA：指定的一套语法标准，统一，独立于各浏览器。
BOM:
Browser Object Model 浏览器对象模型，一系列api：应用程序编程接口,专门用来操作整个浏览器窗口。
DOM:
Document Object Model文档对象模型，一系列api,用来操作整个页面（HTML)文档
语言特点
1、解释性的脚本语言
2、面向对象
3、简单、跨平台
4、动态性
使用js脚本
1、内嵌式：嵌入页面运行：script:脚本<script> </script>
2、外联式：单独的js文件：页面关联引用：<script src="js文件路径"></script>
3、行内式：事件="脚本"
命令
document:文档：整个HTML页面
write:写入
console:控制台
log:日志
alert:弹框
关系运算符
== 相等（值） !=(不等) > >= < <=
=== 全等（类型和值） !== (不全等)
==和===区别：
==:只比较值，过程中会自动进行类型转换，值相等就返回true ,否则返回false
===:既比较类型也比较值，可以理解为严格比较，两者都相等时才返回true
逻辑运算符
&& : 与 并且 多个条件为true时结果才是true，只要有一个为false最终的结果就是false;
|| ：或 或者 多个条件中只要有一个是true，最终的结果就是true
! ：非 取反 !true=false !false=true 非真即假 非假即真
&：不发生短路，在前面结果运算为false之后还会继续运算后面的条件。
类型转换
Number(数据); 将其他类型转成Number，如果转换失败就会得到NaN:Not a Number
parseInt(字符串); 转成整形,会从左往右取出结果中的整数，如果取不到整形：NaN
parseFloat(字符串); 转成小数（浮点型）
String(数据) //转成字符串,构造函数
数据.toString(); //转成字符串
Boolean(数据); //转成Boolean 非0 非null 为真 有值为true 无值为false
选择（分支）结构：
if（）{}else{}：
switch：
循环结构：
while：
do...while：
for循环：
跳出循环:break,continue
嵌套循环
函数
1、声明式函数
function 函数名(参数列表){
函数体:封装的代码段;
return 结果;
}
可以选择是否有参数和返回值
2、表达式函数
变量=function(){
}
3、作用域和作用域链（掌握）
作用域：作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。
全局作用域：在代码中任何地方都能访问到的对象拥有全局作用域
函数（局部 ）作用域：和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，通常指的是函数内部。
块级作用域: ES6中提供的，使用{ }限定块级作用域， 块级作用域可通过新增命令let和const声明，所声明的变量在指定块的作用域外无法被访问
内置对象
对象（Object )：一个具体的事物（人或物），万事万物皆对象。复杂的数据类型，一系列无序的属性的集合。
对象构成：属性（基本的特征:变量）+行为（方法|函数：动态的功能）
对象存储在内存的堆空间中，也称为引用类型
Object
js中的所有对象都继承自Object ；Object本质上是一个函数（后续讲）。**Object** 是 JavaScript 的一种 数据类型 。它用于存储各种键值集合和更复杂的实体，几乎所有的对象都是Object类型的实例。
创建一个对象：const person=new Object();
数组:Array
JavaScript 数组是可调整大小的，并且可以包含不同的数据类型。
JavaScript 数组不是关联数组，因此，不能使用任意字符串作为索引访问数组元素，但必须使用非负整数（或它们各自的字符串形式）作为索引访问。
JavaScript 数组的索引从 0 开始：数组的第一个元素在索引 0 处，第二个在索引 1 处，以此类推，最后一个元素是数组的 length 属性减去 1 的值
foreach循环：
for...in ：
for(变量 in 数组|对象){
//变量：每次从数组或者对象中取出的下标或者键
}
for...of：
for(变量 in 数组|可迭代的对象){
//变量:从数组中取的值
}
Date（日期）
new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
Math数学对象
Math 对象并不像 Date 和 String 那样的类，没有构造函数 Math()。
String字符串
字符串：用单引号或者双引号引起来的内容，常用。
字面量：基本类型
基本类型：
var str='数据';
var str=String(数据);
字符串对象：引用类型：
var str1=new String('数据');
常用的函数（方法）：
length:长度：字符的个数
charAt() ：返回指定索引处对应的字符
charCodeAt() 方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元
String.fromCharCode(): 返回由指定的 UTF-16 代码单元序列创建的字符串
concat()：末尾拼接并返回新的字符串，原始字符串不变
indexOf()：查找子字符串在原始字符串中第一次出现的位置（索引）；如果没有找到返回-1
lastIndexOf() ：查找子字符串在原始字符串中最后一次出现的位置（索引），如果没有找到返回-1
replace()：替换对应的内容（第一个匹配）返回替换后的新字符串；如果pattern是字符串，则仅替换第一个匹配项
replaceAll():替换所有对应的内容返回替换后的新字符串
split():以特定分隔符拆分并得到数组
substr(): 从起始索引号提取字符串中指定数目的字符，包含开始索引
substring(): 提取字符串中两个指定的索引号之间的字符，包含开始索引，不包含结束索引
slice()：提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串
其它包装对象
所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。
常用方法：
toString():返回对应的字符串形式。
valueOf():返回包装对象实例对应的原始类型的值。
Number常用方法
Number.isNaN()：确定传递的值是否是 NaN。
Number.isInteger() ：确定传递的值类型是“number”，且是整数。
Number.parseFloat() ：和全局对象 parseFloat() 一样。
Number.parseInt() :和全局对象 parseInt() 一样。
函数高阶
arguments:
用来 获取函数的参数,只能在函数内部使用，数据类型：object , 伪数组。属性：length;
this关键字:
this: 指针(引用，地址），指向某一个对象，通常在函数内部使用，在函数定义时无法确定this的指向（指针），在运行时才能确定this的指向。直接使用this，默认指向window对象
BOM编程
BOM: 浏览器对象模型，Browser Object Model ,提供了一系列的API(Applicaion Programing Interface应用程序编程接口）专门用来操作浏览器窗口。
window中的常用方法（函数）
-
alert(数据) :弹框，消息框
-
prompt(提示信息，默认值)：弹框，输入信息
-
confirm('确认提示'): 确认弹框，返回true/false 的结果
-
open():打开新窗口 mdn open
-
close():关闭窗口
-
setTimeout(函数，延时：毫秒)：延时执行函数 只执行一次,返回结果作为句柄用来 控制该延时器
-
clearTimeout(返回结果) :停止延时函数的执行
-
setInterval(函数，频率：毫秒) ：定时执行，每隔一定时间执行函数 ；用法雷同于setTimeout
-
clearInterval(返回结果)：停止定时函数的window中的常用属性
window中的常用属性
window.location:地址栏;该接口表示其链接到的对象的位置
window.history:历史记录；该对象提供了对浏览器的会话历史的访问
window.navigator:导航；该接口表示用户代理的状态和标识
window.screen:屏幕；该接口表示一个屏幕窗口，往往指的是当前正在被渲染的 window 对象，可以使用window.screen 获取它
window.document:文档对象
window.console:控制台对象
location ：地址栏
url:统一资源定位符
127.0.0.1:本地服务器地址
history历史记录
history.forward():前进
history.back():后退
history.go(正数|负数)：前进 | 后退
pushState(): 将数据 push 进会话历史栈，地址会改变，但是页面不会跳转
screen屏幕
width:总宽度
height:总高度
availWidth：可用的宽度
availHeight：可访问的高度，不包括任务栏高度。
<input type="button" value="获取屏幕信息" id="btn2">
DOM
document.querySelector();
document.querySelectorAll();
DOM: Document Object Model 文档对象模型 ,w3c标准，提供了一系列的API用来操作整个页面文档（document)。加载页面时会在内存中构建dom树。层次清晰，根节点：html
document常用属性：
| 属性 | 说明 |
|---|---|
| document.doctype | 返回与文档相关的文档类型声明 (DTD) |
| document.body | 返回文档的body元素 |
| document.documentElement | 返回文档的根节点:HTML元素 |
| document.title | 返回当前文档的标题 |
| document.forms | 返回当前文档的表单集合。 |
写入和获取元素的各种方法
| 方法 | 说明 |
|---|---|
| document.write() | 在文档中写入内容；document.open(),write(),close() ;关闭后再写入会覆盖文档的内容 |
| getElementById(元素id) | 根据id获取到对应的标签对象（单个）（元素：element ,节点对象node)；可以获取到动态标签 |
| getElementsByTagName(标签名) | 根据标签名获取到一组同类型的元素（伪数组）；返回HTMLCollection;获取动态节点集合 |
| getElementsByClassName(类选择器名) | 根据类名获取到一组同类的元素（伪数组）;返回HTMLCollection;获取动态节点集合 |
| getElementsByName(名字) | 根据名字属性获取到一组同名元素（伪数组）;返回HTMLCollection;获取动态节点集合 |
| querySelector(css选择器) | 通过css选择器获取到第一个匹配的元素； |
| querySelectorAll(css选择器) | 通过css选择器获取到所有匹配的元素（伪数组）；返回NodeList;获取静态节点集合； |
获取|修改 内容、 属性、样式
| 属性 | 说明 |
|---|---|
| 操作对象.innerHTML | 改变 HTML 内容 |
| 操作对象.innerText | 改变 HTML 内容为纯文本 |
| 操作对象.textContent | 改变 HTML 内容为纯文本 |
| 操作对象.attribute | 获取|修改 HTML 属性 |
| 操作对象.setAttribute(属性名,属性值) | 修改属性的值 |
| 操作对象.getAttribute("属性名") | 获取属性的值 |
| 对象.style.property | 改变操作样式的属性 |
| 对象.className | 修改元素的类选择器 |
| 对象.classList.add(类选择器) | 在类列表中添加类选择器 |
| 对象.classList.replace(原始类选择器，新类选择器) | 替换 |
| 对象.classList.remove(类选择器) | 移除 |
| 对象.classList.contains(类选择器) | 判断是否包含类选择器 true/false |
| 对象.classList.item(索引) | 根据索引获取列表中的某个选择器的名字 |
| 对象.classList.forEach() | 遍历 |
Window.getComputedStyle() | 返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值；在许多在线的演示代码中，getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用 |
属性操作
示例2：修改元素的属性,
// 根据id获取复选框
let checkAll=document.querySelector('#all');
checkAll.onclick=function(){
// this:checkAll元素
// 获取属性
console.log(this.type);
console.log(this.getAttribute('name'));
// 修改属性
// this.type='radio';
this.setAttribute('id','aaa');
console.log(this.id);
}样式操作
// 获取第一行的所有th,绑定点击事件
let ths=document.querySelectorAll('#tr1 th');
// 遍历绑定
ths.forEach(function(th){
// 绑定点击事件
th.onclick=function(){
console.log(this.classList);
// 清理样式:所有项目
for(let i=0;i<ths.length;i++){
// ths[i].className='';
// 清除
ths[i].classList.remove('active');
ths[i].classList.remove('bg');
}
// 修改类选择器的名字
// this.className='active bg';
this.classList.add('active');
this.classList.add('bg');
}
})
节点属性
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| parentElement | 返回节点的父元素 |
| childNodes | 返回所有节点，包含元素节点和文本节点，换行等 |
| children | 返回子节点集合，只返回元素节点【标签】 |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| firstElementChild | 返回节点的第一个元素子节点 |
| lastElementChild | 返回节点的最后一个元素子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
| getAttributeNode | 获取属性节点 |
| previousElementSibling | 上一个元素节点 |
| nextElementSibling | 下一个元素节点 |
常用方法：
| 名称 | 描述 |
|---|---|
| document.createElement(“元素名”) | 创建元素节点 |
| document.createTextNode(“文本”) | 创建文本节点 |
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| parent.insertBefore( A,B ) | 把A节点插入到B节点之前；A：要插入的新的节点 B:原来已经存在的一个元素 |
| cloneNode(deep) | 复制某个指定的节点 deep:true 深层复制，包括其中的子节点 deep:false 浅层复制，只是当前节点对象 |
| 名称 | 描述 |
|---|---|
| 父节点.removeChild( 子节点) | 删除指定的节点 |
| 父节点.replaceChild( newNode, oldNode) | 用其他的节点替换指定的节点 |
2069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
