首頁

212020-4

Webpack：知識點總結以及遇到問題的處理辦法

文章目錄

0.官方文檔：

1.webpack概述：

2.webpack的基本使用：

3.在項目中安裝和配置 webpack：

4.配置自定義打包的自定義入口和出口：

4.配置自動打包功能：

5.配置生成預覽頁面功能：

6.配置自動打包相關參數：

7.webpack 中的加載器：

8.loader加載器的基本使用：

9.Vue單文件組件：

10.webpack 打包發布：

11.以上所有配置 webpack.config.js 截圖

1.webpack概述：
webpack是一個流行的前端項目構建工具(打包工具) ,可以解決當前web開發中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能,從而讓程序員把工作的重心放到具體的功能實現上,提高了開發效率和項目的可維護性

2.webpack的基本使用：
2.1：打開終端運行命令 npm init -y 初始化包管理配置文件 package.json

2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）

2.3：如果需要引入 jquery 庫終端運行以下命令npm install jquery -S 安裝 jquery

自己在src文件夾中創建 index.js 引入下載的jquery包import $ from 'jquery'

3.在項目中安裝和配置 webpack：
3.1：終端運行 npm install webpack-cli -D 命令，安裝webpack相關的包

這里要注意一個問題 : package.json 和 package-lock.json 文件里的名字默認為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成其他名字比如 “name”=“webpack_” 不然的話為出現無法安裝的問題

具體可點擊這里 Webpack依賴包安裝問題解決方案
3.2：在項目根目錄中，創建名為 webpack.config.js 的 webpack 配置文件

3.3：在 webpack.config.js 中，初始化一下基本配置

建議選擇 development （打包速度快，體積大），項目上線是才改成 production (如果選擇production會進行代碼的壓縮和混淆，打包速度慢，體積小)

3.4：在package.json中的 script節點新增一個dev腳本值為 webpack ，就可以實現打包功能

在終端運行命令：npm run dev 就可以打包默認打包成main.js在 dist文件夾中
在src自己新建的index.html 中引入打包后的 js

評論(0) 瀏覽(2701)

212020-4

屬性描述符與Proxy的區別&Vue3.0為何改用Proxy

前端達人

屬性描述符

什么是屬性描述符?

屬性描述符就是一個屬性除了屬性名與屬性值之外的其他相關信息

通過Object.getOwnPropertyDescriptor(對象, 屬性名)可以得到一個對象的某個屬性的屬性描述符

let obj = {
    a: 1
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// {
//     value: 1,
//     writable: true,
//     enumerable: true,
//     configurable: true
// }

通過Object.getOwnPropertyDescriptors(對象)可以得到某個對象的所有屬性描述符

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
//     }
// }

接下來,說一說每一個屬性描述符的作用

value-屬性值

不多逼逼

configurable-屬性描述符是否可被修改

當我們設置configurable為false以后,再去修改屬性描述符的話,會報錯

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>)

enumerable-該屬性是否可被枚舉

當設置一個屬性的enumerable為false時,該屬性不可被forin循環
但是不影響forof循環,因為forof循環看有沒有Symbol(Symbol.iterator)
forin循環的是屬性名,forof循環的是屬性值

評論(0) 瀏覽(2829)

182020-4

前端學習之JavaScript DOM以及DOM操作的基礎知識

前端達人

在了解了javascript的語言基礎和特性后

javascript真正大放光彩的地方來了——這就是javascript DOM

Javascript DOM
DOM(Document Object Model)，文檔對象模型。

是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口；W3C已經定義了一系列DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式。

簡單的說就是一套操作文檔內容的方法。

需要注意的是，我們需要把DOM當作一個整體，不能分割看待，即DOM（文檔對象模型）是一套操作文檔內容的方法。

文檔：一個頁面就是一個文檔，DOM中使用document表示
元素：頁面中的所有標簽都是元素，DOM中使用element表示
節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），DOM中使用node表示

DOM把以上內容看作都是對象

<!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()：

參數：元素的ID值。（元素節點簡稱元素）
返回值：一個有指定ID的元素對象（元素是對象）
注：這個方法是與document對象相關聯，只能由document對象調用。
用法：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. 因為我們文檔頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面
        // 2. get 獲得 element 元素 by 通過 駝峰命名法 
        // 3. 參數 id是大小寫敏感的字符串
        // 4. 返回的是一個元素對象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
        console.dir(timer);
    </script>
</body>

</html>

看一下控制臺打印的是什么

可以看到 console.log(timer)打印出來的是整個div標簽

timer類型是個對象

2. getElementsByTagName():

參數：元素名
返回值：一個對象數組。這個數組里每個元素都是對象，每個對象分別對應著文檔里給定標簽的一個元素。
注：這個方法可和一般元素關聯。這個方法允許我們把通配符當作它的參數，返回在某份html文檔里總共有多少個元素節點。
用法：element.getElementsByTagName(TagName)

例：

var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12

2、事件基礎
3.1 事件概述
JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行為。

簡單理解：觸發——>響應機制

網頁中每個元素都可以產生某些可以觸發JavaScript的事件，例如，我們可以在用戶點擊某按鈕產生一個事件，然后去執行某些操作

3.2 事件三要素
事件源、事件類型、事件處理程序，我們也稱為事件三要素

(1) 事件源事件被觸發的對象誰
(2) 事件類型如何觸發什么事件比如鼠標點擊(onclick) 還是鼠標經過還是鍵盤按下
(3) 事件處理程序通過一個函數賦值的方式完成

代碼實例

<!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>
        // 點擊一個按鈕，彈出對話框
        // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱為事件三要素
        //(1) 事件源 事件被觸發的對象   誰  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件類型  如何觸發 什么事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
        //(3) 事件處理程序  通過一個函數賦值的方式 完成
        btn.onclick = function() {
            alert('點秋香');
        }
    </script>
</body>

</html>

運行結果

3.3 執行事件的步驟

1、獲取事件源

2、注冊事件（綁定事件）

3、添加事件處理程序（采取函數賦值形式）

代碼實戰

<!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>
        // 執行事件步驟
        // 點擊div 控制臺輸出 我被選中了
        // 1. 獲取事件源
        var div = document.querySelector('div');
        // 2.綁定事件 注冊事件
        // div.onclick 
        // 3.添加事件處理程序 
        div.onclick = function() {
            console.log('我被選中了');

        }
    </script>
</body>

</html>

常用的DOM事件
onclick事件---當用戶點擊時執行
onload事件---當用戶進入時執行
onunload事件---用用戶離開時執行
onmouseover事件---當用戶鼠標指針移入時執行
onmouseout事件---當用戶鼠標指針移出時執行
onmousedown事件---當用戶鼠標摁下時執行
onmouseup事件---當用戶鼠標松開時執行

————————————————
版權聲明：本文為CSDN博主「那是我吶」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42402867/article/details/105567787

評論(0) 瀏覽(2816)

182020-4

【CSS基礎學習】CSS的三大特性

前端達人

文章目錄

繼承性

繼承性的使用說明
CSS繼承的局限性

層疊性

層疊性的使用說明
使用結論

優先級

優先級的使用說明

CSS有三大特性，分別是繼承性，層疊性，優先級。CSS的主要特征是繼承性，這里先講解繼承性。

繼承性

繼承性的使用說明

繼承性的描述：
繼承性是指被包在內部的標簽將擁有外部標簽的樣式性，即子元素可以繼承父類的屬性。
例：

<!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>

效果如下：

有圖可見，被div包裹住的元素，都具有了div的css樣式屬性，這被我們稱為繼承性。

在CSS中以，text-,font-,line-開頭的屬性都是可以繼承的。

CSS繼承的局限性
并不是所有的CSS屬性都可以被繼承的，以下就不具有繼承性：

a標簽的字體顏色不會被繼承，a標簽的字體顏色是不會改變的，可以通過頁面的的F12可以查看到，a標簽是有一個默認的color:-webkit-link;字體顏色屬性，所以父元素設置顏色是不能發生改變a標簽字體的顏色。
h標簽的字體的大小也是不能被繼承的，如下代碼給父元素在設置一個字體屬性20px，再添加一個h標簽，在瀏覽器中可以發現h標簽中字體的大小是不會發生改變的，因為h標簽中有一個默認的font-size:1.5em;字體大小屬性。
div標簽的高度如果不設置由內容來絕對（沒有內容高度未0），寬度默認由父元素繼承過來
邊框屬性
外邊距屬性
內邊距屬性
背景屬性
定位屬性
布局屬性
元素寬高屬性
層疊性
層疊性的使用說明
層疊性的表述
所謂層疊性是指多種CSS樣式的疊加，例如，當使用內嵌式CSS樣式表定義p標記字號大小為12像素，ID選擇器定義p標記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產生了疊加。
例：

<!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;">我這里體現了層疊性呀</p>
</body>
</html>

使用結論
由于內容有限，但是結論是一定的，所以我直接給出結論：

若多個選擇器定義的樣式不沖突，則元素應用所有選擇器定義的樣式。
若多個選擇器定義的樣式發生沖突（比如：同時定義了字體顏色屬性），則CSS按照選擇器的優先級，讓元素應用優先級搞得選擇器樣式。
CSS定義的選擇器優先級從高到低為：行內樣式–>ID樣式–>類樣式–>標記樣式。
如若想直接定義使用哪個樣式，不考慮優先級的話，則使用!important，把這個加在樣式后面就行了。
優先級
定義CSS樣式時，經常出現兩個或更多規則應用在同一個元素上，這時就會出現優先級的問題。層疊性和選擇器的圈中有很大的關系。

優先級的使用說明
權重分析：

內聯樣式：如：style=""，權重為1000。
ID選擇器，如：#content，權重為100。
類，偽類和屬性選擇器，如.content，權重為10。
標簽選擇器和偽元素選擇器，如div p，權重為1。
繼承樣式，權重為0。
將基本選擇器的權重相加之和，就是權重大小，值越大，權重越高。
計算權重方法
數標簽：先數權重最高的標簽，然后數第二高權重的標簽，以此類推，就會生成一個數組，里面包含四個數字。
比如（0，0，0，0）分別對應（行內式個數，id選擇器個數，類選擇器個數，標簽選擇器個數）
然后兩個選擇器通過對別四個數字的大小，確定權重關系。
例：
#box ul li a.cur有1個id標簽，1個類，3個標簽，那么4個0就是（0，1，1，3）
.nav ul .active .cur有0個id，3個類，1個標簽，那么4個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">我們來試一下優先級</p>
</body>
</html>

先推測一波，因為前面講到了ID選擇器的權重是大于類選擇器的，所以這里顏色應該為red。
效果如下：

推測正確！優先級GET！

評論(0) 瀏覽(3401)

172020-4

vue，vant，使用過程中 Swipe 輪播自定義大小遇到的坑

前端達人

今天講一下使用vant Swipe 輪播控件過程中遇到的問題

主要是使用swiper自定義的大小的時候，寬度適應不同分辨率的移動設備

適應寬度的同時還需控件的正常使用

先看一下需要實現的功能，

一個簡單的輪播圖，但是每個輪播的寬度需要低于100%，使第二個輪播的van-swipe-item可以展示到第一個位置一部分

這時我們再去vant的文檔查看一下控件

剛好有一個自定義控件大小的可以使用，完美解決了我們的問題

當我們使用控件之后

 <van-swipe :loop="false"  @change="onChange" :width="350">
        <van-swipe-item v-bind:id="item0"><div class="swipe0">
            <div class="contion">

                <p class="title">家中有事，申請請假一天</p>
                <p class="title1"><span class="rice"></span>部門經理核審中</p>
                <p class="time">03.8 &nbsp;&nbsp;&nbsp; 14.25</p>
                <p class="type">放假申請</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>

發現功能可以使用，但是再 iPhone8/7 plus 以及iPhone5/se 等分辨率下出現了寬度固定而不適應的情況，

簡單來說，我們把van-swipe-item寬度控制在了80% 第二個van-swipe-item自然可以展示出來一部分

但是當滑到第二頁的時候由于第一頁的寬度還是80% 所以就出現了這樣的情況，所以我打算采用

監聽 change 事件

動態的改變滑動到第幾頁的時候把當頁的寬度變為80% 其他頁保持不變，

于是

 <van-swipe :loop="false"  @change="onChange" >
        <van-swipe-item v-bind:id="item0"><div class="swipe0">
            <div class="contion">

                <p class="title">家中有事，申請請假一天</p>
                <p class="title1"><span class="rice"></span>部門經理核審中</p>
                <p class="time">03.8 &nbsp;&nbsp;&nbsp; 14.25</p>
                <p class="type">放假申請</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>

首先我們為每個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('當前 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');
                }
            },

此外，監聽滑動事件，根據滑動到第幾頁更改當前頁面的寬度，

這樣就解決了

Swipe自定義寬度下，同時適應不同分辨率的情況

蘭蘭設計：前端達人

評論(0) 瀏覽(16211)

162020-4

jquery，ajax請求并處理跨域

前端達人

自己寫了段jquery的ajax請求，并輸出到頁面的表格中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery實現JSONP</title>
</head>
<body>
<div id="mydiv">
    <button id="btn">點擊</button>

    <div id="container">
        <!--每個條目-->
        <div class="item">
            <div class="item-title">作業名字</div>
            <div>
                <span class="item-content">創建時間</span>
                <span class="item-content">發布老師</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", // 返回的數據類型，設置為JSONP方式
                jsonp : 'callback', //指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback
                jsonpCallback: 'handleResponse', //設置回調函數名
                data : {
                    q : "javascript",
                    count : 1,
                    city:'北京'
                },
                success: function(response, status, xhr){
                    // console.log('狀態為：' + status + ',狀態是：' + xhr.statusText);
                    // console.log(response);

                    var group = response.hourly_forecast;

                    console.log(group,111111111)
                    console.log(group.length,222222222222)

                    //拼接字符串
                    var str = '';
                    //對數據做遍歷，拼接到頁面顯示
                    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){
        // 對response數據進行操作代碼
        alert("jsonp success!");
    }
</script>
</html>

jquery中ajax處理跨域的三大方式

一、處理跨域的方式：

1.代理

2.XHR2

HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已經實現了跨域訪問。但ie10以下不支持

只需要在服務端填上響應頭：

header("Access-Control-Allow-Origin:*");

/*星號表示所有的域都可以接受，*/

header("Access-Control-Allow-Methods:GET,POST");

3.jsonP

原理：

ajax本身是不可以跨域的，通過產生一個script標簽來實現跨域。因為script標簽的src屬性是沒有跨域的限制的。

其實設置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest沒什么關系了，取而代之的則是JSONP協議。JSONP是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問。

ajax的跨域寫法：

（其余寫法和不跨域的一樣）：

比如

評論(0) 瀏覽(2820)

122020-4

GitHub如何配置SSH Key

前端達人

文章目錄

步驟

一、設置git的user name和email
二、檢查是否存在SSH Key
三、獲取SSH Key
四、GitHub添加SSH Key

五、驗證和修改

https://github.com/xiangshuo1992/preload.git
git@github.com:xiangshuo1992/preload.git

這兩個地址展示的是同一個項目，但是這兩個地址之間有什么聯系呢？
前者是https url 直接有效網址打開，但是用戶每次通過git提交的時候都要輸入用戶名和密碼，有沒有簡單的一點的辦法，一次配置，永久使用呢？當然，所以有了第二種地址，也就是SSH URL，那如何配置就是本文要分享的內容。
GitHub配置SSH Key的目的是為了幫助我們在通過git提交代碼是，不需要繁瑣的驗證過程，簡化操作流程。

步驟
        
            一、設置git的user name和email
        
如果你是第一次使用，或者還沒有配置過的話需要操作一下命令，自行替換相應字段。
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文件，如果存在，說明已經有SSH Key

如果沒有SSH Key，則需要先生成一下


ssh-keygen -t rsa -C "xiangshuo1992@gmail.com"

      
        
            三、獲取SSH Key
        

cat id_rsa.pub
//拷貝秘鑰 ssh-rsa開頭

      
        
            四、GitHub添加SSH Key
        
GitHub點擊用戶頭像，選擇setting

新建一個SSH Key

取個名字，把之前拷貝的秘鑰復制進去，添加就好啦。

      
        
            五、驗證和修改
        
測試是否成功配置SSH Key


ssh -T git@github.com
//運行結果出現類似如下
Hi xiangshuo1992! You've successfully authenticated, but GitHub does not provide shell access.
之前已經是https的鏈接，現在想要用SSH提交怎么辦？

直接修改項目目錄下 .git文件夾下的config文件，將地址修改一下就好了。

評論(0) 瀏覽(2919)

112020-4

你真的了解重排和重繪嗎？

前端達人

做過前端開發的小伙伴就算不是非常理解重排與重繪，但是肯定都聽過這兩個詞。那為什么這兩個東西這么重要？因為他與我們的頁面性能息息相關，今天，我們就來好好研究一下這兩個東西。

瀏覽器的渲染流程

在講解重排和重繪之前，我們有必要說一下瀏覽器的渲染流程。下面是瀏覽器渲染過程中最關鍵的幾個部分。如果想了解完整的瀏覽器渲染流程，推薦大家去閱讀李兵老師的瀏覽器工作原理實踐，需要付費閱讀。后期我也會整理一下再出一篇博客詳細介紹瀏覽器的渲染過程。

JavaScript：一般來說，我們會使用 JavaScript 來實現一些視覺變化的效果。比如用 jQuery 的 animate 函數做一個動畫、對一個數據集進行排序或者往頁面里添加一些 DOM 元素等。當然，除了 JavaScript，還有其他一些常用方法也可以實現視覺變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
樣式計算：此過程是根據匹配選擇器（例如 .headline 或 .nav > .nav__item）計算出哪些元素應用哪些 CSS 規則的過程。從中知道規則之后，將應用規則并計算每個元素的最終樣式。
布局：在知道對一個元素應用哪些規則之后，瀏覽器即可開始計算它要占據的空間大小及其在屏幕的位置。網頁的布局模式意味著一個元素可能影響其他元素，例如元素的寬度一般會影響其子元素的寬度以及樹中各處的節點，因此對于瀏覽器來說，布局過程是經常發生的。
繪制：繪制是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個可視部分。繪制一般是在多個表面（通常稱為層）上完成的。
合成：由于頁面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁面。對于與另一元素重疊的元素來說，這點特別重要，因為一個錯誤可能使一個元素錯誤地出現在另一個元素的上層。
其中，重排和重繪影響的就是其中的布局和繪制過程。

什么是重排和重繪制
重排：當DOM的變化引發了元素幾何屬性的變化，比如改變元素的寬高，元素的位置，導致瀏覽器不得不重新計算元素的幾何屬性，并重新構建渲染樹，這個過程稱為“重排”。
重繪：完成重排后，要將重新構建的渲染樹渲染到屏幕上，這個過程就是“重繪”。
簡單來說，涉及元素的幾何更新時，叫重排。而只涉及樣式更新而不涉及幾何更新時，叫重繪。對于兩者來說，重排必定引起重繪，但是重繪并不一定引起重排。所以，當涉及重排時，瀏覽器會將上述的步驟再次執行一遍。當只涉及重繪時，瀏覽器會跳過Layout步驟，即：

而如果既不需要重排，也不需要重繪，那么就是下面這樣：

瀏覽器會直接跳到合成階段。顯然，對于頁面性能來說，不重排也不重繪 > 重繪 > 重排。

什么操作會引起重排和重繪
顯然，觸發重排的一般都是幾何因素，這是比較好理解的：

頁面第一次渲染在頁面發生首次渲染的時候，所有組件都要進行首次布局，這是開銷最大的一次重排
瀏覽器窗口尺寸改變
元素位置和尺寸發生改變的時候
新增和刪除可見元素
內容發生改變（文字數量或圖片大小等等）
元素字體大小變化
還有其他一些操作也可能引發重排

查詢某些屬性或調用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我們可能不太理解為什么這些操作也能引起重排，這里我先簡單解釋一下。因為現在的瀏覽器已經非常完善了，會自動幫我們做一些優化。當我們用js操作DOM的時候，瀏覽器并不是立馬執行的，而是將操作存儲在一個隊列中。當達到一定數量或者經過一定時間以后瀏覽器再統一的去執行隊列中的操作。那么回到我們剛才的問題，為什么查詢這些屬性也會導致重排？因為當你查詢這些屬性時，瀏覽器就會強制刷新隊列，因為如果不立馬執行隊列中的操作，有可能得到的結果就是錯誤的。所以相當于你強制打斷了瀏覽器的優化流程，引發了重排。下面我們通過一些小例子來進一步理解這段話：

首先我們來一個顯然會引發重排的操作

<!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>

把時間軸往后拉，可以看到這幾個過程，先簡單介紹一些這些名詞代表的含義：

Recalculate Style：這個過程就是生成CSSOM的過程
Layout：這就是布局階段，即重排的過程
Update Layer Tree：這個階段是更新層樹的過程
Paint：該階段是為每一層準備繪制列表的過程
Composite Layers：該階段是利用繪制列表來生成相應圖層的位圖了，還涉及到合成線程和光柵化，performence面板中的Raster就是光柵化線程池。
這里只做一個簡單的介紹，對其中內容不太明白的同學可以參考李兵老師的文章或者在我的下一篇介紹瀏覽器渲染過程的文章中會詳細解釋。

那通過這個圖我們可以看到，我們改變了div的left之后就觸發了Layout，即重排的過程。下面我們僅改變div的背景顏色，給大家一個對比。

即不重排也不重繪
說完了重排和重繪，不要忘記我們最開始提到的，最的方式就是跳過重排和重繪階段。你可能會想，什么情況下可以做到這一點?其實這就是我們平時說的GPU加速，具體是如何實現呢？在開發過程中，如果我們使用了某些屬性，瀏覽器會幫助我們將使用了該屬性的div提升到一個單獨的合成層，而在后面的渲染中，提升到該層的div將跳過重排和重繪的操作，直接到合成階段。在stack overflow上有問題提到了這塊內容。我們翻譯一下就是：
下面幾個屬性能讓瀏覽器幫助我們將div提升到一個單獨的合成層：

圖層具有3D或透視變換CSS屬性
使用加速視頻解碼的 video 元素
擁有 3D（WebGL）上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素
圖層使用加速的CSS過濾器
層具有作為合成層的后代
圖層具有較低z索引的同級元素，該同級元素具有合成層（換句話說，該層在合成層的頂部渲染）
css will-change屬性
最后一點是我加上去的，同時根據文中的內容我們可以知道，css3硬件加速是瀏覽器的行為，所以在不同瀏覽器下可能會有不同的表現形式。下面我們用一個例子來理解一下。這是李兵老師在他的專欄中提出的一個例子，我拿過來借用一下，注意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">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</div>
          <div class="box">旋轉盒子</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>

————————————————
版權聲明：本文為CSDN博主「溪寧」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38164763/article/details/105406580

評論(0) 瀏覽(2697)

112020-4

【CSS基礎學習】復雜選擇器

前端達人

文章目錄

CSS第二課-復雜選擇器

群組選擇器
屬性選擇器

根據屬性名查找元素
根據屬性值查找
多屬性選擇器
根據屬性值近似查找
根據標簽查找

派生選擇器

后代選擇器
子元素選擇器

相鄰兄弟選擇器

CSS第二課-復雜選擇器

群組選擇器

格式

選擇器1,選擇器2,,,選擇器n

{

聲明的屬性和屬性值

}

p,h1{
    color: blue;
}

用于對于多個選擇器進行樣式修改，由簡單選擇器組合而成的選擇器，可以是簡單選擇器中的任意組合，如上面代碼例，就是修改了p標簽和h1標簽的字體顏色。

屬性選擇器

根據屬性名查找元素

格式

元素[屬性名]{
    聲明的屬性和屬性值;
}

p[id]{
    color: blue;
}

前面添加元素的名字，然后后面加上屬性名，比如上例，就是p標簽，其中帶有id的元素，然后把字體顏色設置為藍色。

根據屬性值查找

格式

元素[屬性名=屬性值]{
    聲明的屬性和屬性值;
}

p[class = 'p2']{
    color: blue;
}

和上面的根據屬性名查找差不多，只不過更加了，到了屬性名后面的屬性值，上例就是作用于p標簽，只不過條件是為帶有class屬性，并且屬性值為p2的p標簽。

多屬性選擇器

格式

元素[屬性名或屬性表達式][屬性名或屬性表達式]..{
    聲明的屬性和屬性值;
}

p[title][class]{
    color: blue;
}

元素后面加。屬性名或屬性表達式，可以加+∞個，但是沒必要。上例為：設置title屬性和class屬性的段落p標簽的樣式

根據屬性值近似查找

格式

元素[元素名~=屬性值]{
    聲明的屬性和屬性值;
}

元素[屬性名|=值]{
    聲名的屬性和屬性值;
}

p[class~='red']{
    color: blue;
}

注意，這里是~=，為約等于，就是找滿足符合約等于條件的標簽，上例為：設置class屬性的值，包含red屬性名的標簽

根據標簽查找

格式

元素名1~元素名2{
    聲名的屬性和屬性值;
}

a~p{
    color: blue;
}

a標簽后面的每一個p標簽，都進行了樣式的修改。

派生選擇器

后代選擇器

格式

父類標簽 子類標簽{ /*注意倆標簽中間有空格*/
    聲名的屬性和屬性值;
}

div strong{
    color: blue;
}

相鄰兄弟選擇器

格式

父標簽+子標簽{
    聲名的屬性和屬性值;
}

#div1 + p{
    color: blue;
}

相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者具有相同的父親元素。注釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。

————————————————
版權聲明：本文為CSDN博主「董小宇」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lolly1023/article/details/105413125

評論(0) 瀏覽(3355)

062020-4

JavaScript 的簡述與基礎語法

前端達人

目錄

JavaScript

JS 發展歷史
JS 的特點
JS 的組成
JS 的基礎語法

a. 兩種引入方式 type src

b. 三種輸出方式 console.log document.write alert

c. 變量聲明 var let const typeof undefined

d. 數據類型簡介 string number boolean object undefined

e. 運算符 + - * / % = < > && || !

i. 全等符與不全等符 === !==

f. 流程控制語句

i. 條件語句 if else switch case default break

ii. 循環語句 while dowhile fori forin forof

JavaScript
- JS 用于完成頁面與用戶的交互功能；
1. JS 發展歷史
JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為 Netscape 與 Sun 合作，Netscape 管理層希望它外觀看起來像 Java，因此取名為 JavaScript。但實際上它的語法風格與 Self 及 Scheme 較為接近；
歐洲計算機制造聯盟（ECMA）在 1997 制定腳本語言規范 ECMA Script1 (ES1)，2009 年發布了 ECMA Script5（ES5），在 2015 年發布了 ECMA Script 2015（ES6），所有的瀏覽器的都支持 ES6；
JS 的特點

JS 設計模仿了 Java 語言，不同如下：

JS 不需要編譯，由瀏覽器直接解釋執行；

JS 是弱類型語言，JS 變量聲明不需要指明類型，不同類型的數據可以賦值給同一變量；
JS 的組成

ECMA Script 是 JS 的基礎語法；

BOM（Brower Object Model）是瀏覽器對象模型；

DOM（Document Object Model）是文檔對象模型；

JS 的基礎語法

a. 兩種引入方式 type src

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS兩種引入方式</title>
</head>
<body>
<!-- JS兩種引入方式：JS和CSS一樣都需要引入到html頁面中，瀏覽器才會解釋執行，JS有兩種引入方式：
    1.內嵌(內部)腳本:在script標簽中寫js代碼,script標簽推薦放置在body標簽的底部,理論上和style標簽一樣可以放置位置任意；
    2.外部腳步:使用script標簽的src屬性引入外部js文件,使用注意事項: script標簽使用了src屬性以后內部的代碼不再被瀏覽器解釋執行，script引入外部腳本時不能使用自閉合格式 -->
<!--告訴瀏覽器把解析器切換為js解析器 type="text/javascript"可以省略-->
<script type="text/javascript"> document.write("<h1>內部腳本</h1>");//向body中追加html內容 </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.輸出到瀏覽器控制臺；
    2.輸出html內容到頁面；
    3.瀏覽器彈框輸出字符 -->
<script>
//1.輸出到瀏覽器控制臺
console.log("1. 輸出到瀏覽器控制臺");//開發者專用
//2.輸出html內容到頁面
document.write("2. 輸出html內容到頁面");//向body中追加html內容
//3.瀏覽器彈框輸出字符
alert("3. 瀏覽器彈框輸出字符");//阻塞執行
</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變量用來存放數據；
    es5以前變量聲明使用var；
    es6之后變量聲明使用let，常量聲明使用const。他們用于替代es6的var聲明方式；
 JS是弱類型語言: 
    聲明變量時不知道變量的類型(undefined),只有在賦值之后js變量才確定類型；
    typeof(a) 或 typeof a 輸出變量的類型；
    undefined表示變量未賦值,未知類型 -->
<script>
//字符串 Java聲明 String str ="張三";
let str ="張三";
console.log(str);
//整數 Java聲明 int k = 5;
let k = 5;
console.log(k);
//小數 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. 數據類型簡介 string number boolean object undefined

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS數據類型</title>
</head>
<body>
<!-- JS數據類型,常用數據類型:
    1.string 字符串類型;
    2.number 數字.包括整數和小數類型;
    3.boolean 布爾類型.值只有true和false兩個;
    4 object 對象類型,空對象使用null表示,有兩種格式:
        new Object(); 
        JSON格式.例如:{name:"張三",age:18};
    5.undefined 變量未賦值 -->
<script>
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
// 2. number 數字
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 對象類型，空對象使用 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();//創建一個js對象,js對象的屬性想要直接加上
stu.id = 1;
stu.name = "劉一";
stu.age = 18;
console.log(stu);//{id: 1, name: "劉一", age: 18}
console.log(typeof stu);//object
// JS對象取屬性值有兩種方式:
// 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. 運算符 + - * / % = < > && || !

i. 全等符與不全等符 `===` `!==`

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
   <title>JS運算符</title>
</head>
<body>
<!--
JS運算符
js運算符和Java運算符基本相同
只有一個特殊的比較運算符
=== 判斷js變量的值和類型都相等才為true
!== 不全等，判斷js變量的值和類型有一個不等就為true
-->
<script> let a = 3;
let b = "3";
console.log(a == b);//true
// 全等 運算符 ===
console.log(a === b);//false
// 不全等 運算符 !==
console.log(a !== b);//true
// 三元(三目)運算符 布爾表達式?真:假
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語法基本一樣,但是對數據類型的真假判斷有些區別 JS中對各種數據類型作為布爾值的特點:(重點掌握) 1. string 空字符串""為false,其余都為true 2. number 數字 只有0為false,其余數字都為true 3. boolean 布爾類型 值只有 true和false 兩個
循環語句

object 對象類型空對象null表示false,其它對象都是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>

ii. 循環語句 while dowhile fori forin forof

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環語句</title>
</head>
<body>
<!-- 循環語句
    while，do while，fori 和Java一樣；
    forin
        1.遍歷出數組中的索引和元素
        2.遍歷出對象中的屬性和元素
    forof 
        1.遍歷出數組中的元素
    forin 與 forof 區別:
        1.forin可以遍歷對象,forof不能遍歷對象
        2.forin可以遍歷出數組中的索引,forof只能遍歷出數組中的元素 -->
<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 可以遍歷數組和對象
let arr = ["劉一","陳二","張三"];//JS數組使用中括號[]定義
let stu = {id:5,name:"李四",age:18};//JS對象使用大括號定義
    //1.forin 遍歷出數組中的索引
for(let index in arr){
    console.log(index);//數組的索引 0,1,2
    console.log(arr[index]);//數組中的元素
}
    //2.forin 遍歷出對象中的屬性名key
for(let k in stu){
    console.log(k);//字符串屬性 id,name,age
    console.log(stu[k]);//對象中的屬性值
}

//forof 可以遍歷數組
for(let e of arr){
    console.log(e);//數組中的元素
}</script>
</body>
</html>

————————————————
版權聲明：本文為CSDN博主「Regino」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Regino/article/details/105321573

原文鏈接：https://blog.csdn.net/Regino/article/details/105321573

評論(0) 瀏覽(3660)

« 1 ... 67 68 69 70 71 72 73 ... 77 »

日歷

鏈接

個人資料

藍藍設計的小編 http://www.73404.com.cn

首頁

屬性描述符

什么是屬性描述符?

value-屬性值

configurable-屬性描述符是否可被修改

enumerable-該屬性是否可被枚舉

3.3 執行事件的步驟

繼承性

繼承性的使用說明

監聽 change 事件

Swipe自定義寬度下，同時適應不同分辨率的情況

jquery中ajax處理跨域的三大方式

文章目錄

一、設置git的user name和email

二、檢查是否存在SSH Key

三、獲取SSH Key

四、GitHub添加SSH Key

五、驗證和修改

文章目錄

CSS第二課-復雜選擇器

群組選擇器

屬性選擇器

根據屬性名查找元素

根據屬性值查找

多屬性選擇器

根據屬性值近似查找

根據標簽查找

派生選擇器

后代選擇器

相鄰兄弟選擇器

JavaScript

b. 三種輸出方式 console.log document.write alert

c. 變量聲明 var let const typeof undefined

d. 數據類型簡介 string number boolean object undefined

e. 運算符 + - * / % = < > && || !

i. 全等符與不全等符 === !==

f. 流程控制語句

i. 條件語句 if else switch case default break

ii. 循環語句 while dowhile fori forin forof

分類

日歷

鏈接

個人資料

存檔

i. 全等符與不全等符 `===` `!==`