JavaScript從入門到放棄
1.什麼是JS
是一種流行的腳本語言，
Java和JS沒有什麼關系
1.2環境
1.3調試
運作html
控制台調試
console.log()變量列印輸出
斷點
2.快速入門
2.1引入JavaScript
1.内部标簽
2.外部引入
2.2基本文法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- JavaScript 嚴格區分大小寫-->
<script>
// 1 定義變量 變量類型 變量名 = 變量值
var num = 1;
// alert(num)
// 2 條件控制
if (num>60 && num<70){
alert('60~70')
}else if(num>70 && num<80){
alert('70~80')
}else {
alert('other')
}
//console.log()在浏覽器控制台列印輸出變量
</script>
</head>
<body>
</body>
</html>
2.3資料類型
數值 文本 圖形 音頻 視訊。。。
變量
numbe0r
js不區分小數和整數 number
123 // 整數123
123.1 // 浮點數123.1
1.123e3 //科學計數法
-99 //負數
NaN //not a number
Infinity //無窮大
字元串
'abc' --> "abc"
'\n' 轉義字元
bool
邏輯運算
&& 與
|| 或
! 非
比較運算符
= 指派
== 等于（類型不一樣，值一樣，也會判斷為true）
=== 絕對等于 （類型一樣，值一樣，結果為true）
加持不适用
須知：
- NaN 與所有的數值都不相等，包括自己
- 隻能通過isNaN()來判斷是否為NaN
浮點數問題
盡量避免使用浮點數進行運算，存在精度問題
console.log(math.abs(1/3-(1-2/3))<0.0000001) 可以判斷
null和undefined
- null空
- undefined未定義
數組
Java的數組必須是一系列類型相同的對象， js中不需要這樣，沒有這麼嚴謹
取數組下标，如果越界了，就會報
undefined
對象
對象是大括号，數組是中括号
每個屬性之間都好隔開，最後一個不需要
var person = {
name: 'zhangsan',
age: '12',
tags: ['js', 'web', 'java', '...']
}
取對象的值
person.name
>'zhangsan'
person.age
>12
2.4嚴格檢查模式
‘use strict’;
<!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;
</script>
</head>
<body>
</body>
</html>
3.資料類型
3.1字元串
1.正常字元串使用單引号或者單引号包裹
2.注意轉義字元
\'
\n
\t
\u4ead \u#### //unicode 編碼
\x41 AscII字元
3.多行字元串編寫
//table 上的那個引号
var msg = `hello
world
java
javascript`
4.模闆字元串
let name = 'java';
let age = 'python';
let msg = `你好,${name}`
console.log(msg)
5.字元串長度
let student = 'student';
console.log(student.length) //可以點出來很多屬性
console.log(student[0]) //可以列印出字元串的元素
6.字元串的可變性，不可變
7.大小寫轉化
8.擷取下表
9.字元串截取 [) 前閉後開
console.log(student.substring(2));
>udent
console.log(student.substring(1,3));
>tu
3.2數組
Array可以包含任意的資料類型
let arr = [1,2,3,4,5] //通過下标取值和指派
arr[0]
arr[] = 2
1.長度
arr.length
注意：加入給arr.length指派，數組大小就會發生變化，如果減小指派，元素丢失
2.indexof
arr.indexOf(2) //2的index=1
>1
字元串的‘1’和數字1不同
3.slice（）截取數組的一部分，傳回一個新數組, [) 前閉後開
arr.slice(3)
>[4, 5]
arr.slice(1,3)
>[2, 3] //[) 前閉後開
4.push, pop
push:壓入元素到尾部
pop：彈出尾部的元素
5.unshift（）和shift（）頭部
unshift:壓入元素到頭部
shift：彈出頭部的元素
6.排序
arr.sort()
>[2, 3, 4, 5, "a", "y"]
7.元素反轉
arr.reverse()
>["y", "a", 5, 4, 3, 2]
8.數組拼接
arr.concat([‘A’,‘B’,‘C’])
[“y”, “a”, 5, 4, 3, 2, “A”, “B”, “C”]
arr
[“y”, “a”, 5, 4, 3, 2]
注意：并不改變原來的數組，隻是傳回一個新的數組
9.連接配接符（數組2字元串）
arr.join('-') //使用特定的字元串拼接數組
>"y-a-5-4-3-2"
10.多元數組
arr[1][0]
>3
3.3對象
若幹個鍵值對，其中所有的鍵都是字元串，值是任意對象！！
js中的對象使用{}括起來
let person = {
屬性名：屬性值，
屬性名：屬性值，
屬性名：屬性值 //最後一個不需要逗号
}
let person = {
name: 'java',
tags: 'python',
email: '[email protected]',
score: 60
}
person.name
>"java"
1.對象指派
person.name = 'javascript'
>"javascript"
person.name
>"javascript"
2.使用一個不存在的對象屬性，不會報錯
person.age
>undefined
3.動态的删減屬性 delete
person
>{name: "javascript", tags: "python", email: "[email protected]", score: 60}
delete person.name
>true
person
>{tags: "python", email: "[email protected]", score: 60}
4.動态添加屬性, 直接給新的屬性指派即可
person.haha = "haha"
>"haha"
person
>{tags: "python", email: "[email protected]", score: 60, haha: "haha"}
5.判斷屬性值是否存在
person['tags'] //取屬性值
>"python"
person['tags'] //取屬性值
>"python"
// 繼承
'toString' in person
>true
6.判斷一個屬性是否是這個對象自身擁有的 hasOwnProperty()
person
>{tags: "python", email: "[email protected]", score: 60, haha: "haha"}
person.hasOwnProperty('toString')
>false
person.hasOwnProperty('tags')
>true
3.4流程控制
if 判斷
if (age>3){
alert('haha')
}else {
alert('kuwa')
}
while 循環，避免程式死循環
while (age<100){
age = age + 1;
console.log(age)
}
do {
age = age + 1;
console.log(age)
}while(age<100)
for循環
（輸入foui等一下回車可以自動建構循環格式）
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach循環
let age = [112,14,54,65,85,12];
age.forEach(function (value) {
console.log(value)
})
for…in…
for (let num in age){
if (age.hasOwnProperty(num)){
console.log('存在')
console.log(age[num])
}
}
3.5 Map和Set
ES6 的新特性
Map:
//ES6
//學生的成績和學生的名字
let map = new Map([['tom',100],['jack',90],['wang',98]]);
let name = map.get('tom') // 通過key獲得value
map.set('zhao',89) // 增加新的鍵值對
map.delete('tom') // 删除鍵值對
console.log(map)
Set: 無序不重複的集合
let set = new Set([3,1,1,1,1,1,2]); // set可以去重
set.add(8) //添加
set.delete(1) // 删掉了所有的1
console.log(set)
console.log(set.has(3)) // 判斷元素是否在
3.6iterator
周遊數組
//通過for of 列印 /for in 為下标
let arr = [1,2,3]
for (let x of arr){
console.log(x)
}
周遊Map
let map = new Map([['tom',100],['jack',90],['wang',98]]);
for (let x of map){
console.log(x)
}
周遊Set
for (let x of set){
console.log(x) //去重後的結果
}
4.函數
4.1定義函數
方法與函數之間的差別
定義方式一
絕對值函數
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
控制台調用
一旦執行到return代表函數結束，傳回結果
如果沒有執行return，函數也會傳回結果，結果就是undefined
定義方式二
var abs = function(x){ //這是一個匿名函數，但是可以把結果指派給abs，通過abs可以調用函數
if(x>=0){
return x;
}else{
return -x;
}
}
方式一和方式二等價
調用函數
abs(10) //10
abs(-10) //10
參數問題: JavaScript可以傳遞任意個函數，也可以不傳遞函數~
參數進來是否存在的問題
function abs(x){
if (typeof x!=='number'){ //加入參數判斷，手動抛出異常
throw 'Not a Number'
}
if(x>=0){
return x;
}else{
return -x;
}
}
參數進來幾個的問題
arguments
function abs(x){
console.log("x=>"+x) //x仍為第一個值
for (let i=0; i<arguments.length; i++){ //代表傳遞進來的所有參數，是一個數組
console.log(arguments[i])
}
if(x>=0){
return x;
}else{
return -x;
}
}
問題：arguments會包含所有的參數，我們有時候需要使用多餘的參數來進行操作。需要排除已有參數
rest
ES6新特性，擷取已經定義的參數以外的參數
function test(a,b,...rest) {
console.log("a=>"+a)
console.log("b=>"+b)
console.log("rest=>"+rest)
}
rest參數，隻能寫在最後邊，必須用…辨別
4.2變量作用域
在JavaScript中，var和let定義變量實際是有作用域的
假設在函數體中聲明，則在函數體外不能用（解決方案，閉包）
function qq() {
let x = 1;
x = x + 1;
console.log(x)
}
// 作用域之外報錯
x = x + 2; // Uncaught ReferenceError: x is not defined
如果兩個函數使用了相同的變量名，隻要在函數内部就不沖突！對于嵌套函數，内部函數可以通路外部變量，外部不可以通路内部的! 假設内部函數變量與外部函數變量重複，由内向外查找，假設外部存在重名的變量，則内部函數的變量會屏蔽外部函數的變量！
function qq() {
let x = 1;
x = x + 1;
}
function q() {
let x = 1;
x = x + 1;
}
提升變量的作用域
規範： 所有變量的定義都放在函數的頭部，不要亂放，便于代碼維護！
全局變量
let x = 1;
function qq() {
console.log(x)
}
qq()
console.log(x)
全局對象window，預設所有的全局變量都會自動綁定在window對象下！
let x = 'hello'; // 首先注意這裡的let
alert(x); //hello
alert(window.x); //undefined
alert（）本身也是一個window的變量
var x = 'hello'; //注意這裡的var
alert(x); //hello
alert(window.x); //hello
由于所有全局變量都會綁定在window上，如果不同的js檔案使用了相同的全局變量，沖突~
方法：定義自己的全局變量，把自己定義的變量全部放在唯一空間名字中，減少沖突！
//唯一全局變量
var KApp = {};
//定義全局變量
KApp.name = 'zhao'; // 變量
KApp.add = function(a,b){ //方法
return a+b
}
局部作用域let
function test() {
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1) //101,i出了作用域還可以使用
}
ES6中let關鍵字解決局部作用域沖突！
function test() {
for (let i = 0; i < 100; i++) {
console.log(i) //99
}
console.log(i+1) // ReferenceError: i is not defined
}
建議使用let
常量const
4.3方法
定義方法
方法就是把函數放在對象的裡面，對象隻有兩個東西：屬性和方法！
var test = {
name: 'zhao',
birth: 1920,
age: function () {
var now = new Date().getFullYear()
return now - this.birth
}
}
//屬性
test.name
//方法,一定要帶括号
test.age()
分開寫
function getAge() {
var now = new Date().getFullYear()
return now - this.birth
}
var test = {
name: 'zhao',
birth: 1920,
age: getAge
}
//console
test.age() //100
getAge() //NaN
解決辦法
在apply中可以控制this的指向
function getAge() {
var now = new Date().getFullYear()
return now - this.birth
}
var test = {
name: 'zhao',
birth: 1920,
age: getAge
}
getAge.apply(test,[]);
//console
getAge.apply(test,[]); //100
5.内部對象
标準對象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1 Date
基本使用
let now = new Date(); //Fri Jul 10 2020 16:50:30 GMT+0800 (中國标準時間)
now.getFullYear(); //年
now.getMonth(); //月
now.getDay(); //星期幾
now.getDate(); //日
now.getHours(); //時
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //時間戳
console.log(new Date(1594371030517)) //時間戳轉時間
// console.log(now);
now = new Date(1594371030517)
Fri Jul 10 2020 16:50:30 GMT+0800 (中國标準時間)
now.toLocaleString()
"2020/7/10 下午4:50:30"
now.toGMTString()
"Fri, 10 Jul 2020 08:50:30 GMT"
now.toLocaleString //注意調用是一個方法不是一個屬性，需要括号
ƒ toLocaleString() { [native code] }
5.2Json
json 是什麼
在JavaScript中一切皆為對象，任何js支援的資料格式都可以轉化為JSON
格式：
- 對象都用{}
- 數組都用[]
- 所有的鍵值對都用key：value
let user = {
name: 'java',
age: 13,
gender: "male"
}
//對象轉json，參數為json字元串
let jsonuesr = JSON.stringify(user) //{"name":"java","age":13,"gender":"male"}
// json 轉對象
let obj = JSON.parse('{"name":"java","age":13,"gender":"male"}')
5.3Ajax
- 原生的js寫法，xhr異步請求
- jQuery封裝好的方法
- axios 請求
6.面向對象程式設計
原型對象
JavaScript ,Java ,c#…
- 類：模闆
- 對象：具體的執行個體
原型：
let Student = {
name: 'zhao',
age: 13,
run: function () {
console.log(this.name + 'running...')
}
}
let xiaoming = {
name: 'xiaoming'
}
// xiaoming 的原型是 Student
xiaoming.__proto__ = Student;
class 繼承
class關鍵字是在ES6中引入的
1.定義一個類，屬性和方法
//定義一個學生類
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
let xiaoming = new Student('小明')
let xiaowang = new Student('小王')
//console
xiaoming.hello()
>undefined
xiaoming.name
>"小明"
2.繼承
<script>
//定義一個學生類
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
class middle extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
MyGrade(){
alert('middle')
}
}
let xiaoming = new Student('小明')
let xiaowang = new middle('小王',1)
</script>
本質：檢視對象原型
原型鍊
7.操作BOM對象
BOM：浏覽器對象模型
浏覽器介紹
JavaScript和浏覽器的關系
JavaScript的誕生就是為了讓他在浏覽器中運作！
- IE6~11
- Chrome
- Safari
- Firefox
- Opera
window
window代表浏覽器視窗
window.alert(1)
undefined
window.innerHeight
157
window.innerWidth
1366
window.outerHeight
728
window.outerWidth
1366
//可以調整浏覽器視窗試試，寬高會改變
Navigator
Navigator,封裝了浏覽器的資訊
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
navigator.platform
"Win32"
大多數時候不會使用
navigator
,因為會被人為修改！
不建議使用這些屬性來判斷和編寫代碼！
screen
代表螢幕尺寸！
screen.height
768 //px
screen.width
1366
location
location:代表目前頁面的URL資訊
host: "www.google.com.hk"
href: "https://www.google.com.hk/?gws_rd=cr"
protocol: "https:"
reload: ƒ reload() //重新整理網頁
//設定新的位址
location.assign('https://www.youtube.com/')
document
document 目前頁面資訊，HTML DOM 文檔樹
document.title
"Google"
擷取具體的文檔樹節點
<body>
<dl id="app">
<dt>Java</dt>
<dt>JavaSE</dt>
<dt>JavaEE</dt>
</dl>
<script>
document.getElementById('app')
</script>
</body>
擷取cookie
document.cookie
"CONSENT=YES+CN.zh-CN+; APISID=UPhBuRMzwjkG3TzY/AagBwtsERztGr9W2n; SAPISID=EXo0wU-YLDnNAZV7/A9JM3j2CjdIcCWb8h; __Secure-APISID=UPhBuRMzwjkG3TzY/AagBwtsERztGr9W2n; __Secure-3PAPISID=EXo0wU-YLDnNAZV7/A9JM3j2CjdIcCWb8h; SEARCH_SAMESITE=CgQI2I8B; SID=ygc_-9hkGlKM_1I61Gb1y725YW7OqxcG3EWIJ7SO6_7Xvi1WAk5-vq85i8wS_DoqxCVU9w.; 1P_JAR=2020-7-11-13"
劫持cookie原理
伺服器端可以設定cookie， httpOnly
history 浏覽器的曆史記錄
history.back()
history.forward()
8.操作DOM
DOM：文檔對象模型
核心
浏覽器網頁就是一個DOM樹形結構
- 更新：更新DOM節點
- 周遊DOM節點：得到DOM節點
- 删除一個DOM節點
- 添加一個新的節點
要操作一個DOM節點，首先要獲得一個DOM節點
獲得DOM節點
<div id="father">
<h1>一級标題</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//對應css選擇器
let p1 = document.getElementById('p1')
let father = document.getElementById('father')
let h1 = document.getElementsByTagName('h1')
let p2 = document.getElementsByClassName('p2')\
let children = father.children; //擷取父節點下的所有節點
// father.firstChild
// father.lastChild
</script>
這是原生代碼，之後盡量使用jQuery
更新節點
<div id="id1">
</div>
<script>
let id1 = document.getElementById('id1')
</script>
操作文本
-
id1.innerText = '123'
-
id1.innerHTML = '<strong>4565</strong>'
操作CSS
id1.style.color = 'red'; //屬性使用字元串
id1.style.fontSize = '50px'; //駝峰命名
id1.style.padding = '5px'
删除節點
步驟：先擷取父節點，再通過父節點删除自己
<div id="father">
<h1>一級标題</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let self = document.getElementById('p1')
let father = p1.parentElement;
father.removeChild(self)
// 删除是一個動态過程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意：删除多個節點的時候，children是在時刻變化的，删除節點的時候一定要注意
插入節點
我們獲得了某個DOM節點，假如這個DOM節點是空的，我們通過inner HTML就可以增加一個元素 ，但是這個DOM節點不為空的話就會覆寫原來的内容，慎重！
<p id="js">javascript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js); //追加到後面
</script>
結果
通過建立一個新的節點實作插入
<p id="js">javascript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
//通過js建立新的節點
let newP = document.createElement('p')
newP.id = 'newP';
newP.innerText = 'hello, javascript';
list.appendChild(newP);
//建立一個标簽節點，（通過這個屬性可以設定任意的值）
let myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
// 建立一個style标簽
let myStyle = document.createElement('style'); //建立一個空style标簽
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: red}'; //設定标簽内容
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
結果
insert
<p id="js">javascript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
let ee = document.getElementById('EE');
let js = document.getElementById('js');
let list = document.getElementById('list');
//插入
list.insertBefore(js,ee)
</script>
9.操作表單（驗證）
表單是什麼
- 文本框 text
- 下拉框 select
- 單選/多選框 input/checkbox
- 隐藏域 hidden
- 密碼框 password
- …
表單的目的： 送出資訊
獲得要送出的資訊
<form action="post">
<p>
<span>使用者名：</span><input type="text" id="username">
</p>
<!-- 多選框的值就是定義好的value值-->
<p>
<span>性别:</span>
<input type="radio" name="gender" value="男" id="man"> 男
<input type="radio" name="gender" value="女" id="women"> 女
</p>
</form>
<script>
let input_text = document.getElementById('username');
let man_radio = document.getElementById('man');
let women_radio = document.getElementById('women');
// 得到輸入框的值
// input_text.value
// 修改輸入框的值
// input_text.value = '111'
//對于單選框和多選框等固定的值，input_text.value隻能獲得目前的值
man_radio.checked; //檢視傳回的結果，選中為true，未選中為false
man_radio.checked = true; //指派操作表單
</script>
送出表單 md5密碼加密，表單優化<!--MD5工具類--> <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--
表單綁定送出事件 onsubmit = 綁定一個送出檢測的函數 true false
将這個結果傳回給表單，使用onsubmit接受
οnsubmit="return aaa()"
-->
<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="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--button綁定事件-->
<!-- <button type="button" οnclick="aaa()">送出</button>-->
<!--綁定事件-->
<button type="submit">送出</button>
</form>
<script>
function aaa() {
alert(1)
let uname = document.getElementById('username');
let pwd = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以判斷表單内容
//return false; //false無法送出
return true; //true可以送出
}
</script>
10.jQuery
JavaScript和jQuery：
jQuery庫，裡面存在大量的JavaScript函數
初識jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式：$(selection).action()
-->
<a href="" id="test-jquery">點選</a>
<script>
document.getElementById('id')
//選擇器就是CSS的選擇器
$('#test-jquery').click(function () {
alert('hello, jquery')
})
</script>
</body>
</html>
選擇器
文檔工具站：https://jquery.cuishifeng.cn/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 原生js 選擇器少
// 标簽
document.getElementsByTagName();
// id
document.getElementById();
// 類
document.getElementsByClassName();
//jQuery CSS 中的标簽都能用
$('p').click() ; //标簽選擇器
$('#id').click() ; //id選擇器
$('.class').click() ; //類選擇器
</script>
</body>
</html>
事件
滑鼠事件，鍵盤事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--擷取滑鼠的目前坐标-->
mouse：<span id="location"></span>
<div id="divMove">
移動滑鼠
</div>
<script>
//當網頁元素加載完畢之後響應事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#location').text('x:'+e.pageX + 'y:'+e.pageY)
})
})
</script>
</body>
</html>
操作DOM
節點文本操作
$('#test-ul li[name="py"]').text() //獲得值
$('#test-ul li[name="py"]').text('hello') //設定值
$('#test-ul').html() //獲得值
$('#test-ul').html('<strong>123</strong>') //設定值
CSS的操作
元素的顯示和隐藏
$('#test-ul li[name="py"]').show()
$('#test-ul li[name="py"]').hide()
$(window).height()
$(window).width()
$('#test-ul li[name="py"]').toggle()
1.看架構源碼（jQuery和遊戲）
2.扒網站（HTML和CSS）
layer彈窗元件
elementUI