JavaScript学习（1）

肖剑锋 發表於 2020-4-3 13:17:00

<h1 id="javascript工作原理">JavaScript工作原理</h1>
<h2 id="前端三元素">前端三元素：</h2>
<ol>
<li>HTML：通过各种元素搭建页面结构</li>
<li>CSS：负责页面样式：形状，大小，颜色，动画等</li>
<li>JavaScript：控制页面行为：部分动画效果、页面与用户的交互、页面功能</li>
</ol>
<h2 id="概念">概念：</h2>
<ol>
<li>互联网最流行的轻量级脚本语言</li>
<li>广泛用于服务端、pc端、移动端</li>
<li>嵌入更大型的应用程序环境，去调用宿主环境提供的底层 API，比如结合浏览器使用</li>
</ol>
<h2 id="与宿主的关系">与宿主的关系：</h2>
<ol>
<li>各种宿主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript 调用。</li>
<li>以浏览器为例，它提供的额外 API 可以分成三大类：</li>
</ol>
<ul>
<li>浏览器控制类：操作浏览器</li>
<li>DOM 类：操作网页的各种元素</li>
<li>Web 类：实现互联网的各种功能</li>
</ul>
<ol start="3">
<li>如果宿主环境是服务器，则会提供各种操作系统的 API，比如 Node 环境中：</li>
</ol>
<ul>
<li>文件操作 API</li>
<li>网络通信 API等</li>
</ul>
<h2 id="调试javascript的方法">调试JavaScript的方法：</h2>
<ol>
<li>alert</li>
<li>console.log</li>
<li>document.title</li>
<li>vscode插件</li>
</ol>
<h1 id="es6开启javascript的新时代">ES6开启JavaScript的新时代</h1>
<ol>
<li>ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。</li>
<li>ECMAScript 和 JavaScript 的关系是，前者是后者的标准，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。</li>
<li>ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/1736986/202004/1736986-20200402224327684-1359665126.png" alt="" loading="lazy"></p>
<h1 id="学习dom找到对象很重要">学习DOM：找到对象很重要</h1>
<h2 id="什么是dom">什么是DOM：</h2>
<ol>
<li>DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。</li>
<li>浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。</li>
<li>DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。</li>
</ol>
<h2 id="常见的dom文档对象模型">常见的DOM文档对象模型：</h2>
<pre><code>document #节点
doucment.cookie #获取cookie
document.links #返回当前文档所有链接的数组,获取所有的a
document.URL #获取当前URL
document.location #当前网站位置信息
document.title #当前文档标题
doucment.querySelector #取到元素
document.getElementsByTagName #取标签列表，支持切片
document.getElementsByClassName #取class列表
document.getElementsByName #取name
document.getElementByID #根据ID取元素
</code></pre>
<h2 id="node-接口">Node 接口</h2>
<p>所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。</p>
<pre><code>Node.prototype.nodename #节点名字
Node.prototype.nodevalue #节点值
Node.prototype.textcontent #文本内容
Node.prototype.nextsibling #同级别下一个节点
Node.prototype.previousSibling #同级别上一个节点
Node.prototype.firstchild #子节点第一个
Node.prototype.parentNode #父节点
Node.prototype.childnodes #所有子节点

var h4 = document.createElement('h4')
h4.textContent = '这是h4'
div.append(h4) #追加元素

Node.prototype.clonenode #克隆节点
div.parentNode.removeChild(div) #删除节点
Node.prototype.contains #判断节点是否存在
</code></pre>
<h2 id="element-节点">Element 节点</h2>
<p>Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象。</p>
<pre><code>Element.id #取id
Element.tagName #标签名
Element.attributes #取属性
Element.classname #取类名字
Element.classlist #类列表

var attr = document.getElementById('属性')
attr.classList.toggle('hljs', true) #如果是true就添加类

Element.dataset #获取data属性下的值
Element.innerHtml #获取当前节点下html代码
Element.outerHtml #获取当前节点html
Element.style #获取样式
Element.closest #返回匹配该选择器的、最接近当前节点的一个祖先节点（包括当前节点本身）
Element.matches #匹配元素返回一个布尔值
</code></pre>
<h2 id="attribute-属性">attribute 属性</h2>
<p>HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。</p>
<pre><code>Element.attributes #取属性
id
name
value
href
img.src
for 改为htmlfor
class 改成classname
Element.getAttribute #获取属性
code.setAttribute('class', 'bg') #添加属性
Element.hasAttribute() #当前元素节点是否包含指定属性
Element.hasattributes() #方当前元素是否有属性，如果没有任何属性，就返回false，否则返回true。
</code></pre>
<h2 id="css-操作">CSS 操作</h2>
<p>CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。如何通过 JavaScript 操作 CSS？</p>
<pre><code>setAttribute('style', 'color:red;background-color:green') #设置样式
element.style.属性 = 值
element.style.cssText #设置css
element.style.lenght #长度
element.style.item() #取第几个
element.style.removeProperty('color') #删除样式
element.style.setProperty('color', 'red') #添加样式
window.getComputedStyle(el, 'before').content
</code></pre>
<h1 id="es6-内置类型number和boolean">ES6 内置类型number和boolean</h1>
<h2 id="number-表示方式">number 表示方式</h2>
<pre><code>ob 或 0B #二进制
0o 或 0O #八进制
0x 或 0X #16进制
</code></pre>
<h2 id="number-特殊值">Number 特殊值</h2>
<ul>
<li>Number.MAX_VALUE 最大数值</li>
<li>Number.MIN_VALUE 最小数值</li>
<li>Number.NaN 特殊的非数字值</li>
<li>Number.NEGATIVE_INFINITY 负无穷大</li>
<li>Number.POSITIVE_INFINITY 正无穷大</li>
</ul>
<h2 id="number-方法">Number 方法</h2>
<pre><code>typeof 判断类型
parseInt() #转成数字
parseInt(10101, 2) #二进制转十进制最大36进制
null #空值
undefined #未定义
numObj.toExponential() #科学计数法
numObj.toFixed() #四舍五入为指定小数位数的数字
numObj.toPrecision #可在对象的值超出指定位数时将其转换为指数计数法
numObj.tostring #将—个数字转换成字符串
Number.valueOf() #返回原始值
toLocaleString('') #方法可根据本地时间把 Date 对象转换为字符串，并返回结果
isFinite() #是否是数字
isNAN() #是否不是数字
parseFloat() #转成小数
</code></pre>
<h2 id="boolean-类型">Boolean 类型</h2>
<p>布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。</p>
<ul>
<li>前置逻辑运算符： ! (Not)</li>
<li>相等运算符：=<mark>，!</mark>，==，!=</li>
<li>比较运算符：>，>=，<，<=<br>
转换规则是除了下面六个值被转为false，其他值都视为true：</li>
<li>undefined</li>
<li>null</li>
<li>false</li>
<li>0</li>
<li>NaN</li>
<li>""或''（空字符串）</li>
</ul>
<h1 id="es6的内置类型之string">ES6的内置类型之string</h1>
<h2 id="表示方法">表示方法</h2>
<ul>
<li>用 '' 或 ""</li>
<li>多行字符串：\n 连接</li>
<li>ES6标准：用反引号 <code>...</code> ，用 + 号连接</li>
</ul>
<h2 id="举例">举例</h2>
<p>var name = 'de8ug';<br>
var age = 17;<br>
var hello = <code>hi, 我是${name}, 今年${age}</code>;</p>
<h2 id="常用方法">常用方法</h2>
<pre><code>String.charAt() #返回字符串中的第n个字符
String.charCodeAt() #返回字符串中的第n个字符的代码
String.concat() #连接字符串
String.fromCharCode() #从字符编码创建—个字符串
String.indexOf() #检索字符串
String.lastIndexOf() #从后向前检索一个字符串
String.localeCompare() #用本地特定的顺序来比较两个字符串
String.match() #找到一个或多个正则表达式的匹配
String.replace() #替换一个与正则表达式匹配的子串
String.search() #检索与正则表达式相匹配的子串
String.slice() #抽取一个子串
String.split() #将字符串分割成字符串数组
String.substr() #抽取一个子串
String.substring() #返回字符串的一个子串
String.toLocaleLowerCase() #把字符串转换小写
String.toLocaleUpperCase() #将字符串转换成大写
String.toLowerCase() #将字符串转换成小写
String.toString() #返回字符串
String.toUpperCase() #将字符串转换成大写
String.valueOf() #返回字符串
String.includes() #返回布尔值，表示是否找到了参数字符串
String.startsWith() #返回布尔值，表示参数字符串是否在原字符串的头部
String.endsWith() #返回布尔值，表示参数字符串是否在原字符串的尾部
String.repeat() #方法返回一个新字符串，表示将原字符串重复n次
String.padStart() #用于头部补全
String.padEnd() #用于尾部补全
</code></pre>
<h1 id="es6的内置类型之null与undefined">ES6的内置类型之null与undefined</h1>
<ol>
<li>null: 值为空，不是一个全局的标识符</li>
<li>undefined: 全局标识符，表示初始值未定义</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/1736986/202004/1736986-20200403112222514-1443117731.png" alt="" loading="lazy"></p>
<h1 id="es6的内置类型之symbol">ES6的内置类型之symbol</h1>
<p>一种新的类型，得到一个唯一的值<br>
console.log(Symbol('foo') === Symbol('foo'));<br>
用于对象的属性名:</p>
<ul>
<li>一种是字符串，</li>
<li>另一种是Symbol 类型，可以保证不会与其他属性名产生冲突。<br>
let s = Symbol(); #typeof s<br>
使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中</li>
</ul>
<pre><code>let s = Symbol('name')
let obj = {}
obj = 'dongli'
#s不能再给新的Symbol值
</code></pre>
<h1 id="es6的数据结构set与map">ES6的数据结构Set与Map</h1>
<ol>
<li>Map是一组键值对的结构，有非常快的查询速度。</li>
</ol>
<ul>
<li>key值支持多种类型</li>
<li>按插入顺序排列</li>
<li>var map=new Map();</li>
<li>const map = new Map([, ['a', 'b']])</li>
<li>keys</li>
<li>values</li>
<li>forEach</li>
<li>delete</li>
<li>get</li>
<li>set</li>
<li>size</li>
<li>clear</li>
</ul>
<ol start="2">
<li>Set也是一组key的集合，存储唯一值</li>
</ol>
<ul>
<li>var s1=new Set();</li>
<li>var s2=new Set();</li>
<li>add</li>
<li>delete</li>
<li>has</li>
<li>clear</li>
<li>size</li>
</ul>
<h1 id="es6的object对象">ES6的object对象</h1>
<h2 id="概念-1">概念</h2>
<ul>
<li>js对象是一种无序的集合数据类型，由若干个键值对组成。</li>
<li>对象是属性的容器，每个属性有名字和值，用k:v对应的关系表示，逗号隔开</li>
<li>对象是无类型的，k,v的值都可以自定义</li>
<li>对象可以嵌套，即对象包含对象，但不建议太多层</li>
<li>属性可以动态添加</li>
<li>所有的属性都是字符串，对应的值可以是任意的类型。</li>
</ul>
<h2 id="使用">使用</h2>
<ul>
<li>K：V的K不需要加引号</li>
<li>优先用. 其次考虑 []</li>
<li>属性通过原型链往上查找，Object.prototype没有的属性，会产生undefined</li>
<li>属性判断：hasOwnProperty，不检查原型链</li>
<li>删除：delete，不涉及原型链的对象</li>
<li>全局变量：命名空间，唯一使用，灵活可读</li>
</ul><br><br>
来源：https://www.cnblogs.com/riyir/p/12624121.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript学习（1）