洛谷P6800 【模板】Chirp-Z Transform 題解

阿新 • • 發佈：2020-10-05

轉自狂神老師，僅作為個人筆記使用

【狂神說Java】JavaScript學習筆記

版權

本文章根據b站狂神說javascript視訊教程整理
視訊連結：https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6715593633392022867

0、前端知識體系
 1、什麼是Javascript
2、快速入門
 3、資料型別
 4、函式
 5、內部物件
 6、面向物件程式設計
 7、操作BOM物件(重點)
8、操作DOM物件（重點)
9、操作表單
 10、jQuery

0、前端知識體系

想要成為真正的“網際網路Java全棧工程師”還有很長的一段路要走，其中前端是繞不開的一門必修課。本階段課程的主要目的就是帶領Java後臺程式設計師認識前端、瞭解前端、掌握前端，為實現成為“網際網路Java全棧工程師”再向前邁進一步。

0.1、前端三要素

HTML（結構）：超文字標記語言（Hyper Text Markup Language），決定網頁的結構和內容
CSS（表現）：層疊樣式表（Cascading Style Sheets），設定網頁的表現樣式。
JavaScript（行為）：是一種弱型別指令碼語言，其原始碼不需經過編譯，而是由瀏覽器解釋執行，用於控制網頁的行為

0.2、結構層（HTML）

太簡單，略

0.3、表現層（CSS）

CSS層疊樣式表是一門標記語言，並不是程式語言，因此不可以自定義變數，不可以引用等，換句話說就是不具備任何語法支援，它主要缺陷如下：

語法不夠強大，比如無法巢狀書寫，導致模組化開發中需要書寫很多重複的選擇器；

沒有變數和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護；
這就導致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為【CSS前處理器】的工具,提供CSS缺失的樣式層複用機制、減少冗餘程式碼，提高樣式程式碼的可維護性。大大的提高了前端在樣式上的開發效率。

什麼是CSS前處理器

CSS前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標生成檔案，然後開發者就只需要使用這種語言進行CSS的編碼工作。轉化成通俗易懂的話來說就是“用一種專門的程式語言，進行Web頁面樣式設計，再通過編譯器轉化為正常的CSS檔案，以供專案使用”

。

常用的CSS前處理器有哪些

SASS：基於Ruby ，通過服務端處理，功能強大。解析效率高。需要學習Ruby語言，上手難度高於LESS。
LESS：基於NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低於SASS，但在實際開發中足夠了，所以如果我們後臺人員如果需要的話，建議使用LESS。

0.4、行為層（JavaScript）

JavaScript一門弱型別指令碼語言，其原始碼在發往客戶端執行之前不需要經過編譯，而是將文字格式的字元程式碼傳送給瀏覽器，由瀏覽器解釋執行。

JavaScript框架

JQuery：大家熟知的JavaScript庫，優點就是簡化了DOM操作，缺點就是DOM操作太頻繁，影響前端效能；在前端眼裡使用它僅僅是為了相容IE6，7，8；
Angular：Google收購的前端框架，由一群Java程式設計師開發，其特點是將後臺的MVC模式搬到了前端並增加了模組化開發的理念，與微軟合作，採用了TypeScript語法開發；對後臺程式設計師友好，對前端程式設計師不太友好；最大的缺點是版本迭代不合理（如1代–>2 代，除了名字，基本就是兩個東西；截止發表部落格時已推出了Angular6）
React：Facebook 出品，一款高效能的JS前端框架；特點是提出了新概念【虛擬DOM】用於減少真實 DOM 操作，在記憶體中模擬 DOM操作，有效的提升了前端渲染效率；缺點是使用複雜，因為需要額外學習一門【JSX】語言；
Vue：一款漸進式 JavaScript 框架，所謂漸進式就是逐步實現新特性的意思，如實現模組化開發、路由、狀態管理等新特性。其特點是綜合了 Angular（模組化）和React(虛擬 DOM) 的優點；
Axios：前端通訊框架；因為 Vue 的邊界很明確，就是為了處理 DOM，所以並不具備通訊能力，此時就需要額外使用一個通訊框架與伺服器互動；當然也可以直接選擇使用jQuery 提供的AJAX 通訊功能；

UI框架

Ant-Design：阿里巴巴出品，基於React的UI框架
ElementUI、iview、ice：餓了麼出品，基於Vue的UI框架
BootStrap：Teitter推出的一個用於前端開發的開源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript構建工具

Babel：JS編譯工具，主要用於瀏覽器不支援的ES新特性，比如用於編譯TypeScript
WebPack：模組打包器，主要作用就是打包、壓縮、合併及按序載入

注：以上知識點已將WebApp開發所需技能全部梳理完畢

0.5、三端同一

混合開發（Hybrid App）

主要目的是實現一套程式碼三端統一（PC、Android：.apk、iOS：.ipa）並能夠呼叫到裝置底層硬體（如：感測器、GPS、攝像頭等），打包方式主要有以下兩種：

雲打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）

微信小程式

詳見微信官網，這裡就是介紹一個方便微信小程式UI開發的框架：WeUI

1、什麼是Javascript

1.1、概述

javaScript是一門世界上最流行的指令碼語言
Java，JavaScript
10天
一個合格的後端人員，必須精通JavaScript

1.2、歷史

見百度

ECMAScript它可以理解為JavaScript的一個標準
最新版本已經到es6版本~
但是大部分瀏覽器還只停留在支援es5程式碼上！
開發環境–線上環境，版本不一致

2、快速入門

2.1、引入JavaScript

1、內部標籤

<script> 
//....
</script>

2、外部引入

hj.js

alert("hello,world");

test.html

 <!--外部引入
        注意：script必須成對出現
    -->
    <script src="js/hj.js"></script>

    <!--不用顯示定義type，也預設就是javaScript-->
    <script type="text/javascript"></script>

測試程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script標籤內，寫Javascript程式碼-->
    <!--<script>
        alert("hello,world");
    </script>-->

    <!--外部引入
        注意：script必須成對出現
    -->
    <script src="js/hj.js"></script>

    <!--不用顯示定義type，也預設就是javaScript-->
    <script type="text/javascript"></script>
</head>
<body>


<!--這裡也可以存放-->
</body>
</html>

2.2、基本語法入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--JavaScript嚴格區分大小寫-->
    <script>
        // 1. 定義變數   變數型別 變數名 = 變數值
        var score = 1 ;
        //alert(num)
        // 2. 條件控制

        if (score > 60 && score < 70){
            alert("60~70");
        }else if(score > 70 && score < 80){
            alert("70~80");
        }else{
            alert("other")
        }
    </script>
</head>
<body>

</body>
</html>

瀏覽器必備除錯須知(前端的除錯啊，重點用)：

Elements 審查元素(跑網站用。復刻程式碼)

Console 控制檯（除錯js,使用console.log(),）

Sources 原始碼（可以打斷點除錯）

Network 網路請求（抓包用）

Performance

Memory

Application 瀏覽器快取（檢視網站Cookies）

Security

Lighthouse

2.3、資料型別

數值，文字，圖形，音訊，視訊

變數

var a

number

js不區分小樹和整數，Number

123//整數123
123.1//浮點數123.1
1.123e3//科學計數法
-99//負數
NaN	//not a number
Infinity // 表示無限大

字串

‘abc’ “abc”

布林值

true，false

邏輯運算

&& 兩個都為真，結果為真

|| 一個為真，結果為真

! 	真即假，假即真

比較運算子！！！重要！

=
1，"1"
== 等於（型別不一樣，值一樣，也會判斷為true）
=== 絕對等於（型別一樣，值一樣，結果為true）

這是一個JS的缺陷，堅持不要使用 == 比較
須知：

NaN === NaN，這個與所有的數值都不相等，包括自己
只能通過isNaN（NaN）來判斷這個數是否是NaN

浮點數問題

console.log((1/3) === (1-2/3))

儘量避免使用浮點數進行運算，存在精度問題！

Math.abs(1/3-(1-2/3))<0.00000001

null 和 undefined

null 空
undefined 未定義

陣列

Java的陣列必須是相同型別的物件~，JS中不需要這樣

//保證程式碼的可讀性，儘量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二種定義方法
new Array(1,2,3,4,5,'hello');

取數字下標：如果越界了，就會報undefined

undefined

物件

物件是大括號，陣列是中括號

每個屬性之間使用逗號隔開，最後一個屬性不需要逗號

// Person person = new Person(1,2,3,4,5);

var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

取物件值

person.name
> "Tom"
person.age
> 3

2.4、嚴格檢查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA需要設定支援ES6語法
        'use strict';嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
        必須寫在JavaScript的第一行！
        區域性變數建議都使用let去定義~
    -->
    <script>
        'use strict';
        //全域性變數
         let i=1
        //ES6 let
    </script>
</head>
<body>

</body>
</html>

3、資料型別

3.1、字串

1、正常字串我們使用單引號，或者雙引號包裹

2、注意轉義字元 \

\'
\n 換行
\t tab鍵
\u4e2d    \u##### Unicode字元

\x41	Ascall字元
123456

3、多行字串編寫

//tab 上面 esc下面
        var msg =
            `hello
            world
            你好呀
            nihao
            `

4、模板字串

//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`

5、字串長度

str.length

6、字串的可變性，不可變

7、大小寫轉換

//注意，這裡是方法，不是屬性了
student.toUpperCase();
student.toLowerCase();

8、student.indexof(‘t’)

9、substring，從0開始

[)
student.substring(1)//從第一個字串擷取到最後一個字串
student.substring(1,3)//[1,3)
123

3.2、陣列

Array可以包含任意的資料型別

var arr = [1,2,3,4,5,6];//通過下標取值和賦值

1、長度

arr.length

注意：假如給arr.lennth賦值，陣列大小就會發生變化~，如果賦值過小，元素就會丟失

2、indexOf，通過元素獲得下標索引

arr.indexOf(2)

字串的"1"和數字 1 是不同的

3、slice（）擷取Array的一部分，返回的一個新陣列，類似於String中substring

4、push()，pop()尾部

push：壓入到尾部
pop：彈出尾部的一個元素

5、unshift(),shift() 頭部

unshift：壓入到頭部
shift：彈出頭部的一個元素

6、排序sort()

(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]

7、元素反轉reverse()

(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]

8、concat()

注意：concat()並沒有修改陣列，只是會返回一個新的陣列

9、連線符join

列印拼接陣列，使用特定的字串連線

10、多維陣列

陣列：儲存資料（如何存，如何取，方法都可以自己實現！）

3.3、物件

若干個鍵值對

var 物件名 = {
	屬性名：屬性值，
	屬性名：屬性值，
	屬性名：屬性值
}
//定義了一個person物件，它有四個屬性
var person = {
	name:"Tom",
	age:3,
	email:"[email protected]",
	score:66
}

Js中物件，{…}表示一個物件，建制對描述屬性xxx：xxx，多個屬性之間用逗號隔開，最後一個屬性不加逗號！
JavaScript中的所有的鍵都是字串，值是任意物件！

1、物件賦值

2、使用一個不存在的物件屬性，不會報錯！undefined

3、動態的刪減屬性，通過delete刪除物件的屬性

4、動態的新增，直接給新的屬性新增值即可

5、判斷屬性值是否在這個物件中！xxx in xxx

6、判斷一個屬性是否是這個物件自身擁有的 hasOwnProperty()

3.4、流程控制

if判斷

while迴圈，避免程式死迴圈

for迴圈

forEach迴圈

ES5.1特性

for …in-------下標

3.5、Map和Set

ES6的新特性~

Map

Set：無序不重複的集合

3.6、iterator

es6新特性

作業：使用iterator來遍歷迭代我們Map，Set！

遍歷陣列

遍歷Map

遍歷set

4、函式

4.1、定義函式

定義方式一

絕對值函式

一旦執行到return代表函式結束，返回結果！
如果沒有執行return，函式執行完也會返回結果，結果就是undefined

定義方式二

function(x){…}這是一個匿名函式。但是可以吧結果賦值給abs，通過abs就可以呼叫函式！
方式一和方式二等價！

呼叫函式

abs(10)//10
abs(-10) //10

引數問題：javaScript可以傳任意個引數，也可以不傳遞引數~
引數進來是否存在問題？
假設不存在引數，如何規避？

arguments

arguments是一個JS免費贈送的關鍵字；
代表，傳遞進來的所有引數，是一個數組！

問題：arguments包含所有的引數，我們有時候想使用多餘的引數來進行附加操作。需要排除已有引數~

rest

以前：

ES6引入的新特性，獲取除了已經定義的引數之外的所有引數~…

rest引數只能寫在最後面，必須用…標識。

4.2、變數的作用域

在javascript中，var定義變數實際是有作用於的。
假設在函式體重宣告，則在函式體外不可以使用~（閉包）

如果兩個函式使用了相同的變數名，只要在函式內部就不衝突

內部函式可以訪問外部函式的成員，反之則不行

假設，內部函式變數和外部函式變數，重名！

假設在JavaScript中，函式查詢變數從自身函式開始~，由“內”向“外”查詢，假設外部存在這個同名的函式變數，則內部函式會遮蔽外部函式的變數。

提升變數的作用域

結果：x undefined
說明：js執行引擎，自動提升了y的宣告，但是不會提升變數y的賦值；

這個是在javascript建立之初就存在的特性。養成規範：所有的變數定義都放在函式的頭部，不要亂放，便於程式碼維護；

全域性變數

全域性物件window

alert() 這個函式本身也是一個window的變數；

javascript實際上只有一個全域性作用域，任何變數（函式也可以視為變數），假設沒有在函式作用範圍內找到，就會向外查詢，如果在全域性作用域都沒有找到，就會報錯 Refrence

規範

由於我們的所有變數都會繫結到window上，。如果不同的js檔案，使用了相同的全域性變數，就會產生衝突—>如何減少這樣的衝突？

把自己的程式碼全部放入自己定義的唯一空間名字中，降低全域性命名衝突問題~
jQuery中就是使用的該方法：jQuery.name，簡便寫法：$()

區域性作用域

ES6的let關鍵字，解決了區域性作用域衝突的問題！

建議大家都用let去定義區域性作用域的變數；

常量

在ES6之前，怎麼定義常量：只有用全部大寫字母命名的變數就是常量；建議不要修改這樣的值。

在ES6引入了常量關鍵字 const

4.3、方法

定義方法

方法就是把函式放在物件的裡面，物件只有兩個東西：屬性和方法

this.代表什麼？拆開上main的程式碼看看

this是無法指向的，是預設指向呼叫它的那個物件的；

apply

在js中可以控制this指向

5、內部物件

標準物件

5.1、Date

基本使用

轉換

5.2、JSON

JSON是什麼

在javascript中，一切皆為物件，任何js支援的型別都可以用JSON表示
格式

物件都用{}
陣列都用[]
所有的鍵值對都是用key:value

JSON字串和js物件轉化

很多人搞不清楚，JSON和JS物件的區別

5.3、AJAX

原生的js寫法 xhr非同步請求
jQuery封裝好的方法$(#name).ajax("")
axios請求

6、面向物件程式設計

6.1、原型物件

javascript、java、c#------面向物件；但是javascript有些區別！

類：模板
物件：具體例項

在javascript中，需要大家轉換一下思維方式！
原型：

6.2、class集繼承

class關鍵字，是在ES6引入的
1、定義一個類、屬性、方法

2、繼承

<script>
	//ES6之後========================
	//定義一個學生的類
	class Student{
		constructor(name){
			this.name = name;
		}
		hello(){
			alert('hello');
		}
}

	class XiaoStudent extends Student{
		constructor(name,grade){
			super(name);
			this.grade = grade;
		}
		myGrade(){
			alert('我是一名小學生');
		}
	}

	var xiaoming = new Student("xiaoming");
	var xiaohong = new XiaoStudent("xiaohong",1);
</script>

本質：檢視物件原型

6.3、原型鏈

proto:

7、操作BOM物件（重點）

7.1、瀏覽器介紹

javascript和瀏覽器關係？
BOM：瀏覽器物件模型

IE6~11
Chrome
Safari
FireFox
Opera

三方

QQ瀏覽器
360瀏覽器

7.2、window

window代表瀏覽器視窗

7.3、Navigator（不建議使用）

Navigator封裝了瀏覽器的資訊

大多數時候，我們不會使用navigator物件，因為會被認為修改!
不建議使用這些屬性來判斷和編寫程式碼

7.4、screen

代表螢幕尺寸

7.5、location(重要)

location代表當前頁面的URL資訊

7.6、document（內容DOM）

document代表當前的頁面，HTML DOM文件樹

獲取具體的文件樹節點

獲取cookie

劫持cookie原理
www.taobao.com

伺服器端可以設定cookie為httpOnly

7.7、history（不建議使用）

history代表瀏覽器的歷史記錄

8、操作DOM物件（重點）

DOM：文件物件模型

8.1、核心

瀏覽器網頁就是一個Dom樹形結構！

更新：更新Dom節點
遍歷Dom節點：得到Dom節點
刪除：刪除一個Dom節點
新增：新增一個新的節點

要操作一個Dom節點，就必須要先獲得這個Dom節點
這是原生程式碼，之後我們儘量都使用jQuery();

8.2、更新節點

操作文字

操作css

8.3、刪除節點

刪除節點的步驟：先獲取父節點，再通過父節點刪除自己

注意：刪除多個節點的時候，children是在時刻變化的，刪除節點的時候一定要注意。

8.4、插入節點

我們獲得了某個Dom節點，假設這個dom節點是空的，我們通過innerHTML就可以增加一個元素了，但是這個Dom節點已經存在元素了，我們就不能這麼幹了！會產生覆蓋

追加

8.5、建立一個新的標籤

<script>
	var js = document.getElementById('js');//已經存在的節點
    var list = document.getElementById('list');
    //通過JS建立一個新的節點
    var newP = document.creatElement('p');//建立一個p標籤
    newP.id = 'newP';
    newP.innerText = 'Hello,Kuangshen';
    //建立一個標籤節點
    var myScript = document.creatElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以建立一個style標籤
    var myStyle = document.creatElement('style');//建立了一個空style標籤
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//設定標籤內容
    
    document.getElementByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的節點.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

9、操作表單

9.1、表單是什麼？form-----DOM樹

文字框----text
下拉框----select
單選框----radio
多選框----checkbox
隱藏域----hidden
密碼框----password
…

表單的目的提交資訊

9.2、獲得要提交的資訊

<body>
    <form action = "post">
        <p>
            <span>使用者名稱：</span><input type="text" id = "username" />
        </p>
        <!--多選框的值就是定義好的value-->
        <p>
            <span>性別：</span>
            <input type = "radio" name = "sex" value = "man" id = "boy"/>男
           	<input type = "radio" name = "sex" value = "woman" id = "girl"/>女
        </p>
    </form>
    <script>
    	var input_text = document.getElementById("username");
        var boy_radio = document.getElementById("boy");
        var girl_radio = document.getElementById("girl");
        //得到輸入框的值
        input_text.value 
        //修改輸入框的值
        input_text.value  = "value";
        
        //對於單選框，多選框等等固定的值，boy_radio.value只能取到當前的值
        boy_radio.checked;//檢視返回的結果，是否為true，如果為true，則被選中。
        girl_radio.checked = true;//賦值
        
    </script>
</body>

9.3、提交表單。md5加密密碼，表單優化

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <!--MD5加密工具類-->
        <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
        	
        </script>
    </head>
    <body>
        <!--表達繫結提交事件
			οnsubmit= 繫結一個提交檢測的函式，true，false
			將這個結果返回給表單，使用onsubmit接收
		-->
        <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
            <p>
            	<span>使用者名稱：</span><input type="text" id = "username" name = "username"/>
        	</p>
            <p>
            	<span>密碼：</span><input type="password" id = "password" />
        	</p>
            <input type = "hidden" id = "md5-password" name = "password"> 
            
            <!--繫結事件 onclick 被點選-->
            <button type = "submit">提交</button>
            
        </form>
        
        <script>
        	function aaa(){
                alert(1);
                var username = document.getElementById("username");
                var pwd = document.getElementById("password");
                var md5pwd = document.getElementById("md5-password");
                //pwd.value = md5(pwd,value);
                md5pwd.value = mad5(pwd.value);
                //可以校驗判斷表單內容，true就是通過提交，false就是阻止提交
                return false;
                
            }
        </script>
        
    </body>
</html>

10、jQuery

javaScript和jQuery的關係？

jQuery庫，裡面存在大量的JavaScript函式

10.1、獲取jQuery

公式：$(selector).action()

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
    </head>
    <body>
        <a href="" id = "test-jquery">點我</a>
        <script>
        	//選擇器就是css選擇器
            $('#test-jquery').click(function(){
                alert('hello,jQuery!');
            });
        </script>
    </body>
</html>

10.2、選擇器

//原生js，選擇器少，麻煩不好記
//標籤
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的選擇器它全部都能用！
$('p').click();//標籤選擇器
$('#id1').click();//id選擇器
$('.class1').click;//class選擇器

文件工具站：http://jquery.cuishifeng.cn/

10.3、事件

滑鼠事件、鍵盤事件，其他事件

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移動
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
1234567
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
        <style>
            #divMove{
                width:500px;
                height:500px;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <!--要求：獲取滑鼠當前的一個座標-->
        mouse：<span id = "mouseMove"></span>
        <div id = "divMove">
            在這裡移動滑鼠試試
        </div>
        <script>
        	//當網頁元素載入完畢之後，響應事件
            //$(document).ready(function(){})
            $(function(){
                $('#divMove').mousemove(function(e){
                    $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
                })
            });
        </script>
    </body>
</html>

10.4、操作DOM

節點文字操作

$('#test-ul li[name=python]').text();//獲得值
$('#test-ul li[name=python]').text('設定值');//設定值
$('#test-ul').html();//獲得值
$('#test-ul').html('<strong>123</strong>');//設定值

CSS的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的顯示和隱藏，：本質display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

娛樂測試

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

未來ajax()；

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

10.5、小技巧

1、如何鞏固JS（看jQuery原始碼，看遊戲原始碼！）

2、鞏固HTML、CSS（扒網站，全部down下來，然後對應修改看效果~）

10.6、相關網站推薦

jQuery文件工具站：http://jquery.cuishifeng.cn/

原始碼之家 https://demo.mycodes.net/youxi/JS_dazhuankuai/

Layui 彈窗元件 https://www.layui.com/demo/button.html

Element-ui https://element.eleme.cn/#/zh-CN/component/button

Ant Design https://ant.design/docs/react/introduce-cn

友人C(部落格模板) https://www.ihewro.com/