當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

狂神说js学习笔记

發(fā)布時間：2024/3/13 编程问答 51 豆豆

生活随笔收集整理的這篇文章主要介紹了狂神说js学习笔记小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

0、前端知識體系
- 0.1前端三要素
- 0.2、結(jié)構(gòu)層（HTML）
- 0.3、表現(xiàn)層（CSS）
- 0.4、行為層（JavaScript）
- 0.5、三端同一
1、什么是JavaScript
- - 1.1、概述
  - 1.2、歷史
2、快速入門
- 2.1、引入JavaSciprt
- 2.2、基本語法入門
- 2.3、數(shù)據(jù)類型
- 2.4、嚴(yán)格檢查格式
3、數(shù)據(jù)類型
- 3.1、字符串
- 3.2 數(shù)組
- 3.3、對象
- 3.4、流程控制
- 3.5、Map 和 Set
- 3.6、 interator
4、函數(shù)
- 4.1、定義函數(shù)
- 4.2、變量的作用域
- 4.3、方法
5、內(nèi)部對象
- 5.1、Date
- 5.2、JSON
- 5.3、Ajax
6、面向?qū)ο缶幊?/li>
7、操作BOM對象（重點）
8、操作DOM對象（重點）
9、操作表單（驗證）
10、jQuery

0、前端知識體系

想要成為真正的“互聯(lián)網(wǎng)Java全棧工程師”還有很長的一段路要走，其中前端是繞不開的一門必修課。本階段課程的主要目的就是帶領(lǐng)Java后臺程序員認識前端、了解前端、掌握前端，為實現(xiàn)成為“互聯(lián)網(wǎng)Java全棧工程師”再向前邁進一步。

0.1前端三要素

HTML（結(jié)構(gòu)）：超文本標(biāo)記語言（Hyper Text Markup Language），決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。
CSS（表現(xiàn)）：層疊樣式表（Cascading Style Sheets），設(shè)定網(wǎng)頁的表現(xiàn)樣式。
JavaScript（行為）：是一種弱類型腳本語言，其源碼不需經(jīng)過編譯，而是由瀏覽器解釋運行，用于控制網(wǎng)頁的行為

0.2、結(jié)構(gòu)層（HTML）

0.3、表現(xiàn)層（CSS）

CSS層疊樣式表是一門標(biāo)記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它主要缺陷如下：

語法不夠強大，比如無法嵌套書寫，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；
沒有變量和合理的樣式復(fù)用機制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護；

這就導(dǎo)致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發(fā)人員會使用一種稱之為【CSS預(yù)處理器】的工具,提供CSS缺失的樣式層復(fù)用機制、減少冗余代碼，提高樣式代碼的可維護性。大大的提高了前端在樣式上的開發(fā)效率。

什么是CSS預(yù)處理器？

CSS預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只需要使用這種語言進行CSS的編碼工作。轉(zhuǎn)化成通俗易懂的話來說就是“用一種專門的編程語言，進行Web頁面樣式設(shè)計，再通過編譯器轉(zhuǎn)化為正常的CSS文件，以供項目使用”。

常用的CSS預(yù)處理器有哪些：
- SASS：基于Ruby ，通過服務(wù)端處理，功能強大。解析效率高。需要學(xué)習(xí)Ruby語言，上手難度高于LESS。
- LESS：基于NodeJS，通過客戶端處理，使用簡單。功能比SASS簡單，解析效率也低于SASS，但在實際開發(fā)中足夠了，所以如果我們后臺人員如果需要的話，建議使用LESS。

0.4、行為層（JavaScript）

JavaScript一門弱類型腳本語言，其源代碼在發(fā)往客戶端運行之前不需要經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給瀏覽器，由瀏覽器解釋運行。

JavaScript框架：
- JQuery：大家熟知的JavaScript庫，優(yōu)點就是簡化了DOM操作，缺點就是DOM操作太頻繁，影響前端性能；在前端眼里使用它僅僅是為了兼容IE6，7，8；
- Angular：Google收購的前端框架，由一群Java程序員開發(fā)，其特點是將后臺的MVC模式搬到了前端并增加了模塊化開發(fā)的理念，與微軟合作，采用了TypeScript語法開發(fā)；對后臺程序員友好，對前端程序員不太友好；最大的缺點是版本迭代不合理（如1代–>2 代，除了名字，基本就是兩個東西；截止發(fā)表博客時已推出了Angular6）；
- React：Facebook 出品，一款高性能的JS前端框架；特點是提出了新概念【虛擬DOM】用于減少真實 DOM 操作，在內(nèi)存中模擬 DOM操作，有效的提升了前端渲染效率；缺點是使用復(fù)雜，因為需要額外學(xué)習(xí)一門【JSX】語言；
- Vue：一款漸進式 JavaScript 框架，所謂漸進式就是逐步實現(xiàn)新特性的意思，如實現(xiàn)模塊化開發(fā)、路由、狀態(tài)管理等新特性。其特點是綜合了 Angular（模塊化）和React(虛擬 DOM) 的優(yōu)點；
- Axios：前端通信框架；因為 Vue 的邊界很明確，就是為了處理 DOM，所以并不具備通信能力，此時就需要額外使用一個通信框架與服務(wù)器交互；當(dāng)然也可以直接選擇使用jQuery 提供的AJAX 通信功能。
UI框架：
- Ant-Design：阿里巴巴出品，基于React的UI框架；
- ElementUI、iview、ice：餓了么出品，基于Vue的UI框架；
- BootStrap：Teitter推出的一個用于前端開發(fā)的開源工具包；
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。
JavaScript構(gòu)建工具：
- Babel：JS編譯工具，主要用于瀏覽器不支持的ES新特性，比如用于編譯TypeScript。
- WebPack：模塊打包器，主要作用就是打包、壓縮、合并及按序加載。

0.5、三端同一

混合開發(fā)（Hybrid App）
主要目的是實現(xiàn)一套代碼三端統(tǒng)一（PC、Android：.apk、iOS：.ipa）并能夠調(diào)用到設(shè)備底層硬件（如：傳感器、GPS、攝像頭等），打包方式主要有以下兩種：
- 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）

1、什么是JavaScript

1.1、概述

JavaScript是一門世界上最流行的腳本語言

Java、JavaScript

開發(fā)歷程10天~

一個合格的后端人員，必須要精通JavaScript

1.2、歷史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript它可以理解為是JacaScript的一個標(biāo)準(zhǔn)

最新版本已經(jīng)到se6版本~

但是大部分瀏覽器還只停留在支持es5代碼上！

開發(fā)環(huán)境—線上環(huán)境，版本不一致

2、快速入門

2.1、引入JavaSciprt

1、內(nèi)部標(biāo)簽

2、外部引入

abs.js

//。。。

test.html

測試代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>Title</title><script src="js/qj.js"></script><select type="text/jacascript"> </select></head><body></body> </html>

2.2、基本語法入門

<script type="text/javascript">// 1. 定義變量變量類型變量名 = 變量值；var score = 61; // alert(num); // 2.條件控制if(score>60 && score<70){alert("60~70");}else if(score>70 && score<800){alert("70~80");}else{alert("other");}// console.log(score) 在瀏覽器的控制臺打印變量！ System.out.println();/* 多行注釋asdf*/</script>

瀏覽器必備調(diào)試須知：

2.3、數(shù)據(jù)類型

數(shù)值，文本，圖形，音頻，視頻。。。。

變量

var 王者榮耀 = "倔強青銅"//高級符號和數(shù)字不能用來定義

number

js不區(qū)分小叔和整數(shù)，Number

123 //整數(shù)123 123.1 //浮點數(shù)123.1 1.123e3 //科學(xué)計數(shù)法 -99 //負數(shù) NaN // not a number 不是一個數(shù)字 Infinity //表示無限大

字符串

‘a(chǎn)bc’ “abc”

布爾值

true （真），false （空）

邏輯運算

&& 與，兩個都為正，結(jié)果為真|| 或，一個為正，結(jié)果為真！非，真即假，假即真

比較運算符 ！！！！！重要！

= 賦值符號 1 “1” == 等于（類型不一樣，值一樣，也會判斷為true） === 絕對等于(類型一樣，值一樣，結(jié)果為true)

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

須知：

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

浮點數(shù)問題：

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

盡量避免使用浮點數(shù)進行運算，存在精度問題！

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

null和undefined

null 空
undefined 未定義

數(shù)組

Java的數(shù)值必須列想通類型的對象，JS中不需要這樣！

//保證代碼的可讀性，盡量使用【】var arr = [1,2,3,4,5,"hello",null,true];new Array(1,12,3,4,4,5,"hello");

取數(shù)組下標(biāo)：如果越界了，就會

undefined

對象

對象是大括號，數(shù)組是中括號~~

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

// Person person = new Person(1,2,3,4,5);var person = {name: "qingjiang",age: 3,tags: ['js','java','web','...']}

取對象的值

person.name >"qingjiang" person.age >3

2.4、嚴(yán)格檢查格式

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Title</title><script>'use strict';// 全局變量let i = 1;// Es6 let </script></head><body></body> </html>

3、數(shù)據(jù)類型

3.1、字符串

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

2、注意轉(zhuǎn)義字符 \

\' 字符串 \n 換行 \t tabe \u4e2d \u#### Unicode字符中 \X41 Asc11字符

3、多行字符串編寫

// tab上面，esc下面 `var msg = `helloworld你好ya你好`

4.模板字符串

// tab上面，esc下面 ` let name = "qingjiang";let age = 3;let msg = `你好呀，${name}` //模板字符串 ${}

5、字符串長度

console.log(str.length) //字符串長度為 3

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

7、大小寫轉(zhuǎn)換方法

//注意，這里是方法，不是屬性了 console.log(student.toUpperCase()) //轉(zhuǎn)換為大寫 console.log(student.toLowerCase()) //轉(zhuǎn)換為小寫

8、student.indexOf(‘t’)

console.log(student.indexOf('t')) //輸出為1，輸出t在字符中的第幾個位置

9、substring

[) console.log(student.substring(1)) //輸出tudent，作用為截取字符第1個字符串到最后一個字符串 console.log(student.substring(1,3)) //輸出tu [1,3)從第一個字符串截取到第三個字符中間的字符（有第0個字符串）

3.2 數(shù)組

Array可以包含任意的數(shù)組類型

var arr = [1,2,3,4,5,6]; //通過下標(biāo)取值和賦值 arr[0] arr[0] = 1

1、長度

arr.length //輸出為6 arr.length = 10 //輸出為10，(10) [1, 2, 3, 4, 5, 6, 空 ×4]

注意：假如給arr.length賦值，數(shù)組大小就會發(fā)生變化~，如果賦值過小，元素就會丟失

2、indexOf，通過元素獲得下標(biāo)索引

arr = [1,2] arr.indexof(2) //輸出為1,代表2在arr中是第一個位置。（數(shù)字1為0的位置）

字符串的“1”和數(shù)字 1 是不同的

arr = [1,2,3,4,5,6,"1","2"] //(8) [1, 2, 3, 4, 5, 6, '1', '2'] arr.indexOf(1) //0 arr.indexOf("1") //6

3、slice（） 數(shù)組版的substring，截取Array的一部分，返回一個新數(shù)組

類似于String中的substring

arr = [1,2,3,4,5,6,"1","2"] arr.slice(3) //(5) [4, 5, 6, '1', '2'] arr.slice(1,5) //(4) [2, 3, 4, 5]

4、push() : 壓入到尾部，在數(shù)組的后面添加元素

? pop ()：彈出尾部的一個元素，在數(shù)組的后面刪除元素

? (括號中添加數(shù)字效果不變)

arr //(8) [1, 2, 3, 4, 5, 6, '1', '2'] arr.push('a','b') //10 arr //(10) [1, 2, 3, 4, 5, 6, '1', '2', 'a', 'b'] arr.pop() //'b' arr //(9) [1, 2, 3, 4, 5, 6, '1', '2', 'a'] arr.pop(4) //'a' arr //(8) [1, 2, 3, 4, 5, 6, '1', '2'] arr.pop('4') //'2' arr //(7) [1, 2, 3, 4, 5, 6, '1']

5、unshif() ,shift() 頭部

? unshif() 壓入到頭部，在頭部添加元素

? shif() 彈出頭部的一個元素，在頭部彈出元素

arr //(7) [1, 2, 3, 4, 5, 6, '1'] arr.unshift('a','b') //9 arr //(9) ['a', 'b', 1, 2, 3, 4, 5, 6, '1'] arr.shift() //'a' arr.shift() //'b' arr //(7) [1, 2, 3, 4, 5, 6, '1']

6、排序 sort（）

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

7、元素反轉(zhuǎn) reverse（）

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

8、concat()

//(3) ['C', 'B', 'A'] arr.concat([1,2,3]) //(6) ['C', 'B', 'A', 1, 2, 3] arr //(3) ['C', 'B', 'A']

注意： concat（）并沒有修改數(shù)組，只是會返回一個新的數(shù)組

9、連接符 join

打印拼接數(shù)組，使用特定的字符串連接

//(3) ['C', 'B', 'A'] arr.join('-') //'C-B-A'

10、多維數(shù)組

arr = [[1,2],[3,4],["5","6"]]; arr[1][1] //4 第一個1代表著數(shù)組里面的第一個數(shù)組，第二個1代表第一個數(shù)組里面的第一個元素

數(shù)組：存儲數(shù)據(jù)（如何存，如何取，方法都可以自己實現(xiàn)！）

3.3、對象

若干個鍵值對

var 對象名 = {屬性名：屬性值,屬性名：屬性值,屬性名：屬性值,} //定義了一個person對象，它具有person屬性 var person = {name: "kuangshen",age: 3,email: "123456789@qq.com",score: 0}

js中對象，{…}表示一個對象，鍵值對描述屬性xxxx： xxxx，多個屬性之間使用逗號隔開，最后一個屬性不加逗號！。

JavaScript中所有的鍵都是字符串，值是任意對象！

1、對象賦值

person.name //'kuangshen' person.name = "qingjiang" //'qingjiang' person.name //'qingjiang'

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

person.haha //undefined

3、動態(tài)的刪減屬性，通過 delete刪除對象屬性

person //{name: 'qingjiang', age: 3, email: '123456789@qq.com', score: 0} delete person.name //true person //{age: 3, email: '123456789@qq.com', score: 0}

4、動態(tài)的添加

person.haha = "haha" //'haha' person //{age: 3, email: '123456789@qq.com', score: 0, haha: 'haha'}

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

person //{age: 3, email: '123456789@qq.com', score: 0, haha: 'haha'} 'age' in person //true//繼承 'toString' in person //true

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

person.hasOwnProperty('toString') //false person.hasOwnProperty('age') //true

3.4、流程控制

if 判斷

while循環(huán)，避免程序死循環(huán)

死循環(huán)

'use strict'var age = 3; while(true){alert(123)} //頁面會出現(xiàn)一個關(guān)不掉的內(nèi)容為123的彈窗

for循環(huán)

for(let i = 0; i <100 ; i++){console.log(i) }//打印1-99

forEach 循環(huán)

5.1引入的

var age = [12,3,12,3,12,3,12,31,23,123];//函數(shù)，跟方式一樣age.forEach(function(value){console.log(value)}) //打印出數(shù)組

? forEach 語法：

forEach方法中的function回調(diào)有三個參數(shù)：
第一個參數(shù)是遍歷的數(shù)組內(nèi)容，
第二個參數(shù)是對應(yīng)的數(shù)組索引，
第三個參數(shù)是數(shù)組本身

[ ].forEach(function(value,index,array){

for…in

var age = [12,3,12,3,12,3,12,31,23,123];/*for(Type ste: el){}*///for(var index in object){}for(var num in age){if(age.hasOwnProperty(num)){console.log("存在")console.log(age[num])}} //index為數(shù)組的下標(biāo)索引，num //假設(shè)不知道age（object）的num大小情況下使用會快一點

3.5、Map 和 Set

ES6的新特性~

Map：

'use strict'//ES6 Map //學(xué)生的成績，學(xué)生的名字//var names = ["tom","jack","haha"];//var scores = [100,90,80];var map = new Map([['tom',100],['jack',90], ['haha',80]])var name = map.get('tom'); //使用get方法通過key獲得 valuemap.set('admin',123456); //通過set方法添加key（在尾部）console.log(name);map.delete("tom"); //刪除

Set：無序不重復(fù)的集合

var set = new Set([3,1,1,1,1,1,"123",123,'123']); //set可以去重（包括字符串、數(shù)字。。）set.add(2) //add方法添加元素set.delete(1) //delete方法刪除元素 console.log(set.has(3)); //打印set數(shù)組里是否含有3console.log( Array.from(set) ); //打印set里的所有元素

3.6、 interator

ES6的新特性~

作業(yè)：使用 interator 來遍歷迭代我們Map，Set！

遍歷數(shù)組

//通過for of / for in 下標(biāo) var arr = [3,4,5]for(var x of arr){ //of換成in打印索引，of打印具體的值console.log(x)}

遍歷map

var map = new Map([["tom",100],["jack",90],["haha",80]]);for (let x of map){console.log(x)}

遍歷set

var set = new Set([5,6,7]);for (let x of set){console.log(x)}

4、函數(shù)

方法：對象（屬性，方法）

函數(shù)：放到外面就是函數(shù)，放的位置不同

4.1、定義函數(shù)

定義方式一

絕對值函數(shù)

//public 返回值類型方法名(){ // return 返回值; //} function abs(x){ //函數(shù) 方法名if(x>=0){return x;}else{return -x;} }

一但執(zhí)行到 return代表函數(shù)結(jié)束，返回結(jié)果！

如果沒有執(zhí)行 return，函數(shù)執(zhí)行完也會返回結(jié)果，結(jié)果就是undefined

定義方式二

var abs = function(x){if(x>=0){return x;}else{return -x;} }

function(x){…}這是一個匿名函數(shù)。但是可以把結(jié)果賦值給 abs，通過 abs就可以調(diào)用函數(shù)！

方式一和方式二等價！，表達起來一樣，個人習(xí)慣用哪個方法

調(diào)用函數(shù)

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

參數(shù)問題: javaScript 可以傳任意個參數(shù)，也可以不傳遞參數(shù)~

參數(shù)進來是否存在的問題？

假設(shè)不存在參數(shù)，如何規(guī)避？

var abs = function(x){ //手動拋出異常來判斷，如果x不等于 number，則打印Not a Numberif(typeof x!== 'number'){throw 'Not a Number';}if(x>=0){return x;}else{return -x;} }

arguments

arguments是一個JS免費贈送的關(guān)鍵字；

代表，傳遞進來的所有的參數(shù)，是一個數(shù)組！

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

rest

以前：

if (arguments.length>2){for (var i = 2; i<arguments.length;i++){} }

ES6 引入的新特性，獲取出了已經(jīng)定義的參數(shù)之外的所有參數(shù)~。。。

function aaa(a,b,...rest){console.log("a=>"+a);console.log("b=>"+b);console.log(rest);}

rest 參數(shù)只能寫在坐后面，必須用 … 標(biāo)識。

4.2、變量的作用域

在javascript中，var 定義的變量實際是有作用域的。

假設(shè)在函數(shù)體中聲明，則在函數(shù)體外不可以使用~ （非要想實現(xiàn)的話，后面可以研究一下閉包）

'use strict'function qj() {var x = 1;x = x + 1;}x = x + 2; //Uncaught ReferenceError: x is not defined

如果兩個函數(shù)使用了想通的變量名，只要在函數(shù)內(nèi)部，就不沖突

function qj() {var x = 1;x = x + 1;} function qj2() {var x = 'A';x = x + 1;}

內(nèi)部函數(shù)可以訪問外部函數(shù)的成員，反之則不行

function qj() {var x = 1;// 內(nèi)部函數(shù)可以訪問外部函數(shù)的成員，反之則不行function qj2() {var y = x + 1; //2}var z = y + 1; //變量的作用域.html:28 Uncaught ReferenceError: y is not define}

假設(shè)，內(nèi)部函數(shù)變量和外部函數(shù)的變量，重名！

function qj() {var x = 1;function qj2() {var x = 'A'; console.log('inner'+x); //outer1}console.log('outer'+x); //innerAqj2()}qj()

假設(shè)在javascript中函數(shù)查找從變量自身函數(shù)開始~，由 “內(nèi)” 向 “外“查找。假設(shè)外部存在這個同名的函數(shù)變量，則內(nèi)部函數(shù)會屏蔽外部函數(shù)的變量。

（如上，內(nèi)部跟外部函數(shù)都有x，先算內(nèi)部x）

提升變量的作用域

function qj(){var x = "x" + y;console.log(x);var y = 'y';}qj(); //xundefined

結(jié)果：xundefined

說明：js 執(zhí)行引擎，自動提升了y的聲明，但是不會提升變量y的賦值；

function qj(){var y = 'y';var x = "x" + y;console.log(x); }qj(); // xy

這個是在JavaScript建立之初就存在的特性。養(yǎng)成規(guī)范：所有的變量定義都放在函數(shù)的頭部，不要亂放，便于代碼維護；

function qj2(){ var x = 1,y = x + 1,z,i; //undefined // 之后隨意用}

全局函數(shù)

//全局變量var x = 1;function f(){console.log(x);}f();console.log(x);

全局對象 window

var x = 'xxx';alert(x); alert(window.x); //默認所有的全局變量，都會自動綁定在 window 對象下；

? 電腦會彈出兩個內(nèi)容為 ‘xxx’ 的彈窗

!!! alert() 這個函數(shù)本身也是一個 window 變量

var x = 'xxx';window.alert(x); // winidow.alert(window.x); //默認所有的全局變量，都會自動綁定在 window 對象下；var old_alert = window.alert;// old_alert(x);window.alert = function (){};// 發(fā)現(xiàn)alert（）失效了，只彈窗xxxwindow.alert(123);//恢復(fù)window.alert = old_alert;window.alert(456);

JavaScript 實際上只有一個全局作用域，任何變量（函數(shù)也可以視為變量），假設(shè)沒有在一個函數(shù)的作用范圍內(nèi)找到，就會向外查找，如果在全局作用域都沒有找到，就會報錯 RefrenceError

規(guī)范

由于我們所有的全局變量都會綁定到我們的 window 上。如果不痛的 js 文件，使用了相同的全局變量，就會產(chǎn)生沖突~> 如何能夠減少沖突？

// 唯一全局變量var KuangApp = {};//定義全局變量KuangApp.name = 'kuangshen';KuangApp.add = function (a,b){return a + b;}

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突的問題~

jQuery

!!! 局部作用域 let

function aaa(){for (var i = 0;i < 100; i++){console.log(i)}console.log(i+1); //問題？ i 出了這個作用域還可以使用} //打印 1~101

ES6 let 關(guān)鍵字，解決局部作用域沖突問題

function aaa(){for (let i = 0;i < 100; i++){console.log(i)}console.log(i+1); //問題？ i 出了這個作用域還可以使用} //打印 1~99，然后報錯 Uncaught ReferenceError: i is not defined at aaa

建議大家都是用 let 去定義局部作用域的變量；

常量 const

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

var PI = '3.14';console.log(PI);PI = '123'; //可以改變z這個值console.log(PI);

在 ES6 引入了常量關(guān)鍵字 const

const PI = '3.14'; //只讀console.log(PI);PI = '123'; //Uncaught TypeError: Assignment to constant variable.console.log(PI);

4.3、方法

定義方法

方法就是把函數(shù)放在對象的里面，對象只有兩個東西：屬性和方法

var kuangshen = {name: '秦疆',bitrh: 1999,// 方法age: function(){// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;}} //屬性 kuangshen.name //方法，一定要帶 () kuangshen.age()

this. 代表什么？拆開上面的代碼看看~

function getAge(){// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh; }var kuangshen = {name: '秦疆',bitrh: 1999,age: getAge}// kuangshen.age() ok// getAge() 打印 NAN window

this 是無法指向的，是默認指向調(diào)用它的那個對象；

apply

在js中可以控制this指向!

function getAge(){// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh; }var kuangshen = {name: '秦疆',bitrh: 1999,age: getAge}; // kuangshen.age() ok getAge.apply(kuangshen,[]); //this, 指向 kungshen，參數(shù)為空

5、內(nèi)部對象

標(biāo)準(zhǔn)對象

typeof 123 'number' typeof '123' 'string' typeof true 'boolean' typeof NaN 'number' typeof [] 'object' typeof {} 'object' typeof Math.abs 'function' //函數(shù)類型 typeof undefined 'undefined'

5.1、Date

基本使用

var now = new Date(); //Thu Mar 10 2022 16:00:07 GMT+0800 (中國標(biāo)準(zhǔn)時間)now.getFullYear(); //現(xiàn)在的年now.getMonth(); //現(xiàn)在的月 0~11 代表月，老外now.getDate(); //現(xiàn)在的日now.getDay(); //星期幾now.getHours(); //現(xiàn)在的時now.getMinutes(); //現(xiàn)在的分now.getSeconds(); //現(xiàn)在的秒now.getTime(); //時間戳全世界統(tǒng)一 1970 1.1 0:00:00 毫秒數(shù)console.log(new Date(1646899612102)) //時間戳轉(zhuǎn)為時間

轉(zhuǎn)換

now = new Date(1646899612102) //Thu Mar 10 2022 16:06:52 GMT+0800 (中國標(biāo)準(zhǔn)時間) now.toLocaleString //注意，調(diào)用是一個方式，不是一個屬性！ //? toLocaleString() { [native code] } now.toLocaleString() //'2022/3/10 16:06:52' now.toGMTString() //'Thu, 10 Mar 2022 08:06:52 GMT'

5.2、JSON

json 是什么

早期，所有數(shù)據(jù)傳輸習(xí)慣使用 XML 文件！

JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數(shù)據(jù)交換格式。
簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。
易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。

在JavaScript 一切皆對象、任何 js 支持的類型都可以用JSON來表示；number, string…

格式：

對象都用 {}
數(shù)組都用 []
所有的鍵值對都是使用 key:value

JSON 字符串和 JS 對象的轉(zhuǎn)換

var user = {name : "qinjiang",age : 3,sex : '男'}//對象轉(zhuǎn)化為json字符串 {"name":"qinjiang","age":3,"sex":"男"}// stringify 轉(zhuǎn)化層，對象轉(zhuǎn)化為字符串var jsonUser = JSON.stringify(user)//json 字符串轉(zhuǎn)化為對象參數(shù)為 json 字符串,parse解析，把字符串解析為對象var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}')

很多人搞不清楚，JSON 和 JS 對象的區(qū)別

var obj = {a: 'hello',b:'hellob'}; var json = '{"a": "hello","b":"hellob"}';

5.3、Ajax

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

6、面向?qū)ο缶幊?/h1>
原型對象

javascript、Java、c#。。。。面向?qū)ο?#xff1b; javascript 有些區(qū)別！

類：模板原型對象
對象：具體的實例

在 JavaScript 這個需要大家換一下思維方式！

原型：
var Student = {name : "qinjiang",age : 3,run: function(){console.log(this.name + "run...");}};var xiaoming = {name: "xiaoming"};//原型對象xiaoming.proto = Student;var Bird = {fly: function(){console.log(this.name + "fly...");}};//小明的原型是 Birdxiaoming.proto = Bird; function Student(name) {this.name = name;}// 給student 新增一個方法Student.prototype.hello = function(){alert('Hello')};
class 繼承

class 關(guān)鍵字，是在ES6引入的

1、定義一個類，屬性，方法
//ES6 之后==========// 定義一個學(xué)生的類class Student{constructor(name){ //constructor 構(gòu)造器this.name = name;}hello(){alert('hello')}} var xiaoming = new Student("xiaoming") var xiaohong = new Student("xiaohong") xiaoming.hello() //彈出內(nèi)容為hello 的窗口
2、繼承
<script>// 定義一個學(xué)生的類class Student{constructor(name){ //constructor 構(gòu)造器this.name = name;}hello(){alert('hello')}}class XiaoStudent extends Student{ //extends 繼承的意思constructor(name,grade) {super(name); //super 調(diào)用繼承了的構(gòu)造類 namethis.grade = grade;}myGrade(){alert('我是一名小學(xué)生')}}var xiaoming = new Student("xiaoming")var xiaohong = new XiaoStudent("xiaohong",1) </script>
本質(zhì)：查看對象原型

原型鏈

— proto —:

7、操作BOM對象（重點）

瀏覽器

JavaScript 和瀏覽器關(guān)系？

JavaScript 誕生就是為了能夠讓他在瀏覽器中運行！

BOM：瀏覽器對象模型

IE 6 ~ 11
Chrome
Safari
FireFox Linux的默認瀏覽器
Opera

三方

QQ瀏覽器
360瀏覽器

window (重要)

window 代表瀏覽器窗口

window.alert(1) undefined window.innerHeight 322 window.innerWidth 1536 window.outerHeight //外部高度 824 window.outerWidth 1536 window.innerHeight //內(nèi)部高度 194 //打架可以調(diào)整瀏覽器窗口試試。。。

Navigator（不建議使用）

Navigator，封裝了瀏覽器的信息

window.Navigator.appName undefined navigator.appName 'Netscape' navigator.appVersion //當(dāng)前瀏覽器版本 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.36' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.36' navigator.platform 'Win32'

多數(shù)時候，我們不會使用 navigator 對象，因為會被人為修改！

不建議使用這些屬性來判斷和編寫代碼

screen

screen.width 1536 px screen.height //計算機屏幕 864 px //screen代表全屏幕屬性

代表屏幕尺寸

location (重要)

location 代表當(dāng)前頁面的URL信息

hash: "" host: "www.baidu.com" //主機 hostname: "www.baidu.com" href: "https://www.baidu.com/" //當(dāng)前指向的位置 origin: "https://www.baidu.com" pathname: "/" port: "" protocol: "https:" //協(xié)議 reload: ? reload() //方法，重新加載，刷新網(wǎng)頁 //設(shè)置新的地址 location.assign('https://hao123.com/')

document （內(nèi)容；DOM）

document 代表當(dāng)前的頁面， HTML DOM文檔樹

document.title '百度一下，你就知道' document.title='狂神說' '狂神說'

獲取具體的文檔樹節(jié)點

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd> </dl><script>var dl = document.getElementById('app'); //獲取節(jié)點 </script>

獲取 cookie

document.cookie 'pglt-edgeChromium-ntp=43;

劫持 cookie 原理

www.taobao.com

服務(wù)器端可以設(shè)置 cookie：httpOnly //只讀

hisory （不建議使用）

history.back() //后退 history.forward() //前進

hisory 代表瀏覽器的歷史紀(jì)錄

8、操作DOM對象（重點）

DOM：文檔對象模型，

核心

整個瀏覽器網(wǎng)頁就是一個Dom 樹形結(jié)構(gòu)！

更新：更新Dom節(jié)點
遍歷dom節(jié)點：得到Dom節(jié)點
刪除：刪除一個Dom節(jié)點
添加：添加一個新的節(jié)點

要操作一個Dom節(jié)點，就必須要先獲得這個Dom節(jié)點

獲得Dom節(jié)點

//對應(yīng) css 選擇器var h1 = document.getElementsByTagName('h1'); //標(biāo)簽選擇器var p1 = document.getElementById('p1'); //id選擇器var p2 = document.getElementsByClassName('p2'); //class選擇器var father = document.getElementById('father');var childrens = father.children[index]; //獲取父節(jié)點下的所有子節(jié)點//father.firstChild 獲取第一個節(jié)點//father.lastChild 獲取第二個節(jié)點//father.nextSibling 獲取下一個節(jié)點

這是原生代碼，之后我們盡量都是使用jQuery();

更新節(jié)點

<div id="id1"> </div> <script>var id1 = document.getElementById('id1'); </script>

操作文本

id1.innerText=“123” 修改文本的值
id1.innerHTML=’< strong >123</ strong>’ 可以解析HTML文本標(biāo)簽

操作 JS，CSS

id1.style.color = 'red'; //屬性使用字符串包裹 'red' id1.style.fontSize='20px' //- 轉(zhuǎn) 駝峰命名問題 '20px' id1.style.padding='2em' '2em'

刪除節(jié)點

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

<div id="father"> <h1>標(biāo)題一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script>var self = document.getElementById('p1'); var father = p1.parentElement;father.removeChild(self)//刪除是一個動態(tài)的過程。father.removeChild(father.children[0])father.removeChild(father.children[1])father.removeChild(father.children[2]) </script> father.removeChild()

注意：刪除多個節(jié)點的時候，children 是在時刻變化的，刪除節(jié)點的時候一定要注意！（就是1被刪除的時候，2會自動變成1）

插入節(jié)點

我們獲得了某個Dom節(jié)點，假設(shè)這個dom節(jié)點是空的，我們通過 innerHtmL 就可以增加一個元素了，但是這個DOM節(jié)點已經(jīng)存在元素了，我們就不能這么干了！會產(chǎn)生覆蓋

追加

<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>var js = document.getElementById('js');var list = document.getElementById('list');list.appendChild(js) //追加到后面//原先js在瀏覽器中l(wèi)ist（div）的前面，現(xiàn)在在me的后面//JavaScript JavaSE//JavaSE JavaEE//JavaEE JavaME//JavaME JavaScript </script>

效果

創(chuàng)建一個新的標(biāo)簽，實現(xiàn)插入

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>var ee = document.getElementById('ee');var js = document.getElementById('js');var list = document.getElementById('list');var me = document.getElementById('me');var se = document.getElementById('se');//要包含的節(jié)點.insertBefore(newNode,targetNode)list.insertBefore(js,ee);//在list里面，新的一個js插入在ee的前面

9、操作表單（驗證）

表單是什么 form DOM 樹

文本框 text
下拉框 < select >
單選框 radio
多選框 checkbos
隱藏域 hidden
密碼框 password
。。。

表單的目的：提交信息

獲得要提交的信息

<form action="post"><p><span>用戶名：</span><input type="text" id="username"></p><p><span>性別：</span><input type="radio" name="sex" value="man" id="boy"/> 男<input type="radio" name="sex" value="women" 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 = '123'// 對于單選框，多選框等等固定的值boy_radio.value 只能取到當(dāng)前的值boy_radio.checked //查看返回的結(jié)果，是否為true，若果為true，則被選中~// false// girl_radio.checked// truegirl_radio.checked = true； //賦值//trueboy_radio.checked = true//true</script>

提交表單。md5 加密密碼，表單優(yōu)化

<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" name="password" id="md5-password" /><button type="submit" >提交</button></form><script>function aaa() {alert(1);var uname = document.getElementById('username');// var pwd = document.getElementById('password');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('nd5-password');// console.log(uname.value);// console.log(pwd.value);// // MD5 算法// pwd.value = md5(pwd.value);// console.log(pwd.value);md5pwd.value = md5(pwd.value);// 可以效驗判斷表單內(nèi)容， true就是通過提交，false，阻止提交return true;}</script>

10、jQuery

JavaScript

jQuery庫，里面存在大量的 Javascript函數(shù)

獲取

公式： $(selector).action()
符號（選擇器）. 事件(事件函數(shù))

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

選擇器

//原生 js，選擇器少，麻煩不好記//標(biāo)簽document.getElementsByTagName();//IDdocument.getElementById();//類document.getElementsByClassName();// jQuery css 中的選擇器它全都可以用$('p').click(); //標(biāo)簽選擇器$('#id1').click(); //id選擇器$('.class1').click(); //id選擇器

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

事件

鼠標(biāo)事件，鍵盤事件，其他事件

設(shè)置捕獲鼠標(biāo)動態(tài)定位

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>Title</title><script src="lib/jquery-3.6.0.js"></script><style>#divMove{width: 500px;height: 500px;border: 1px solid red;}</style></head><body>mouse: <span id="mouseMove"></span><div id="divMove">在這里移動鼠標(biāo)試試</div><script>//當(dāng)網(wǎng)頁元素加載完畢之后，響應(yīng)事件// $(document).ready(function (){// 默認文檔默認加載完// }) 的簡寫如下$(function () {$('#divMove').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})});</script></body> </html>

操作DOM

節(jié)點文本操作

$('#test-ul li[name="python"]').text(); //屬性選擇器；獲得值 $('#test-ul li[name="python"]').text('設(shè)置值'); //設(shè)置值 $('#test-ul ').html(); //獲得值 $('#test-ul ').html(); //設(shè)置值 //區(qū)別：text（）只能改變文本，html（）可以改變頁面標(biāo)簽代碼

css的操作

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

元素的顯示和隱藏：本質(zhì) display = none；

$('#test-ul li[name="python"]').show(); //顯示 $('#test-ul li[name="python"]').hide(); //隱藏

娛樂測試

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

未來 ajax（）；

$('#from').ajax()$.ajax({ url: "test.html", context:docment.body, success: function(){$(this).addclass("done"); }})

小技巧

1、如果鞏固 JS （看jQuery 源碼）

2、鞏固HTML.CSS (扒網(wǎng)站，全部down下來，然后對應(yīng)修改看效果~)

Layer 彈窗組件

Element-ui

總結(jié)

以上是生活随笔為你收集整理的狂神说js学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AI 作画：Stable Diffusi
下一篇：【Shell】 sed/tr替换换行符