什么是JS
JS是一個網頁的腳本語言，你可以理解為在HTML中寫類似于JAVA等高級編程語言的代碼，使得網頁可以實現一些包含邏輯處理的交互操作
簡單上手例子
接下來，給大家一個簡單的小例子來感受一下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JsDemo</title>
</head>
<body><script>alert("Hello JavaScript!")</script>
</body>
</html>
我們可以發現，網頁在加載時就彈出來了一個彈窗，這就是我們JS的作用
?引入方式
行內樣式
直接在一個標簽內給它寫一個js的屬性，如：
<input type="button" value="點我一下" onclick="alert('你點了我')">內部樣式
例如上述給出來的例子，使用<script></script>標簽寫在內部
外部樣式
使用<script src=""></script>樣式標簽引入外部js，如：
<script src="hello.js"></script>基礎知識
聲明變量
| 關鍵字 | 解釋 | 示例 |
| var | 早期JS中聲明變量的關鍵字，作用域在該語句所在函數內 | var name = 'zhangsan'; |
| let | ES6中新增聲明變量的關鍵字，作用域為該語句所在的代碼塊 | let name = 'zhangsan'; |
| const | 聲明變量后，不能修改變量值 | const name = 'zhangsan'; |
?數據類型
| 數據類型 | 描述 |
| number | 數字，不區分整數和小數 |
| string | 字符串，需要用單引號或者雙引號包裹起來 |
| boolean | 布爾類型，true為真，false為假 |
| undefined | 表示變量未初始化 |
語法格式
//創建函數
function 函數名(形參列表) {
? ? ? ? 函數體
? ? ? ? return 結果;
}
//調用函數
函數名(形參列表);
<script>function hello() {console.log("hello");}hello();
</script>?提示
當然，JS中還包含了很多其它內容，但是本博客只是粗略地介紹了一下什么是JS，剩下的如對象啊，數組啊之類的其余內容在此不過多贅述
JQuery
什么是JQuery
由于原生JS在實踐過程中非常的冗余復雜，因此一種新的JS框架應運而生，即JQuery，它可以簡化我們對于JS的應用和代碼
如何使用JQuery
我們在使用JQuery前必須要先引入它，在引入它之前我們必須先下載一個JQuery的js文件，大家可以去它的官網：jQuery? 進行下載，下載完成后我們使用外部樣式方式引入這個js
<script src="jquery-3.7.1.min.js"></script>注意：我們下載的是minified的
語法格式
$(selector).action()
- $()是一個函數，它是JQuery提供的一個全局函數，用于選擇和操作HTML元素
- Selector選擇器，用來“查詢”和“查找”HTML元素
- action操作，執行對元素的操作
JQuery選擇器
| $("*") | 選取所有元素 |
| $(this) | 選取當前HTML元素 |
| $("p") | 所有<p>元素 |
| $("p:first") | 選取第一個p元素 |
| $("p:last") | 最后一個<p>元素 |
| $(".box") | 所有class = "box"元素 |
| $("#box") | id = "box"的元素 |
| $(".intro, .demo") | 所有class = "box"且 class = "demo"的元素 |
| $("p .intro") | class = "intro"的<p>元素 |
| $("ul li:first") | 選取第一個<ul>元素的第一個<li>元素 |
| $(":input") | 所有<input>元素 |
| $(":text") | 所有type = "text"的<input>元素 |
| $(":checkbox") | 所有type = "checkbox"的<input>元素 |
JQuery事件
- 事件源：哪個元素觸發的
- 事件類型：是點擊，選中，還是修改？
- 事件處理程序：進一步如何處理，往往是一個回調函數
點擊事件代碼
$("p").click(function() {//動作發生后執行的代碼
})常見事件有
| 事件 | 代碼 |
| 文檔就緒事件（完成加載） | $(document).ready(function) |
| 點擊事件 | $(selector).click(function) |
| 雙擊事件 | $(selector).dbclick(function) |
| 元素的值發生改變 | $(selector).change(function) |
| 鼠標懸停事件 | $(selector).mouseover(function) |
操作元素
| JQuery方法 | 說明 |
| text() | 設置或返回所選元素的文本內容 |
| html() | 設置或返回所選元素的內容（包括HTML標簽） |
| val() | 設置或返回表單字段的值 |
注意：text()用于行內元素，val()用于表單元素，示例如下所示：
獲取元素內容
<body><div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html內容為：" + html);var text = $("#test").text();console.log(text);var text = $("input").val();console.log(text);})</script>
</body>設置元素內容
<body><div id="test"></div><div id="test2"></div><input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>我是h1</h1>');$("#test2").text('<h1>設置text</h1>');$("#text").val("設置內容");})</script>
</body>我們可以發現，html()中可以正常解析為h1，而text中只是單純把所有內容渲染在網頁上
添加元素
| 方法 | 說明 |
| append() | 在被選元素的結尾插入內容 |
| prepend() | 在被選元素的開頭插入內容 |
| after() | 在被選元素之后插入內容 |
| before() | 在被選元素之前插入內容 |
刪除元素
| 方法 | 說明 |
| remover() | 刪除被選元素（及其子元素） |
| empty() | 刪除被選元素的子元素 |
?綜合案例
接下來我將會提供兩個小案例，大家可以自己嘗試一下~~
猜數字
如圖所示，我們要實現，用戶每一次加載界面之后會有一個1-100的隨機數，用戶在輸入框中輸入數字后，點擊猜按鈕，瀏覽器會反饋猜大了，猜小了或者猜對了，次數也會對應+1，點擊重開就會重置
代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜數字</title><script src="jquery-3.7.1.min.js"></script>
</head>
<body><button id="reset">重新開始一局游戲</button><br><span>請輸入要猜的數字：</span><input type="text" id="guessNum"><button id="guess">猜</button><br><span>已經猜的次數：</span><span id="count">0</span><br><span>結果：</span><span id="result"></span><script>$(function() {var count = 0;var num = Math.floor(Math.random() * 100 + 1); //隨機1-100的數字console.log(num);$("#guess").click(function() {count++;$("#count").text(count);let guessNum = $("#guessNum").val();if(guessNum < num) {$("#result").text("猜小了");$("#result").css("color", "red");} else if(guessNum > num) {$("#result").text("猜大了");$("#result").css("color", "red");} else {$("#result").text("猜對了");$("#result").css("color", "green");}})$("#reset").click(function() {num = Math.floor(Math.random() * 100 + 1);$("#guessNum").val("");$("#count").text(0);$("#result").text("");})})</script>
</body>
</html>表白墻
這個案例要實現，用戶在三個輸入框中分別輸入內容并提交后，下方會顯示形如A 對 B 說：xxx的 內容
代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墻</title><script src="jquery-3.7.1.min.js"></script><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}.title {text-align: center;margin-top: 30px;}.note {color: grey;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;padding: 1px 0;}.row span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: palevioletred;border: none;}</style>
</head>
<body><div class="container"><div class="title"><h1>表白墻</h1></div><div class="note"><span>輸入后點擊提交，會將信息顯示在表格中</span></div><div class="row"><span>誰：</span><input type="text" class="edit" id="from"></div><div class="row"><span>對誰：</span><input type="text" class="edit" id="to"></div><div class="row"><span>說什么：</span><input type="text" class="edit" id="say"></div><div class="row"><button class="submit" id="submit">提交</button></div></div><script>//點擊事件獲取數據$("#submit").click(function() {var from = $("#from").val();var to = $("#to").val();var say = $("#say").val();//構造html元素if(from != "" || to != "" || say != "") {var html = '<div class ="row">' + from + " 對 " + to + " 說：" + say + '</div>';}//將元素添加進去并置空$(".container").append(html);$("#from").val("");$("#to").val("");$("#say").val("");})</script>
</body>
</html>
