文章目錄
0.官方文檔：
1.webpack概述：
2.webpack的基本使用：
3.在項(xiàng)目中安裝和配置 webpack：
4.配置自定義打包的自定義入口和出口：
4.配置自動(dòng)打包功能：
5.配置生成預(yù)覽頁面功能：
6.配置自動(dòng)打包相關(guān)參數(shù)：
7.webpack 中的加載器：
8.loader加載器的基本使用：
9.Vue單文件組件：
10.webpack 打包發(fā)布：
11.以上所有配置 webpack.config.js 截圖
1.webpack概述：
webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具(打包工具) ,可以解決當(dāng)前web開發(fā)中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優(yōu)化等強(qiáng)大的功能,從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上,提高了開發(fā)效率和項(xiàng)目的可維護(hù)性
2.webpack的基本使用：
2.1：打開終端運(yùn)行命令 npm init -y 初始化包管理配置文件 package.json
2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）
2.3：如果需要引入 jquery 庫 終端運(yùn)行以下命令npm install jquery -S 安裝 jquery
自己在src文件夾中創(chuàng)建 index.js 引入下載的jquery包import $ from 'jquery'
3.在項(xiàng)目中安裝和配置 webpack：
3.1：終端運(yùn)行 npm install webpack-cli -D 命令，安裝webpack相關(guān)的包
這里要注意一個(gè)問題 : package.json 和 package-lock.json 文件里的名字默認(rèn)為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的話為出現(xiàn)無法安裝的問題
具體可點(diǎn)擊這里 Webpack依賴包安裝問題解決方案
3.2：在項(xiàng)目根目錄中 ，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件
3.3：在 webpack.config.js 中，初始化一下基本配置
建議選擇 development （打包速度快，體積大），項(xiàng)目上線是才改成 production (如果選擇production會(huì)進(jìn)行代碼的壓縮和混淆，打包速度慢，體積小)
3.4：在package.json中的 script節(jié)點(diǎn) 新增一個(gè)dev腳本 值為 webpack ，就可以實(shí)現(xiàn)打包功能
在終端運(yùn)行命令：npm run dev 就可以打包 默認(rèn)打包成main.js在 dist文件夾中
在src自己新建的index.html 中引入打包后的 js
屬性描述符就是一個(gè)屬性除了屬性名與屬性值之外的其他相關(guān)信息
通過Object.getOwnPropertyDescriptor(對(duì)象, 屬性名)可以得到一個(gè)對(duì)象的某個(gè)屬性的屬性描述符
let obj = {
a: 1
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// {
// value: 1,
// writable: true,
// enumerable: true,
// configurable: true
// }
通過Object.getOwnPropertyDescriptors(對(duì)象)可以得到某個(gè)對(duì)象的所有屬性描述符
let obj = {
a: 1,
b: 2
}
console.log(Object.getOwnPropertyDescriptors(obj));
// {
// a: {
// value: 1,
// writable: true,
// enumerable: true,
// configurable: true
// }
// b: {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }
// }
接下來,說一說每一個(gè)屬性描述符的作用
不多逼逼
當(dāng)我們?cè)O(shè)置configurable為false以后,再去修改屬性描述符的話,會(huì)報(bào)錯(cuò)
let obj = {
a: 1,
b: 2
}
Object.defineProperty(obj, 'a', {
value: 'a',
configurable: false
})
Object.defineProperty(obj, 'a', {
value: 'a',
configurable: true
})
// Uncaught TypeError: Cannot redefine property: a
// at Function.defineProperty (<anonymous>)
當(dāng)設(shè)置一個(gè)屬性的enumerable為false時(shí),該屬性不可被forin循環(huán)
但是不影響forof循環(huán),因?yàn)閒orof循環(huán)看有沒有Symbol(Symbol.iterator)
forin循環(huán)的是屬性名,forof循環(huán)的是屬性值
在了解了javascript的語言基礎(chǔ)和特性后
javascript真正大放光彩的地方來了——這就是javascript DOM
Javascript DOM
DOM(Document Object Model)，文檔對(duì)象模型。
是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言（HTML或者XML）的標(biāo)準(zhǔn)編程接口；W3C已經(jīng)定義了一系列DOM接口，通過這些DOM接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。
簡單的說就是一套操作文檔內(nèi)容的方法。
需要注意的是，我們需要把DOM當(dāng)作一個(gè)整體，不能分割看待，即DOM（文檔對(duì)象模型）是一套操作文檔內(nèi)容的方法。
DOM把以上內(nèi)容看作都是對(duì)象
<!DOCTYPE html>
<html>
<head>
<title>Shopping list</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin od beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
1、獲取DOM四種基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的兩種解析：
1. getElementById()：
參數(shù)：元素的ID值。 （元素節(jié)點(diǎn)簡稱元素）
返回值：一個(gè)有指定ID的元素對(duì)象（元素是對(duì)象）
注：這個(gè)方法是與document對(duì)象相關(guān)聯(lián)，只能由document對(duì)象調(diào)用。
用法：document.getElementById(Id)
例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="time">2020-04-16</div>
<script>
// 1. 因?yàn)槲覀兾臋n頁面從上往下加載，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面
// 2. get 獲得 element 元素 by 通過 駝峰命名法
// 3. 參數(shù) id是大小寫敏感的字符串
// 4. 返回的是一個(gè)元素對(duì)象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
</html>
看一下控制臺(tái)打印的是什么
可以看到 console.log(timer)打印出來的是整個(gè)div標(biāo)簽
timer類型是個(gè)對(duì)象
2. getElementsByTagName():
參數(shù)：元素名
返回值：一個(gè)對(duì)象數(shù)組。這個(gè)數(shù)組里每個(gè)元素都是對(duì)象，每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里給定標(biāo)簽的一個(gè)元素。
注：這個(gè)方法可和一般元素關(guān)聯(lián)。這個(gè)方法允許我們把通配符當(dāng)作它的參數(shù)，返回在某份html文檔里總共有多少個(gè)元素節(jié)點(diǎn)。
用法：element.getElementsByTagName(TagName)
例：
var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
2、事件基礎(chǔ)
3.1 事件概述
JavaScript使我們有能力創(chuàng)建動(dòng)態(tài)頁面，而事件是可以被JavaScript偵測(cè)到的行為。
簡單理解：觸發(fā)——>響應(yīng)機(jī)制
網(wǎng)頁中每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件，例如，我們可以在用戶點(diǎn)擊某按鈕產(chǎn)生一個(gè)事件，然后去執(zhí)行某些操作
3.2 事件三要素
事件源 、事件類型、事件處理程序，我們也稱為事件三要素
(1) 事件源 事件被觸發(fā)的對(duì)象 誰
(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
(3) 事件處理程序 通過一個(gè)函數(shù)賦值的方式 完成
代碼實(shí)例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 點(diǎn)擊一個(gè)按鈕，彈出對(duì)話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素
//(1) 事件源 事件被觸發(fā)的對(duì)象 誰 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
//(3) 事件處理程序 通過一個(gè)函數(shù)賦值的方式 完成
btn.onclick = function() {
alert('點(diǎn)秋香');
}
</script>
</body>
</html>
運(yùn)行結(jié)果
1、獲取事件源
2、注冊(cè)事件（綁定事件）
3、添加事件處理程序（采取函數(shù)賦值形式）
代碼實(shí)戰(zhàn)
-
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 執(zhí)行事件步驟
// 點(diǎn)擊div 控制臺(tái)輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 注冊(cè)事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
</html>
常用的DOM事件
onclick事件---當(dāng)用戶點(diǎn)擊時(shí)執(zhí)行
onload事件---當(dāng)用戶進(jìn)入時(shí)執(zhí)行
onunload事件---用用戶離開時(shí)執(zhí)行
onmouseover事件---當(dāng)用戶鼠標(biāo)指針移入時(shí)執(zhí)行
onmouseout事件---當(dāng)用戶鼠標(biāo)指針移出時(shí)執(zhí)行
onmousedown事件---當(dāng)用戶鼠標(biāo)摁下時(shí)執(zhí)行
onmouseup事件---當(dāng)用戶鼠標(biāo)松開時(shí)執(zhí)行
————————————————
版權(quán)聲明：本文為CSDN博主「那是我吶」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42402867/article/details/105567787
文章目錄
繼承性的描述：
繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性，即子元素可以繼承父類的屬性。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依舊是子元素</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我這里體現(xiàn)了層疊性呀</p>
</body>
</html>
使用結(jié)論
由于內(nèi)容有限，但是結(jié)論是一定的，所以我直接給出結(jié)論：
若多個(gè)選擇器定義的樣式不沖突，則元素應(yīng)用所有選擇器定義的樣式。
若多個(gè)選擇器定義的樣式發(fā)生沖突（比如：同時(shí)定義了字體顏色屬性），則CSS按照選擇器的優(yōu)先級(jí)，讓元素應(yīng)用優(yōu)先級(jí)搞得選擇器樣式。
CSS定義的選擇器優(yōu)先級(jí)從高到低為：行內(nèi)樣式–>ID樣式–>類樣式–>標(biāo)記樣式。
如若想直接定義使用哪個(gè)樣式，不考慮優(yōu)先級(jí)的話，則使用!important，把這個(gè)加在樣式后面就行了。
優(yōu)先級(jí)
定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一個(gè)元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。層疊性和選擇器的圈中有很大的關(guān)系。
優(yōu)先級(jí)的使用說明
權(quán)重分析：
內(nèi)聯(lián)樣式：如：style=""，權(quán)重為1000。
ID選擇器，如：#content，權(quán)重為100。
類，偽類和屬性選擇器，如.content，權(quán)重為10。
標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)重為1。
繼承樣式，權(quán)重為0。
將基本選擇器的權(quán)重相加之和，就是權(quán)重大小，值越大，權(quán)重越高。
計(jì)算權(quán)重方法
數(shù)標(biāo)簽：先數(shù)權(quán)重最高的標(biāo)簽，然后數(shù)第二高權(quán)重的標(biāo)簽，以此類推，就會(huì)生成一個(gè)數(shù)組，里面包含四個(gè)數(shù)字。
比如（0，0，0，0）分別對(duì)應(yīng)（行內(nèi)式個(gè)數(shù)，id選擇器個(gè)數(shù)，類選擇器個(gè)數(shù)，標(biāo)簽選擇器個(gè)數(shù)）
然后兩個(gè)選擇器通過對(duì)別四個(gè)數(shù)字的大小，確定權(quán)重關(guān)系。
例：
#box ul li a.cur有1個(gè)id標(biāo)簽，1個(gè)類，3個(gè)標(biāo)簽，那么4個(gè)0就是（0，1，1，3）
.nav ul .active .cur有0個(gè)id，3個(gè)類，1個(gè)標(biāo)簽，那么4個(gè)0就是（0，0，3，1）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我們來試一下優(yōu)先級(jí)</p>
</body>
</html>
先推測(cè)一波，因?yàn)榍懊嬷v到了ID選擇器的權(quán)重是大于類選擇器的，所以這里顏色應(yīng)該為red。
效果如下：
推測(cè)正確！優(yōu)先級(jí)GET！
今天講一下使用vant Swipe 輪播控件過程中遇到的問題
主要是使用swiper自定義的大小的時(shí)候，寬度適應(yīng)不同分辨率的移動(dòng)設(shè)備
適應(yīng)寬度的同時(shí)還需控件的正常使用
先看一下需要實(shí)現(xiàn)的功能，
一個(gè)簡單的輪播圖，但是每個(gè)輪播的寬度需要低于100%，使第二個(gè)輪播的van-swipe-item可以展示到第一個(gè)位置一部分
這時(shí)我們?cè)偃ant的文檔查看一下控件
剛好有一個(gè)自定義控件大小的可以使用，完美解決了我們的問題
當(dāng)我們使用控件之后
<van-swipe :loop="false" @change="onChange" :width="350">
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申請(qǐng)請(qǐng)假一天</p>
<p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申請(qǐng)</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item ><div class="swipe1"></div></van-swipe-item>
<van-swipe-item ><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
發(fā)現(xiàn)功能可以使用，但是再 iPhone8/7 plus 以及iPhone5/se 等分辨率下出現(xiàn)了寬度固定而不適應(yīng)的情況，
簡單來說，我們把van-swipe-item寬度控制在了80% 第二個(gè)van-swipe-item自然可以展示出來一部分
但是當(dāng)滑到第二頁的時(shí)候 由于第一頁的寬度還是80% 所以就出現(xiàn)了這樣的情況，所以我打算采用
動(dòng)態(tài)的改變 滑動(dòng)到第幾頁的時(shí)候 把當(dāng)頁的寬度變?yōu)?0% 其他頁保持不變，
于是
<van-swipe :loop="false" @change="onChange" >
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申請(qǐng)請(qǐng)假一天</p>
<p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申請(qǐng)</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item v-bind:id="item1"><div class="swipe1"></div></van-swipe-item>
<van-swipe-item v-bind:id="item2"><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
首先 我們?yōu)槊總€(gè)swipe-item添加id
data(){
return {
android: true,
ios: true,
iphoneX: true,
current: 0,
item0:'item0',
item1:'item1',
item2:'item2',
}
},
mounted(){
},
methods: {
onChange(index){
console.log('當(dāng)前 Swipe 索引：' + index);
if(index==1){
var div =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==2){
var div1 =document.getElementById("item1").style.setProperty('width', '10rem', 'important');
var div0 =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==0){
var div =document.getElementById("item2");
var div0 =document.getElementById("item0").style.setProperty('width', '9.3333333rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
}
},
此外，監(jiān)聽滑動(dòng)事件，根據(jù)滑動(dòng)到第幾頁 更改當(dāng)前頁面的寬度，
這樣就解決了
蘭蘭設(shè)計(jì)：前端達(dá)人
自己寫了段jquery的ajax請(qǐng)求，并輸出到頁面的表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery實(shí)現(xiàn)JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">點(diǎn)擊</button>
<div id="container">
<!--每個(gè)條目-->
<div class="item">
<div class="item-title">作業(yè)名字</div>
<div>
<span class="item-content">創(chuàng)建時(shí)間</span>
<span class="item-content">發(fā)布老師</span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "xxxxxxxxxxx",
type : "GET",
dataType : "json", // 返回的數(shù)據(jù)類型，設(shè)置為JSONP方式
jsonp : 'callback', //指定一個(gè)查詢參數(shù)名稱來覆蓋默認(rèn)的 jsonp 回調(diào)參數(shù)名 callback
jsonpCallback: 'handleResponse', //設(shè)置回調(diào)函數(shù)名
data : {
q : "javascript",
count : 1,
city:'北京'
},
success: function(response, status, xhr){
// console.log('狀態(tài)為：' + status + ',狀態(tài)是：' + xhr.statusText);
// console.log(response);
var group = response.hourly_forecast;
console.log(group,111111111)
console.log(group.length,222222222222)
//拼接字符串
var str = '';
//對(duì)數(shù)據(jù)做遍歷，拼接到頁面顯示
for(var i=0;i<group.length;i++){
str += '<div class="item">'+
'<div class="item-title">'+ group[i].date +'</div>'+
'<div>'+
'<span class="item-content">'+ group[i].hum +'</span>'+
'<span class="item-content">'+ group[i].pop +'</span>'+
'</div>'+
'</div>';
}
//放入頁面的容器顯示
$('#container').html(str);
}
});
});
});
function handleResponse(response){
// 對(duì)response數(shù)據(jù)進(jìn)行操作代碼
alert("jsonp success!");
}
</script>
</html>
一、處理跨域的方式：
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已經(jīng)實(shí)現(xiàn)了跨域訪問。但ie10以下不支持
只需要在服務(wù)端填上響應(yīng)頭：
header("Access-Control-Allow-Origin:*");
/*星號(hào)表示所有的域都可以接受，*/
header("Access-Control-Allow-Methods:GET,POST");
3.jsonP
原理：
ajax本身是不可以跨域的，
通過產(chǎn)生一個(gè)script標(biāo)簽來實(shí)現(xiàn)跨域。因?yàn)閟cript標(biāo)簽的src屬性是沒有跨域的限制的。
其實(shí)設(shè)置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest沒什么關(guān)系了，取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問。
ajax的跨域?qū)懛ǎ?
（其余寫法和不跨域的一樣）：
比如
https://github.com/xiangshuo1992/preload.git git@github.com:xiangshuo1992/preload.git
這兩個(gè)地址展示的是同一個(gè)項(xiàng)目，但是這兩個(gè)地址之間有什么聯(lián)系呢？
前者是https url 直接有效網(wǎng)址打開，但是用戶每次通過git提交的時(shí)候都要輸入用戶名和密碼，有沒有簡單的一點(diǎn)的辦法，一次配置，永久使用呢？當(dāng)然，所以有了第二種地址，也就是SSH URL，那如何配置就是本文要分享的內(nèi)容。
GitHub配置SSH Key的目的是為了幫助我們?cè)谕ㄟ^git提交代碼是，不需要繁瑣的驗(yàn)證過程，簡化操作流程。
步驟
一、設(shè)置git的user name和email
如果你是第一次使用，或者還沒有配置過的話需要操作一下命令，自行替換相應(yīng)字段。
git config --global user.name "Luke.Deng"
git config --global user.email "xiangshuo1992@gmail.com"
二、檢查是否存在SSH Key
cd ~/.ssh
ls
或者
ll
//看是否存在 id_rsa 和 id_rsa.pub文件，如果存在，說明已經(jīng)有SSH Key
如果沒有SSH Key，則需要先生成一下
ssh-keygen -t rsa -C "xiangshuo1992@gmail.com"
三、獲取SSH Key
cat id_rsa.pub
//拷貝秘鑰 ssh-rsa開頭
四、GitHub添加SSH Key
GitHub點(diǎn)擊用戶頭像，選擇setting
新建一個(gè)SSH Key
取個(gè)名字，把之前拷貝的秘鑰復(fù)制進(jìn)去，添加就好啦。
五、驗(yàn)證和修改
測(cè)試是否成功配置SSH Key
ssh -T git@github.com //運(yùn)行結(jié)果出現(xiàn)類似如下 Hi xiangshuo1992! You've successfully authenticated, but GitHub does not provide shell access.之前已經(jīng)是https的鏈接，現(xiàn)在想要用SSH提交怎么辦？
直接修改項(xiàng)目目錄下.git文件夾下的config文件，將地址修改一下就好了。
————————————————
版權(quán)聲明：本文為CSDN博主「前端向朔」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u013778905/java/article/details/83501204
做過前端開發(fā)的小伙伴就算不是非常理解重排與重繪，但是肯定都聽過這兩個(gè)詞。那為什么這兩個(gè)東西這么重要？因?yàn)樗c我們的頁面性能息息相關(guān)，今天，我們就來好好研究一下這兩個(gè)東西。
瀏覽器的渲染流程
在講解重排和重繪之前，我們有必要說一下瀏覽器的渲染流程。下面是瀏覽器渲染過程中最關(guān)鍵的幾個(gè)部分。如果想了解完整的瀏覽器渲染流程，推薦大家去閱讀李兵老師的瀏覽器工作原理實(shí)踐，需要付費(fèi)閱讀。后期我也會(huì)整理一下再出一篇博客詳細(xì)介紹瀏覽器的渲染過程。
JavaScript：一般來說，我們會(huì)使用 JavaScript 來實(shí)現(xiàn)一些視覺變化的效果。比如用 jQuery 的 animate 函數(shù)做一個(gè)動(dòng)畫、對(duì)一個(gè)數(shù)據(jù)集進(jìn)行排序或者往頁面里添加一些 DOM 元素等。當(dāng)然，除了 JavaScript，還有其他一些常用方法也可以實(shí)現(xiàn)視覺變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
樣式計(jì)算：此過程是根據(jù)匹配選擇器（例如 .headline 或 .nav > .nav__item）計(jì)算出哪些元素應(yīng)用哪些 CSS 規(guī)則的過程。從中知道規(guī)則之后，將應(yīng)用規(guī)則并計(jì)算每個(gè)元素的最終樣式。
布局：在知道對(duì)一個(gè)元素應(yīng)用哪些規(guī)則之后，瀏覽器即可開始計(jì)算它要占據(jù)的空間大小及其在屏幕的位置。網(wǎng)頁的布局模式意味著一個(gè)元素可能影響其他元素，例如 元素的寬度一般會(huì)影響其子元素的寬度以及樹中各處的節(jié)點(diǎn)，因此對(duì)于瀏覽器來說，布局過程是經(jīng)常發(fā)生的。
繪制：繪制是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個(gè)可視部分。繪制一般是在多個(gè)表面（通常稱為層）上完成的。
合成：由于頁面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁面。對(duì)于與另一元素重疊的元素來說，這點(diǎn)特別重要，因?yàn)橐粋€(gè)錯(cuò)誤可能使一個(gè)元素錯(cuò)誤地出現(xiàn)在另一個(gè)元素的上層。
其中，重排和重繪影響的就是其中的布局和繪制過程。
什么是重排和重繪制
重排：當(dāng)DOM的變化引發(fā)了元素幾何屬性的變化，比如改變?cè)氐膶捀?，元素的位置，?dǎo)致瀏覽器不得不重新計(jì)算元素的幾何屬性，并重新構(gòu)建渲染樹，這個(gè)過程稱為“重排”。
重繪：完成重排后，要將重新構(gòu)建的渲染樹渲染到屏幕上，這個(gè)過程就是“重繪”。
簡單來說，涉及元素的幾何更新時(shí)，叫重排。而只涉及樣式更新而不涉及幾何更新時(shí)，叫重繪。對(duì)于兩者來說，重排必定引起重繪，但是重繪并不一定引起重排。所以，當(dāng)涉及重排時(shí)，瀏覽器會(huì)將上述的步驟再次執(zhí)行一遍。當(dāng)只涉及重繪時(shí)，瀏覽器會(huì)跳過Layout步驟，即：
而如果既不需要重排，也不需要重繪，那么就是下面這樣：
瀏覽器會(huì)直接跳到合成階段。顯然，對(duì)于頁面性能來說，不重排也不重繪 > 重繪 > 重排。
什么操作會(huì)引起重排和重繪
顯然，觸發(fā)重排的一般都是幾何因素，這是比較好理解的：
頁面第一次渲染 在頁面發(fā)生首次渲染的時(shí)候，所有組件都要進(jìn)行首次布局，這是開銷最大的一次重排
瀏覽器窗口尺寸改變
元素位置和尺寸發(fā)生改變的時(shí)候
新增和刪除可見元素
內(nèi)容發(fā)生改變（文字?jǐn)?shù)量或圖片大小等等）
元素字體大小變化
還有其他一些操作也可能引發(fā)重排
查詢某些屬性或調(diào)用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我們可能不太理解為什么這些操作也能引起重排，這里我先簡單解釋一下。因?yàn)楝F(xiàn)在的瀏覽器已經(jīng)非常完善了，會(huì)自動(dòng)幫我們做一些優(yōu)化。當(dāng)我們用js操作DOM的時(shí)候，瀏覽器并不是立馬執(zhí)行的，而是將操作存儲(chǔ)在一個(gè)隊(duì)列中。當(dāng)達(dá)到一定數(shù)量或者經(jīng)過一定時(shí)間以后瀏覽器再統(tǒng)一的去執(zhí)行隊(duì)列中的操作。那么回到我們剛才的問題，為什么查詢這些屬性也會(huì)導(dǎo)致重排？因?yàn)楫?dāng)你查詢這些屬性時(shí)，瀏覽器就會(huì)強(qiáng)制刷新隊(duì)列，因?yàn)槿绻涣ⅠR執(zhí)行隊(duì)列中的操作，有可能得到的結(jié)果就是錯(cuò)誤的。所以相當(dāng)于你強(qiáng)制打斷了瀏覽器的優(yōu)化流程，引發(fā)了重排。下面我們通過一些小例子來進(jìn)一步理解這段話：
首先我們來一個(gè)顯然會(huì)引發(fā)重排的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="test">
</div>
<button onclick="reflow()">click</button>
<script>
function reflow() {
var div = document.querySelector("#test");
div.style.left = '200px';
}
</script>
</body>
</html>
把時(shí)間軸往后拉，可以看到這幾個(gè)過程，先簡單介紹一些這些名詞代表的含義：
Recalculate Style：這個(gè)過程就是生成CSSOM的過程
Layout：這就是布局階段，即重排的過程
Update Layer Tree：這個(gè)階段是更新層樹的過程
Paint：該階段是為每一層準(zhǔn)備繪制列表的過程
Composite Layers：該階段是利用繪制列表來生成相應(yīng)圖層的位圖了，還涉及到合成線程和光柵化，performence面板中的Raster就是光柵化線程池 。
這里只做一個(gè)簡單的介紹，對(duì)其中內(nèi)容不太明白的同學(xué)可以參考李兵老師的文章或者在我的下一篇介紹瀏覽器渲染過程的文章中會(huì)詳細(xì)解釋。
那通過這個(gè)圖我們可以看到，我們改變了div的left之后就觸發(fā)了Layout，即重排的過程。下面我們僅改變div的背景顏色，給大家一個(gè)對(duì)比。
即不重排也不重繪
說完了重排和重繪，不要忘記我們最開始提到的，最的方式就是跳過重排和重繪階段。你可能會(huì)想，什么情況下可以做到這一點(diǎn)?其實(shí)這就是我們平時(shí)說的GPU加速，具體是如何實(shí)現(xiàn)呢？在開發(fā)過程中，如果我們使用了某些屬性，瀏覽器會(huì)幫助我們將使用了該屬性的div提升到一個(gè)單獨(dú)的合成層，而在后面的渲染中，提升到該層的div將跳過重排和重繪的操作，直接到合成階段。在stack overflow上有問題提到了這塊內(nèi)容。我們翻譯一下就是：
下面幾個(gè)屬性能讓瀏覽器幫助我們將div提升到一個(gè)單獨(dú)的合成層：
圖層具有3D或透視變換CSS屬性
使用加速視頻解碼的 video 元素
擁有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
對(duì)自己的 opacity 做 CSS 動(dòng)畫或使用一個(gè)動(dòng)畫 webkit 變換的元素
圖層使用加速的CSS過濾器
層具有作為合成層的后代
圖層具有較低z索引的同級(jí)元素，該同級(jí)元素具有合成層（換句話說，該層在合成層的頂部渲染）
css will-change屬性
最后一點(diǎn)是我加上去的，同時(shí)根據(jù)文中的內(nèi)容我們可以知道，css3硬件加速是瀏覽器的行為，所以在不同瀏覽器下可能會(huì)有不同的表現(xiàn)形式。下面我們用一個(gè)例子來理解一下。這是李兵老師在他的專欄中提出的一個(gè)例子，我拿過來借用一下，注意box中的will-change屬性：
<html>
<head>
<title>觀察will-change</title>
<style>
.box {
will-change: transform, opacity;
display: block;
float: left;
width: 40px;
height: 40px;
margin: 15px;
padding: 10px;
border: 1px solid rgb(136, 136, 136);
background: rgb(187, 177, 37);
border-radius: 30px;
transition: border-radius 1s ease-out;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<div id="controls">
<button id="start">start</button>
<button id="stop">stop</button>
</div>
<div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
</div>
<script>
let boxes = document.querySelectorAll('.box');
let boxes1 = document.querySelectorAll('.box1');
let start = document.getElementById('start');
let stop = document.getElementById('stop');
let stop_flag = false
start.addEventListener('click', function () {
stop_flag = false
requestAnimationFrame(render);
})
stop.addEventListener('click', function () {
stop_flag = true
})
let rotate_ = 0
let opacity_ = 0
function render() {
if (stop_flag)
return 0
rotate_ = rotate_ + 6
if (opacity_ > 1)
opacity_ = 0
opacity_ = opacity_ + 0.01
let command = 'rotate(' + rotate_ + 'deg)';
for (let index = 0; index < boxes.length; index++) {
boxes[index].style.transform = command
boxes[index].style.opacity = opacity_
}
requestAnimationFrame(render);
}
</script>
</body>
</html>
————————————————
版權(quán)聲明：本文為CSDN博主「溪寧」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38164763/article/details/105406580
p,h1{
color: blue;
}
用于對(duì)于多個(gè)選擇器進(jìn)行樣式修改，由簡單選擇器組合而成的選擇器，可以是簡單選擇器中的任意組合，如上面代碼例，就是修改了p標(biāo)簽和h1標(biāo)簽的字體顏色。
格式
元素[屬性名]{
聲明的屬性和屬性值;
}
p[id]{
color: blue;
}
前面添加元素的名字，然后后面加上屬性名，比如上例，就是p標(biāo)簽，其中帶有id的元素，然后把字體顏色設(shè)置為藍(lán)色。
格式
元素[屬性名=屬性值]{
聲明的屬性和屬性值;
}
p[class = 'p2']{
color: blue;
}
和上面的根據(jù)屬性名查找差不多，只不過更加了，到了屬性名后面的屬性值，上例就是作用于p標(biāo)簽，只不過條件是為帶有class屬性，并且屬性值為p2的p標(biāo)簽。
格式
元素[屬性名或?qū)傩员磉_(dá)式][屬性名或?qū)傩员磉_(dá)式]..{
聲明的屬性和屬性值;
}
p[title][class]{
color: blue;
}
元素后面加。屬性名或?qū)傩员磉_(dá)式，可以加+∞個(gè)，但是沒必要。上例為：設(shè)置title屬性和class屬性的段落p標(biāo)簽的樣式
格式
元素[元素名~=屬性值]{
聲明的屬性和屬性值;
}
元素[屬性名|=值]{
聲名的屬性和屬性值;
}
p[class~='red']{
color: blue;
}
注意，這里是~=，為約等于，就是找滿足符合約等于條件的標(biāo)簽，上例為：設(shè)置class屬性的值，包含red屬性名的標(biāo)簽
格式
元素名1~元素名2{
聲名的屬性和屬性值;
}
a~p{
color: blue;
}
a標(biāo)簽后面的每一個(gè)p標(biāo)簽，都進(jìn)行了樣式的修改。
格式
父類標(biāo)簽 子類標(biāo)簽{ /*注意倆標(biāo)簽中間有空格*/
聲名的屬性和屬性值;
}
div strong{
color: blue;
}
格式
父標(biāo)簽+子標(biāo)簽{
聲名的屬性和屬性值;
}
#div1 + p{
color: blue;
}
————————————————
版權(quán)聲明：本文為CSDN博主「董小宇」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lolly1023/article/details/105413125
目錄
JavaScript
=== !==
1. JS 發(fā)展歷史
JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)?Netscape 與 Sun 合作，Netscape 管理層希望它外觀看起來像 Java，因此取名為 JavaScript。但實(shí)際上它的語法風(fēng)格與 Self 及 Scheme 較為接近；
歐洲計(jì)算機(jī)制造聯(lián)盟（ECMA）在 1997 制定腳本語言規(guī)范 ECMA Script1 (ES1)，2009 年發(fā)布了 ECMA Script5（ES5），在 2015 年發(fā)布了 ECMA Script 2015（ES6），所有的瀏覽器的都支持 ES6；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS兩種引入方式</title>
</head>
<body>
<!-- JS兩種引入方式：JS和CSS一樣都需要引入到html頁面中，瀏覽器才會(huì)解釋執(zhí)行，JS有兩種引入方式：
1.內(nèi)嵌(內(nèi)部)腳本:在script標(biāo)簽中寫js代碼,script標(biāo)簽推薦放置在body標(biāo)簽的底部,理論上和style標(biāo)簽一樣可以放置位置任意；
2.外部腳步:使用script標(biāo)簽的src屬性引入外部js文件,使用注意事項(xiàng): script標(biāo)簽使用了src屬性以后內(nèi)部的代碼不再被瀏覽器解釋執(zhí)行，script引入外部腳本時(shí)不能使用自閉合格式 -->
<!--告訴瀏覽器把解析器切換為js解析器 type="text/javascript"可以省略-->
<script type="text/javascript"> document.write("<h1>內(nèi)部腳本</h1>");//向body中追加html內(nèi)容 </script>
<script src="../js/外部腳本.js"></script>
</body>
</html>
b. 三種輸出方式 console.log document.write alert
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三種輸出方式</title>
</head>
<body>
<!-- JS三種輸出方式：
1.輸出到瀏覽器控制臺(tái)；
2.輸出html內(nèi)容到頁面；
3.瀏覽器彈框輸出字符 -->
<script>
//1.輸出到瀏覽器控制臺(tái)
console.log("1. 輸出到瀏覽器控制臺(tái)");//開發(fā)者專用
//2.輸出html內(nèi)容到頁面
document.write("2. 輸出html內(nèi)容到頁面");//向body中追加html內(nèi)容
//3.瀏覽器彈框輸出字符
alert("3. 瀏覽器彈框輸出字符");//阻塞執(zhí)行
</script>
</body>
</html>
c. 變量聲明 var let const typeof undefined
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS變量</title>
</head>
<body>
<!-- JS變量用來存放數(shù)據(jù)；
es5以前變量聲明使用var；
es6之后變量聲明使用let，常量聲明使用const。他們用于替代es6的var聲明方式；
JS是弱類型語言:
聲明變量時(shí)不知道變量的類型(undefined),只有在賦值之后js變量才確定類型；
typeof(a) 或 typeof a 輸出變量的類型；
undefined表示變量未賦值,未知類型 -->
<script>
//字符串 Java聲明 String str ="張三";
let str ="張三";
console.log(str);
//整數(shù) Java聲明 int k = 5;
let k = 5;
console.log(k);
//小數(shù) Java聲明 float f = 7.5;
let f = 7.5;
console.log(f);
//常量 Java聲明 final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
//演示弱類型語言
let a;//聲明變量不需要指明類型
console.log(typeof a);//undefined 未賦值類型,未知類型
a = "你好";
console.log(typeof a);//string
a = 123;
console.log(typeof a);//number
a = true;
console.log(typeof a);//boolean
a = new Object();
console.log(typeof a);//object
</script>
</body>
</html>
d. 數(shù)據(jù)類型簡介 string number boolean object undefined
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS數(shù)據(jù)類型</title>
</head>
<body>
<!-- JS數(shù)據(jù)類型,常用數(shù)據(jù)類型:
1.string 字符串類型;
2.number 數(shù)字.包括整數(shù)和小數(shù)類型;
3.boolean 布爾類型.值只有true和false兩個(gè);
4 object 對(duì)象類型,空對(duì)象使用null表示,有兩種格式:
new Object();
JSON格式.例如:{name:"張三",age:18};
5.undefined 變量未賦值 -->
<script>
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
// 2. number 數(shù)字
let n = 123.456;
console.log(n);
console.log(typeof n);//number
// 3. boolean 布爾類型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
// 4. object 對(duì)象類型，空對(duì)象使用 null表示
let obj = null;//或 new Object();
console.log(obj);
console.log(typeof obj);//object
// 5. undefined 變量未賦值
let u = undefined;
console.log(u);//值是undefined
console.log(typeof u);//類型是undefined
// Object類型
let stu = new Object();//創(chuàng)建一個(gè)js對(duì)象,js對(duì)象的屬性想要直接加上
stu.id = 1;
stu.name = "劉一";
stu.age = 18;
console.log(stu);//{id: 1, name: "劉一", age: 18}
console.log(typeof stu);//object
// JS對(duì)象取屬性值有兩種方式:
// 1. obj.key
console.log(stu.name);//劉一
// 2. obj["key"]
console.log(stu["name"]); //劉一 == stu.name
let b = "age";
console.log(stu[b]);//可以取不定屬性的值
</script>
</body>
</html>
e. 運(yùn)算符 + - * / % = < > && || !
i. 全等符與不全等符
=== !==
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS運(yùn)算符</title>
</head>
<body>
<!--
JS運(yùn)算符
js運(yùn)算符和Java運(yùn)算符基本相同
只有一個(gè)特殊的比較運(yùn)算符
=== 判斷js變量的值和類型都相等才為true
!== 不全等，判斷js變量的值和類型有一個(gè)不等就為true
-->
<script> let a = 3;
let b = "3";
console.log(a == b);//true
// 全等 運(yùn)算符 ===
console.log(a === b);//false
// 不全等 運(yùn)算符 !==
console.log(a !== b);//true
// 三元(三目)運(yùn)算符 布爾表達(dá)式?真:假
let str = a===b?"全等":"不全等";
console.log(str);//不全等
</script>
</body>
</html>
f. 流程控制語句
i. 條件語句 if else switch case default break
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>條件語句</title>
</head>
<body>
<!-- 條件語句JS的條件語句和Java語法基本一樣,但是對(duì)數(shù)據(jù)類型的真假判斷有些區(qū)別 JS中對(duì)各種數(shù)據(jù)類型作為布爾值的特點(diǎn):(重點(diǎn)掌握) 1. string 空字符串""為false,其余都為true 2. number 數(shù)字 只有0為false,其余數(shù)字都為true 3. boolean 布爾類型 值只有 true和false 兩個(gè)
循環(huán)語句
object 對(duì)象類型 空對(duì)象null表示false,其它對(duì)象都是true 5. undefined 變量未賦值 為false 常用語法格式 if ... else if ... else switch case break default -->
<script>
//if ... else
//if(true){
//if(""){// string 只有空字符為假
//if(0){number 只有0為假
//if(false){//boolean false為假 true為真
//if(null){//object null為假
//if(undefined){//undefined永為假
if("undefined"){//undefined永為假
console.log("滿足條件");
}else{
console.log("不滿足條件");
}
//switch case break default
let k =1;
switch (k) {
case 1:
console.log("111");break;
case 2:
console.log("222");break;
default: console.log("其它情況"); }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環(huán)語句</title>
</head>
<body>
<!-- 循環(huán)語句
while，do while，fori 和Java一樣；
forin
1.遍歷出數(shù)組中的索引和元素
2.遍歷出對(duì)象中的屬性和元素
forof
1.遍歷出數(shù)組中的元素
forin 與 forof 區(qū)別:
1.forin可以遍歷對(duì)象,forof不能遍歷對(duì)象
2.forin可以遍歷出數(shù)組中的索引,forof只能遍歷出數(shù)組中的元素 -->
<script>
//while 和Java一樣
let k=1;
while (k<3){
console.log(k++);
}
//do while 和Java一樣
k =1;
do{
console.log(k++);
}while (k<3)
//fori 和Java一樣
for(let i=0;i<3;i++){
console.log(i);
}
//forin 可以遍歷數(shù)組和對(duì)象
let arr = ["劉一","陳二","張三"];//JS數(shù)組使用中括號(hào)[]定義
let stu = {id:5,name:"李四",age:18};//JS對(duì)象使用大括號(hào)定義
//1.forin 遍歷出數(shù)組中的索引
for(let index in arr){
console.log(index);//數(shù)組的索引 0,1,2
console.log(arr[index]);//數(shù)組中的元素
}
//2.forin 遍歷出對(duì)象中的屬性名key
for(let k in stu){
console.log(k);//字符串屬性 id,name,age
console.log(stu[k]);//對(duì)象中的屬性值
}
//forof 可以遍歷數(shù)組
for(let e of arr){
console.log(e);//數(shù)組中的元素
}</script>
</body>
</html>
———————————————— 版權(quán)聲明：本文為CSDN博主「Regino」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/Regino/article/details/105321573
原文鏈接：https://blog.csdn.net/Regino/article/details/105321573
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com