💓 博客主頁：從零開始的-CodeNinja之路

? 收錄文章：【JS】深度學習JavaScript

🎉歡迎大家點贊👍評論📝收藏?文章

一:JavaScript

1.1 JavaScript是什么

JavaScript(簡稱JS),是?個腳本語?,解釋型或即時編譯型的編程語?.雖然它是作為開發(fā)Web頁面的
腳本語言而出名，但是它也被用到了很多非瀏覽器環(huán)境中,其實Java和JavaScript之間的語法風格相去甚遠
JavaScript和HTML和CSS之間的關(guān)系

? HTML:網(wǎng)頁的結(jié)構(gòu)(?)
? CSS:網(wǎng)頁的表現(xiàn)(皮)
? JavaScript:網(wǎng)頁的動作(魂)

1.2 JS的引入方式

JS有3種引入方式，語法如下表格所示：

引入方式	語法描述
行內(nèi)樣式	直接嵌?到html元素內(nèi)部
內(nèi)部樣式	定義script標簽，寫到script標簽中
外部樣式	定義script標簽，通過src屬性引?外部js?件

3種引入方式對比:

1. 內(nèi)部樣式會出現(xiàn)?量的代碼冗余,不方便后期的維護，所以不常用.
2. 行內(nèi)樣式,只適合于寫簡單樣式.只針對某個標簽?效.缺點是不能寫太復雜的jS.
3. 外部樣式，html和js實現(xiàn)了完全的分離,企業(yè)開發(fā)常用方式.

1.3 JS變量

創(chuàng)建變量(變量定義/變量聲明/變量初始化),JS聲明變量有3種?式

關(guān)鍵字	解釋
var	早期JS中聲明變量的關(guān)鍵字,作?域在該語句的函數(shù)內(nèi)
les	ES6中新增的聲明變量的關(guān)鍵字,作?域為該語句所在的代碼塊內(nèi)
const	聲明常量的，聲明后不能修改

注意事項:
JavaScript是?門動態(tài)弱類型語言，變量可以存放不同類型的值(動態(tài)),隨著程序的運行,變量的類型可能會發(fā)?改變.(弱類型)

1.4 數(shù)據(jù)類型

雖然js是弱數(shù)據(jù)類型的語言，但是js中也存在數(shù)據(jù)類型，js中的數(shù)據(jù)類型分為：原始類型和引用類型，具體有如下類型

數(shù)據(jù)類型	描述
number	數(shù)字.不區(qū)分整數(shù)和?數(shù).
string	字符串類型.字符串字?值需要使?引號引起來,單引號雙引號均可.
boolean	布爾類型.true真,false假
undefined	表?變量未初始化.只有唯?的值undefined.

使?typeof函數(shù)可以返回變量的數(shù)據(jù)類型

<script>var a = 10;console.log(typeof a);//numbervar b = 'hello';console.log(typeof b);//stringvar c = true;console.log(typeof c);//booleanvar d;console.log(typeof d);//undefinedvar e = null;console.log(typeof e);//null
</script>

1.5 數(shù)組操作

1. 讀:使用下標的方式訪問數(shù)組元素(從0開始)
2. 增:通過下標新增,或者使用push進行追加元素
3. 改:通過下標修改
4. 刪:使用splice方法刪除元素
   代碼示例:

<script>var arr = [1, 2, 'haha', false];//讀取數(shù)組console.log(arr[0]); //1//添加數(shù)組元素arr[4] = "add"console.log(arr[4]);//addconsole.log(arr.length);//5, 獲取數(shù)組的?度//修改數(shù)組元素arr[4] = "update"console.log(arr[4]);//update//刪除數(shù)組元素arr.splice(4,1);// 第?個參數(shù)表?從下標為4的位置開始刪除. 第?個參數(shù)表?要刪除的元素個數(shù)是 1 個console.log(arr[4]);//undefined 元素已經(jīng)刪除, 如果元素不存在, 結(jié)果為undefinedconsole.log(arr.length);//4, 獲取數(shù)組的?度
</script>

注意:

1. 如果下標超出范圍讀取元素,則結(jié)果為undefined
2. 不要給數(shù)組名直接賦值,此時數(shù)組中的所有元素都沒了.
   相當于本來arr是?個數(shù)組,重新賦值后變成字符串了.

1.6 函數(shù)

1.6.1 函數(shù)的語法格式

函數(shù)定義并不會執(zhí)行函數(shù)體內(nèi)容,必須要調(diào)用才會執(zhí)行.調(diào)用?次就會執(zhí)行?次.

function hello() {console.log("hello");
}
// 如果不調(diào)?函數(shù), 則沒有執(zhí)?打印語句
hello();

? 調(diào)用函數(shù)的時候進?函數(shù)內(nèi)部執(zhí)行,函數(shù)結(jié)束時回到調(diào)用位置繼續(xù)執(zhí)行.可以借助調(diào)試器來觀察.
? 函數(shù)的定義和調(diào)用的先后順序沒有要求.(這?點和變量不同,變量必須先定義再使用)

	// 調(diào)?函數(shù)hello();// 定義函數(shù)function hello() {console.log("hello");}

實參和形參之間的個數(shù)可以不匹配.但是實際開發(fā)?般要求形參和實參個數(shù)要匹配

1. 如果實參個數(shù)比形參個數(shù)多,則多出的參數(shù)不參與函數(shù)運算

 sum(10, 20, 30); // 30

1. 如果實參個數(shù)比形參個數(shù)少,則此時多出來的形參值為undefined

 sum(10); // NaN, 相當于 num2 為 undefined.

JS的函數(shù)傳參比較靈活,這?點和其他語言差別較?.事實上這種靈活性往往不是好事.

1.6.2 函數(shù)表達式

另外?種函數(shù)的定義方式

var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); // function

此時形如 function() { } 這樣的寫法定義了?個匿名函數(shù),然后將這個匿名函數(shù)用?個變量來表
示.后面就可以通過這個add變量來調(diào)?函數(shù)了.
JS中函數(shù)可以?變量保存,也可以作為其他函數(shù)的參數(shù)或者返回值.

1.7 對象

在JS中,字符串,數(shù)值,數(shù)組,函數(shù)都是對象.
每個對象中包含若?的屬性和方法.
? 屬性:事物的特征.
? 方法:事物的行為.
JavaScript的對象和Java的對象概念上基本?致.只是具體的語法表項形式差別較大

1. 使用字面量創(chuàng)建對象
   使用{}創(chuàng)建對象

var a = {}; // 創(chuàng)建了?個空的對象var student = {name: '夏天',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};

? 使?{}創(chuàng)建對象
? 屬性和方法使用鍵值對的形式來組織.
? 鍵值對之間使用,分割.最后?個屬性后?的,可有可無
? 鍵和值之間使用:分割.
? 方法的值是?個匿名函數(shù).
使用對象的屬性和方法:

	// 1. 使? . 成員訪問運算符來訪問屬性 `.` 可以理解成 "的"console.log(student.name);// 2. 使? [ ] 訪問屬性, 此時屬性需要加上引號console.log(student['height']);// 3. 調(diào)??法, 別忘記加上 ()student.sayHello();

使用構(gòu)造函數(shù)創(chuàng)建對象

	function 構(gòu)造函數(shù)名(形參) {this.屬性 = 值;this.?法 = function...}var obj = new 構(gòu)造函數(shù)名(實參);

注意:
? 在構(gòu)造函數(shù)內(nèi)部使用this關(guān)鍵字來表示當前正在構(gòu)建的對象.
? 構(gòu)造函數(shù)的函數(shù)名首字母?般是?寫的.
? 構(gòu)造函數(shù)的函數(shù)名可以是名詞.
? 構(gòu)造函數(shù)不需要return
? 創(chuàng)建對象的時候必須使?new關(guān)鍵字

二. JQuery

2.1JQuery是什么

W3C標準給我們提供了?系列的函數(shù),讓我們可以操作:
? 網(wǎng)頁內(nèi)容
? 網(wǎng)頁結(jié)構(gòu)
? 網(wǎng)頁樣式
但是原生的JavaScript提供的API操作DOM元素時,代碼比較繁瑣,冗?.我們學習使用JQuery來操作頁面對象.

jQuery是?個快速、簡潔且功能豐富的JavaScript框架,于2006年發(fā)布.它封裝JavaScript常用的功能
代碼,提供了簡潔?強?的選擇器和DOM操作方法.使?JQuery可以輕松地選擇和操作HTML元素，從
而減少了開發(fā)?員編寫的代碼量，提高了開發(fā)效率,它提供的API易于使?且兼容眾多瀏覽器，這讓諸
如HTML?檔遍歷和操作、事件處理、動畫和Ajax操作更加簡單.JQuery對于事件的處理也進行了簡
化,提供了?個簡單的API來綁定、觸發(fā)和處理事件，使開發(fā)?員能夠更?便地處理各種交互行為.

2.2 引入依賴

使用 JQuery需要先引入對應(yīng)的庫
在使?jQuery CDN時，只需要在HTML文檔中加入如下代碼

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

其中， src 屬性指明了JQuery庫所在的URL.這個URL是CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))服務(wù)提供商為jQuery庫
提供的?個統(tǒng)?資源定位符.

2.3 JQuery語法

jQuery語法是通過選取HTML元素,并對選取的元素執(zhí)行某些操作
基礎(chǔ)語法

 $(selector).action()

? $() 是?個函數(shù),它是jQuery提供的?個全局函數(shù),用于選擇和操作HTML元素.
? Selector選擇器,用來"查詢"和"查找"HTML元素
? action操作,執(zhí)行對元素的操作
JQuery的代碼通常都寫在document ready函數(shù)中.
document：整個?檔對象,?個頁面就是?個?檔對象,使?document表?.
這是為了防止文檔在完全加載（就緒）之前運行jQuery代碼，即在文檔加載完成后才可以對頁面進
行操作。
如果在文檔沒有完全加載之前就運行函數(shù)，操作可能失敗

	$(document).ready(function(){// jQuery functions go here});

2.4. JQuery選擇器

我們通過JQuery選擇器來選擇?些HTML元素.然后對元素進?操作.
JQuery選擇器基于已經(jīng)存在的CSS選擇器,除此之外,還有?些?定義的選擇器.
jQuery中所有選擇器都 $ 開頭：$().

語法	描述
$(“*”)	選取所有元素
$(“this”)	選取當前HTML元素
$(“p”)	所有p元素
$(“p:first”)	選取第?個p元素
$(“p:last”)	最后?個p元素
$(“#box”)	id="box"的元素
$(“.intro.demo”)	所有class="intro"且class="demo"的元素
$(“p.intro”)	選取class為intro的p元素
$(“ulli:first”)	選取第?個ul元素的第?個li元素
$(“:input”)	所有input元素
$(“:text”)	所有type="text"的input元素
$(“:checkbox”)	所有type="checkbox"的input元素

2.5 JQuery事件

JS要構(gòu)建動態(tài)頁面,就需要感知到用戶的行為.
用戶對于頁面的?些操作(點擊,選擇,修改等)操作都會在瀏覽器中產(chǎn)??個個事件,被JS獲取到,從而進?更復雜的交互操作.
常見的事件有:

事件	代碼
?檔就緒事件(完成加載)	$(document).ready(function)
點擊事件	$(selector).click(function)
雙擊事件	$(selector).dblclick(function)
元素的值發(fā)?改變	$(selector).change(function)
?標懸停事件	$(selector).mouseover(function)

2.6 操作元素

2.6.1 獲取/設(shè)置元素內(nèi)容

三個簡單的獲取元素內(nèi)容的JQuery?法

JQuery?法	說明
text()	設(shè)置或返回所選元素的?本內(nèi)容
html()	設(shè)置或返回所選元素的內(nèi)容（包括HTML標簽）
val()	設(shè)置或返回表單字段的值

這三個方法即可以獲取元素的內(nèi)容,可以設(shè)置元素的內(nèi)容.
有參數(shù)時,就進行元素的值設(shè)置,沒有參數(shù)時,就進行元素內(nèi)容的獲取
代碼示例:

2.6.2 獲取元素

<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html內(nèi)容為:"+html);var text = $("#test").text();console.log("?本內(nèi)容為:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>

2.6.3 設(shè)置元素

<div id="test"></div>
<div id="test2"></div>
<input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>設(shè)置html</h1>');$("#test2").text('<h1>設(shè)置text</h1>');$("input").val("設(shè)置內(nèi)容");});
</script>

2.7 添加元素

添加HTML內(nèi)容

1. append():在被選元素的結(jié)尾插入內(nèi)容
2. prepend():在被選元素的開頭插入內(nèi)容
3. after():在被選元素之后插入內(nèi)容
4. before():在被選元素之前插入內(nèi)容

代碼示例:

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol><img src="pic/rose.jpg"><script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("圖?前插?");$("img").after("圖?后插?");});
</script>

2.8 刪除元素

刪除元素和內(nèi)容，?般使用以下兩個jQuery方法：

1. remove():刪除被選元素（及其子元素）
2. empty():刪除被選元素的子元素。

代碼示例:

<div id="div1">我是?個div</div><button>刪除 div 元素</button>
<script>$(function () {$('button').click(function(){$('#div1').remove();});});
</script>

三.項目實現(xiàn):表白墻

預期效果
需求:按要求在文本框中輸入內(nèi)容,點擊提交按鈕,輸入內(nèi)容顯示在頁面下方.
代碼實現(xiàn)

1. 提前準備如下HTML和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>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>
</head><body><div class="container"><h1>表?墻</h1><p>輸?后點擊提交, 會將信息顯?在表格中</p><div class="row"><span>誰: </span><input class="edit" type="text"></div><div class="row"><span>對誰: </span><input class="edit" type="text"></div><div class="row"><span>說什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>
</body></html>

2. 實現(xiàn)提交

 $(function () {// 給點擊按鈕注冊點擊事件$(".submit").click(function () {// 1. 獲取到編輯框內(nèi)容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val();console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 2. 構(gòu)造 html 元素var html = '<div class="row">' + from + '對' + to + '說: ' + message +'</div>';// 3. 把構(gòu)造好的元素添加進去$('.container').append(html);// 4. 同時清理之前輸?框的內(nèi)容$(":text").val("");});});

總結(jié):

1. HTML是?種超文本標記語言,主要用于頁面內(nèi)容的顯示和排版.如果需要更漂亮的樣式展示和頁面
   效果,需要搭配CSS和JavaScript來使用
2. 學習HTML主要是學習標簽,HTML的標簽特別多,了解基本語法即可
3. CSS重點是學習CSS的選擇器使用
4. JavaScript是?個腳本語言,和Java沒有關(guān)系.JQuery是?個JavaScript框架,使用JQuery可以輕松地選擇和操作HTML元素,提高我們的開發(fā)效率.