2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门
01_Web開發
學習目標：
- 簡單了解應用程序開發的分類：桌面應用程序和 Web 應用程序
1.1 桌面應用程序開發
桌面應用程序開發，是一種比較基本的傳統的軟件開發方式，是基于 C/S 架構模式的軟件體系。我們比較熟悉的一些軟件，如：QQ、微信、瀏覽器以及一些單機版游戲等，需要通過軟件包安裝的方式集成到我們的操作系統中，這些都屬于桌面應用體系范疇。桌面應用程序使用到的開發語言主要有：C、C++、Java、C#等。在桌面應用程序開發過程中，我們常常需要考慮的是語言的跨平臺性以及軟件的多平臺支持，比如常見的操作平臺windows、Linux、MacOS。我們開發一款桌面應用軟件，一般需要考慮對這幾類操作系統的支持。
1.2 Web應用程序開發
web應用程序開發主要是建立在 B/S 架構模式下，衍生出來的一系列web應用程序，即主要是基于瀏覽器的應用程序開發，比如淘寶、騰訊、京東網等。Web開發在近年來，隨著本身技術的突破以及移動設備的普及，基于Web領域的開發，也出現了明確的崗位職責分工，一個Web互聯網產品中，基本上會分為：Web UI設計、Web前端開發以及Web后端開發。
1.2.1 Web前端開發
Web前端開發用到的編程語言主要有javascript，以及伴隨有標記性文本語言html和樣式渲染方式css。以及近年來衍生出來的一批優秀Web前端框架，比如：vue、react等，使Web前端在應用構建方面的效率得到顯著提升。另外nodejs的出現，越來越多的Web前端開發人員開始走入服務端編程領域，甚至在一些項目中扮演著Web全棧開發的角色。
1.2.2 Web后端開發
Web后端開發，主要用到的語言有java、python、php等，當然隨著nodeJs的興起，也成為近年來服務端開發的另一種選擇，當前nodeJs更多的是面向Web前端開發人員。?
02_HTML基礎
本章節學習目標
- 能夠知道html的作用
- 能夠安裝和卸載 vscode 的插件
- 能夠設置 vscode 的顏色主題和字體大小
- 能夠知道單標簽和雙標簽的區別
- 能夠知道相對路徑和絕對路徑的區別
- 無序列表標簽(ul標簽)
- 有序列表標簽(ol標簽)
本章節常用單詞
- auto?自動
- body?主體，一個HTML 標記
- button?按鈕
- head頭部
- meta元信息
- title標題
- browser?瀏覽器
2.1 html 的介紹
學習目標
- 能夠知道html的作用
2.1.1 網頁效果圖 -- 京東首頁
2.1.2 html的定義
HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。
標記：就是標簽,?<標簽名稱>?</標簽名稱>, 比如:?<html></html>、<h1></h1>?等，標簽大多數都是成對出現的。
所謂超文本，有兩層含義:
? ? ? ? (1) 因為除了普通文本，網頁中還可以包含圖片、視頻、音頻等內容(超越文本限制)
? ? ? ? (2) 它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接(超鏈接文本)
2.1.3 html的作用
html是用來開發網頁的，它是開發網頁的語言。
2.2 html 的基本結構
學習目標
- 能夠寫出html的基本結構
2.2.1 結構代碼
<!DOCTYPE html> <html><head> <meta charset="UTF-8"><title>網頁標題</title></head><body>網頁顯示內容</body> </html>- 第一行<!DOCTYPE?html>是文檔聲明，用來指定頁面所使用的html的版本，這里聲明的是一個html5的文檔。
- <html>...</html>標簽是開發人員在告訴瀏覽器，整個網頁是從<html>這里開始的，到</html>結束，也就是html文檔的開始和結束標簽。
- <head>...</head>標簽用于定義文檔的頭部，是負責對網頁進行設置標題、編碼格式以及引入css和js文件的。
- <body>...</body>標簽是編寫網頁上顯示的內容。
2.2.2 瀏覽網頁文件
網頁文件的后綴是.html或者.htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。
2.2.3 html基本結構
注意：html 頁面結構上方通常還有?<!DOCTYPE?html>?文檔聲明?
2.3vscode 的基本使用
學習目標
- 能夠安裝和卸載 vscode 的插件
- 能夠設置 vscode 的顏色主題和字體大小
2.3.1 vscode 的基本介紹
全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發的一款免費、開源的跨平臺代碼編輯器，目前是前端(網頁)開發使用最多的一款軟件開發工具。
2.3.2 vscode 的安裝
- 下載網址:?Download Visual Studio Code - Mac, Linux, Windows
- 選擇對應的安裝包進行下載:
- 根據下載的安裝包雙擊進行安裝即可，當然為了更好的使用 vscode 還可以安裝對應的插件。
2.3.3 vscode 的插件安裝
| Chinese (Simplified) Language Pack for VS Code | 中文(簡體)漢化包 |
| open in browser | 右擊在瀏覽器打開html |
(1) 漢化插件安裝
?(2) open in browser插件安裝
(3) 注意: 如果在vscode打開的html文檔中右擊沒有出現 open in browser 類型的選項，需要把當前打開的文件關掉，重新打開這個文件就好了。
2.3.4 vscode 的插件卸載
點擊對應安裝的插件，然后再點擊卸載按鈕即可。
2.3.5?vscode 的使用
(1) 打開文件夾創建文件
?(2) 快速創建html文檔的基本結構
?(3) 右擊在瀏覽器打開html文檔
2.3.6 設置字體大小?
2.3.7 設置顏色主題
?2.3.8 設置默認瀏覽器[可選]
(1) 可以根據自己的需要設置默認使用的瀏覽器
????????谷歌瀏覽器: chrome
2.3.9 設置自動保存代碼[必選]
VSCode默認不會自動保存代碼, 所以當編寫完代碼運行在瀏覽器時, 網頁不會有變化. 因此, 需要勾選自動保存
2.4 初識常用的 html 標簽
學習目標
- 能夠知道單標簽和雙標簽的區別
2.4.1 常用的 html 標簽
<!-- 1. 成對出現的標簽 --><h1>一級標題</h1><h2>二級標題</h2><div>這是一個div標簽</div><div>這是一個div標簽</div><p>這是一個段落標簽</p><p>這是一個段落標簽</p><!-- 2. 單個出現的標簽 --><br><img src="./images/mm.png" alt="圖片"><hr><!-- 3. 帶屬性的標簽：如src、alt和href都是標簽屬性 --><img src="./images/mm.png" alt="圖片"><a href="http://www.baidu.com">百度網</a><!-- 4. 標簽嵌套 --><div><img src="./images/mm.png" alt="圖片"><a href="http://www.baidu.com">百度網</a></div>提示:
- 標簽不區分大小寫，但是推薦使用小寫。
- 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽)
2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽
2.2 單標簽是一個標簽組成，沒有標簽內容， 比如: img標簽
2.5 資源路徑
學習目標
- 能夠知道相對路徑和絕對路徑的區別
當我們使用img標簽顯示圖片的時候，需要指定圖片的資源路徑，比如:
?
這里的src屬性就是設置圖片的資源路徑的，資源路徑可以分為相對路徑和絕對路徑。
2.5.1 相對路徑
從當前操作 html 的文檔所在目錄算起的路徑叫做相對路徑
示例代碼:
<!-- 相對路徑 --> <img src="./images/mm.png" alt="圖片"> <img src="images/mm.png" alt="圖片">2.5.2 絕對路徑
從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/
示例代碼:
?
提示:
一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現資源文件找不到的問題
2.6 列表標簽
學習目標
- 能夠知道列表標簽的種類
2.6.1 列表標簽的種類
- 無序列表標簽(ul標簽)
- 有序列表標簽(ol標簽)
2.6.2?無序列表
<!-- 無序列表：ul(unordered list) --><ul><li>列表標題1</li><li>列表標題2</li><li>列表標題3</li></ul>2.6.3 有序列表
<!-- 有序列表：ol(ordered list) --><ol><li>列表標題1</li><li>列表標題2</li><li>列表標題3</li></ol>03_CSS基礎
本章節學習目標
- 能夠知道 css 的作用
- 能夠知道 css 的引入三種方式
- 能夠說出 css 選擇器的種類
- 能夠知道常用的樣式屬性
本章節常用單詞
- style樣式
- type類型
- href?網址路徑
3.1 css 的介紹
學習目標
- 能夠知道css的作用
3.1.1 css 的定義
css(Cascading Style Sheet)層疊樣式表，它是用來美化 html 頁面的一種語言。
沒有使用css的效果圖
使用css的效果圖
3.1.2 css 的作用?
- 美化 html 頁面, 比如: 設置標簽文字大小、顏色、字體加粗等樣式。
- 控制 html 頁面布局, 比如: 設置浮動、定位等樣式。
3.1.3 css 的基本語法
選擇器 {樣式規則 }樣式規則：屬性名1: 屬性值1;屬性名2: 屬性值2;屬性名3: 屬性值3;...選擇器：是用來選擇標簽的，選出來以后給標簽加樣式。
代碼示例：
div {width: 100px; /* 設置 div 的寬度為 100px */height: 100px; /* 設置 div 的高度為 100px */background: gold; /* 設置 div 的背景為黃色 */ }說明
css 是由兩個主要的部分構成：選擇器和一條或多條樣式規則，注意:樣式規則需要放到大括號里面。
3.2 css 的引入方式
學習目標
- 能夠知道 css 的引入三種方式
css的三種引入方式
- 行內式
- 內嵌式（內部樣式）
- 外鏈式
3.2.1 行內式
直接在標簽的 style 屬性中添加 css 樣式
示例代碼:
<div style="width: 100px; height: 100px; background: gold;">hello</div>優點：方便、直觀。
缺點：缺乏可重用性。
3.2.2 內嵌式（內部樣式）
在<head>標簽內加入<style>標簽，在<style>標簽中編寫css代碼。
示例代碼:
<head>...<!-- 內嵌式 --><style type="text/css">h3 {color: red;}</style> </head>優點：在同一個頁面內部便于復用和維護。
缺點：在多個頁面之間的可重用性不夠高。
3.2.3 外鏈式
將css代碼寫在一個單獨的.css文件中，在<head>標簽中使用<link>標簽直接引入該文件到頁面中。
示例代碼:
main.css：
a {color: green;font-size: 20px; } <head>...<!-- 外鏈式：引入外部的 css 文件 --><link rel="stylesheet" href="./css/main.css"> </head>優點：使得css樣式與html頁面分離，便于整個頁面系統的規劃和維護，可重用性高。
缺點：css代碼由于分離到單獨的css文件，容易出現css代碼過于集中，若維護不當則極容易造成混亂。
3.2.4 css引入方式選擇
- 行內式幾乎不用
- 內嵌式在學習css樣式的階段使用
- 外鏈式在公司開發的階段使用，可以對 css 樣式和 html 頁面分別進行開發。
完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 內嵌式 --><style type="text/css">h3 {color: red;}</style><!-- 外鏈式：引入外部的 css 文件 --><link rel="stylesheet" href="./css/main.css"> </head> <body><!-- 行內式：直接在標簽的 style 屬性中添加 css 樣式 --><div style="width: 100px; height: 100px; background: gold;">hello</div><h3>三級標題</h3><a href="http://www.baidu.com">百度網</a> </body> </html>3.3 css 選擇器
學習目標
- 能夠說出 css 選擇器的種類
3.3.1 css 選擇器的定義
css 選擇器是用來選擇標簽的，選出來以后給標簽加樣式。
3.3.2 css 選擇器的種類
3.3.3 標簽選擇器
根據標簽來選擇標簽，以標簽開頭，此種選擇器影響范圍大，一般用來做一些通用設置。
示例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 標簽選擇器 */p {color: red;}</style> </head> <body><p>這是一個段落</p><p>這是一個段落</p><div>這是一個div</div> </body> </html>3.3.4 類選擇器
根據類名來選擇標簽，以 . 開頭, 一個類選擇器可應用于多個標簽上，一個標簽上也可以使用多個類選擇器，多個類選擇器需要使用空格分割，應用靈活，可復用，是css中應用最多的一種選擇器。
示例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 類選擇器 */.blue {color: blue;}.big {font-size: 20px;}.box {width: 150px;height: 150px;background: gold;}</style> </head> <body><p class="blue">這是一個段落</p><p class="big">這是一個段落</p><div class="box blue big">這是一個div</div> </body> </html>3.3.5 id選擇器
根據id選擇標簽，以#開頭, 元素的id名稱不能重復，所以id選擇器只能對應于頁面上一個元素，不能復用。
示例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* ID 選擇器 */#msg {background: green;}</style> </head> <body><p>這是一個段落</p><p id="msg">這是一個段落</p><div>這是一個div</div> </body> </html>注意點: 雖然給其它標簽設置id="box"也可以設置樣式，但是不推薦這樣做，因為id是唯一的，以后js通過id只能獲取一個唯一的標簽對象。
04_JavaScript
本章節學習目標
- 能夠知道JavaScript的作用
- 能夠知道JavaScript的使用方式
- 能夠說出常用的數據類型
- 能夠知道函數的定義和調用方式
- 能夠知道 2種循環語句
- 能夠知道字符串拼接的操作
- 能夠知道json的格式
本章節常用單詞
- alert?提醒，警示
- Array數組
- length?長度
- result?結果
- append?附加，增補
4.1 JavaScript的介紹
學習目標
- 能夠知道JavaScript的作用
4.1.1 JavaScript的定義
JavaScript是運行在瀏覽器端的腳本語言, 是由瀏覽器解釋執行的, 簡稱js.
它能夠讓網頁和用戶有交互功能, 增加良好的用戶體驗效果。
前端開發三大塊
? ? ? ? (1) HTML：負責網頁結構
? ? ? ? (2) CSS：負責網頁樣式
? ? ? ? (3) JavaScript：負責網頁行為， 比如:網頁與用戶的交互效果
4.2 JavaScript的使用方式
學習目標
- 能夠知道JavaScript的使用方式
4.2.1 行內式（主要用于事件）
<!-- 行內式 --> <input type="button" value="點擊一下" onclick="alert('行內式js!');">4.2.2 內嵌式
<!-- 內嵌式 --> <script type="text/javascript">alert('內嵌式js!'); </script>4.2.3 外鏈式
<!-- 外鏈式 --> <script src="./js/index.js"></script>index.js：
// 外鏈式js alert('外鏈式js!');4.3 變量和數據類型
學習目標
- 能夠說出常用的數據類型
4.3.1 定義變量
JavaScript 是一種弱類型語言，也就是說不需要指定變量的類型，JavaScript的變量類型由它的值來決定， 定義變量需要用關鍵字 'var', 一條JavaScript語句應該以“;”結尾
定義變量的語法格式:
var 變量名 = 值;
var iNum = 123; var str = 'smart';//同時定義多個變量可以用","隔開，公用一個 var 關鍵字 var a = 1, b = 2, c = 3;4.3.2 JavaScript注釋
JavaScript的注釋分為單行注釋(//注釋內容)和多行注釋(/* 多行注釋 */)
<script type="text/javascript"> // 單行注釋var iNum = 123;/* 多行注釋內容多行注釋內容多行注釋內容...*/var str = 'smart'; </script>4.3.3 數據類型
js中有六種數據類型，包括五種基本數據類型和一種復雜數據類型(object)。
4種基本數據類型：
- number 數字類型
- string 字符串類型
- boolean 布爾類型 true 或 false
- undefined undefined類型，變量聲明未初始化，它的值就是undefined
1種復合類型：
- object 后面學習的JavaScript對象屬于復合類型
- null 表示空對象，如果定義的變量將來準備保存對象，可以將變量初始化為null，在頁面上獲取不到對象，返回的值就是null
4.3.4 變量命名規范
-
由數字、字母、下劃線、美元符組成，不能以數字開頭
-
變量名區分大小寫
4.4 函數定義和調用
學習目標
- 能夠知道函數的定義和調用方式
4.4.1 函數定義和調用
函數就是可以重復使用的代碼塊, 使用關鍵字?function?定義函數。
函數調用就是函數名加小括號，比如:函數名(參數[參數可選])
<script type="text/javascript">// 普通函數定義function fnAlert(){alert('hello!');}// 函數調用fnAlert(); </script>4.4.2 匿名函數
函數可以沒有名字, 使用匿名函數表達式。將匿名函數，賦值給一個變量。
<script type="text/javascript">// 匿名函數定義和使用var show = function(){alert('hello!');};show(); </script>4.4.3?定義有參數有返回值的函數
定義函數時，函數如果有參數，參數放到小括號里面，函數如果有返回值，返回值通過?return?關鍵字來返回
<script type="text/javascript">function add(num1, num2){var res = num1 + num2;return res;}var count = add(3, 4);alert(count); //彈出7 </script>函數中?return?關鍵字的作用:
? ? ? ? (1) 返回函數中的值
? ? ? ? (2) 執行完 return 函數即執行結束
4.5 數組及操作方法
學習目標
- 能夠說出數組的定義和取值語法
4.5.1 數組的介紹
數組就是一組數據的集合，javascript 中，數組里面的數據可以是不同類型的數據，好比 python 里面的列表。
4.5.2 數組的定義
// 創建數組方式1 var aList = [1, 2, 3, 4];// 創建數組方式2：實例化對象方式 var aList2 = new Array(1, 2, 3, 'smart');4.5.3 數組的操作
(1) 獲取數組的長度
var aList = [1, 2, 3, 4]; // 獲取數組的長度 alert(aList.length); // 彈出4(2) 根據下標取值
var aList = [1, 2, 3, 4]; // 根據下標取值 alert(aList[0]); // 彈出14.6 循環語句
學習目標
- 能夠知道2種循環語句
4.6.1?循環語句的介紹
循環語句就是讓一部分代碼重復執行，javascript中常用的循環語句有:
- for
- while
4.6.2 for循環
var aList = [1, 3, 5];// for 循環遍歷數組元素 for (var i=0; i<aList.length; i++) {var result = aList[i];console.log(result); }4.6.3 while循環
var aList = [1, 3, 5]; var i = 0;// while 循環遍歷數組元素 while (i < aList.length) {var result = aList[i];alert(result);i++; }說明:
當條件成立的時候, while語句會循環執行
4.7 字符串拼接
學習目標
- 能夠知道字符串拼接的操作
4.7.1 字符串拼接
字符串拼接使用:?"+"?運算符
var num1 = 10; var str1 = 'abc'; var str2 = 'def';var result = str1 + str2; alert(result); // 彈出abcdefresult = num1 + str1; alert(result); // 彈出10abc說明
數字和字符串拼接會自動進行類型轉換(隱式類型轉換)，把數字類型轉成字符串類型進行拼接
4.8 JavaScript對象
學習目標
- 能夠知道JavaScript對象有兩種創建方式
4.8.1 JavaScript對象的介紹
JavaScript 中的所有事物都是對象：字符串、數值、數組、函數等都可以認為是對象，此外，JavaScript 允許自定義對象，對象可以擁有屬性和方法。
4.8.2 JavaScript創建對象操作
創建自定義javascript對象有兩種方式:
- 通過頂級Object類型來實例化一個對象
- 通過對象字面量創建一個對象
Object類創建對象的示例代碼:
<script>// 創建一個對象var person = new Object();// 給對象添加屬性person.name = 'tom';person.age = 25;// 給對象添加方法person.sayName = function () {// this 相當于 python 的 selfalert(this.name);}// 使用屬性和方法alert(person.age);person.sayName(); </script>對象字面量創建對象的示例代碼:
<script>// 創建對象var person2 = {name: 'Rose',age: 18,sayName: function () {// this 相當于 python 的 selfalert(this.name);}}// 使用屬性和方法alert(person2.age);person2.sayName(); </script>說明:
調用屬性和方法的操作都是通過點語法的方式來完成，對象的創建推薦使用字面量方式，因為更加簡單。
4.9 json
學習目標
- 能夠知道json的格式
4.9.1 json的介紹
json是 JavaScript Object Notation 的首字母縮寫，翻譯過來就是javascript對象表示法，這里說的json就是類似于javascript對象的字符串，它同時是一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。
4.9.2 json的格式
json有兩種格式：
- 對象格式
- 數組格式
對象格式:
對象格式的json數據，使用一對大括號({})，大括號里面放入key:value形式的鍵值對，多個鍵值對使用逗號分隔。
對象格式的json數據:
'{"name":"tom","age":18}'格式說明:
json中的(key)屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數據錯誤。
數組格式:
數組格式的json數據，使用一對中括號([])，中括號里面的數據使用逗號分隔。
數組格式的json數據:
'["tom",18,"programmer"]'實際開發的json格式比較復雜,例如:
'{"name":"jack","age":29,"hobby":["reading","travel","photography"]"school":{"name":"Merrimack College","location":"North Andover, MA"} }'4.9.3 json數據轉換成JavaScript對象
json本質上是字符串，如果在js中操作json數據，可以將json字符串轉化為JavaScript對象。
示例代碼:
<script>// json 字符串var sJson = '{"name":"tom", "age": 18}'// 將 json 字符串轉換為 javascript 對象var oPerson = JSON.parse(sJson);// 獲取屬性alert(oPerson.name);alert(oPerson.age); </script>05_Jquery
本章節學習目標
- 能夠知道jQuery的作用及優點
- 能夠知道jQuery的引入方式
- 能夠說出兩種jQuery入口函數的寫法
- 能夠使用jQuery選擇器獲取標簽元素
- 能夠知道獲取和設置元素內容的操作
- 能夠知道獲取和設置元素屬性的操作
- 能夠說出兩個常用的jQuery事件
- 能夠知道ajax的作用
- 能夠結合所學知識,通過Ajax請求天氣數據接口,實現天氣頁面的動態刷新
本章節常用單詞
- person?人，個人
- name?名字
- age?年齡
5.1 jQuery的介紹
學習目標
- 能夠知道jQuery的作用及優點
5.1.1 jQuery的定義
jQuery是對JavaScript的封裝，它是免費、開源的JavaScript函數庫，jQuery 極大地簡化了 JavaScript 編程。
5.1.2?jQuery的作用
jQuery和JavaScript它們的作用一樣，都是負責網頁行為操作，增加網頁和用戶的交互效果的，只不過jQuery簡化了JavaScript編程，jQuery實現交互效果更簡單。
5.1.3 jQuery的優點
- jQuery兼容了現在主流的瀏覽器，增加了程序員的開發效率。
- jQuery簡化了 JavaScript 編程，代碼編寫更加簡單。
5.2 jQuery的用法
學習目標
- 能夠知道jQuery的引入方式
- 能夠說出兩種jQuery入口函數的寫法
5.2.1 jQuery的引入
<script src="js/jquery-1.12.4.min.js"></script> # 本地引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> # 線上引入5.2.2?jQuery的入口函數
我們知道使用js獲取標簽元素，需要頁面加載完成以后再獲取，我們通過給onload事件屬性設置了一個函數來獲取標簽元素，而jquery提供了ready函數來解決這個問題，保證獲取標簽元素沒有問題，它的速度比原生的 window.onload 更快。
入口函數示例代碼:
<script src="js/jquery-1.12.4.min.js"></script> <script>// 原生 js 指定當前頁面的 html 加載完成后，執行對應的 function 函數window.onload = function () {// 原生 javascript 獲取 div01 元素var oDiv = document.getElementById('div01');alert('原生js獲取的div：' + oDiv);};// jQuery 指定當前頁面的 html 加載完成后，執行對應的 function 函數$(document).ready(function(){// jQuery 獲取 div01 元素var $div = $('#div01');alert('jQuery獲取的div：' + $div);}); </script><div id="div01">這是一個div</div>入口函數的簡寫示例代碼:
<script src="js/jquery-1.12.4.min.js"></script> <script>// jQuery 指定當前頁面的 html 加載完成后，執行對應的 function 函數// $(document).ready(function(){// // jQuery 獲取 div01 元素// var $div = $('#div01');// alert('jQuery獲取的div：' + $div);// });// 上面ready的寫法可以簡寫成下面的形式：$(function(){var $div = $('#div01');alert('jQuery獲取的div：' + $div);}); </script><div id="div01">這是一個div</div>5.3 jQuery選擇器
學習目標
- 能夠使用jQuery選擇器獲取標簽元素
5.3.1 jQuery選擇器的介紹
jquery選擇器就是快速選擇標簽元素，獲取標簽的，選擇規則和css樣式一樣。
5.3.2 jQuery選擇器的種類
示例代碼:
$('#myId') //選擇id為myId的標簽 $('.myClass') // 選擇class為myClass的標簽 $('li') //選擇所有的li標簽說明:
可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。
5.4 獲取和設置元素內容
學習目標
- 能夠知道獲取和設置元素內容的操作
5.4.1 html方法的使用
jquery中的html方法可以獲取和設置標簽的html內容
示例代碼:
<script>$(function(){// 獲取 div1 元素var $div = $('#div1');// 獲取 div1 標簽的 html 內容var result = $div.html();alert(result);// 設置 div1 標簽的 html 內容，原 html 內容會被覆蓋$div.html('<span style="color: red;">你好!</span>');// 向 div1 標簽中追加 html 內容$div.append('<span style="color: red;">中國!</span>');}); </script><div id="div1"><p>hello</p> </div>說明:
給指定標簽追加html內容使用append方法
5.5 獲取和設置元素屬性
學習目標
- 能夠知道獲取和設置元素屬性的操作
5.5.1 prop方法的使用
設置標簽的屬性可以使用prop方法。
示例代碼:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-1.12.4.min.js"></script><style>.a01 {color: red;}</style><script>$(function(){// 獲取標簽元素var $a = $("#link01");var $input = $("#input01");// 獲取 a 標簽的 id 屬性值var sId = $a.prop('id');// alert(sId);// 設置 a 標簽的屬性$a.prop({"href": "http://www.baidu.com", "title": "這是去百度的鏈接", "class": "a01"})// 獲取 input 標簽元素的 value 屬性值var sValue = $input.prop('value');alert(sValue);// 設置 input 標簽元素的 value 屬性值$input.prop({"value": "222222"});// 獲取 input 標簽元素的 value 屬性值：簡寫var sValue = $input.val();alert(sValue);// 設置 input 標簽元素的 value 屬性值：簡寫$input.val("222222");});</script> </head> <body><a id="link01">這是一個鏈接</a><input type="text" id="input01" value="111111"> </body> </html>說明:?獲取value屬性和設置value屬性還可以通過val方法來完成。
5.6 jQuery事件
學習目標
- 能夠說出兩個常用的jQuery事件
5.6.1 常用事件
- onload() 頁面加載完成
- click() 鼠標單擊
- blur() 元素失去焦點
- focus() 元素獲得焦點
示例代碼:
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 導入jquery文件 --><script src="js/jquery-1.12.4.min.js"></script><script>// $()內的函數，會在 onload 事件觸發時執行$(function(){// 獲取 html 頁面的元素var button = $('#button1');var text = $('#text1');var div = $('#div1');// 1. 點擊按鈕時，獲取輸入文本框的值button.click(function(){// 標簽元素.val()：獲取標簽元素的 value 值alert(text.val());})// $(this)：觸發事件的 jquery 對象// 2. 文本框獲取焦點text.focus(function(){$(this).css({'background': 'red'});})// 3. 文本框失去焦點text.blur(function(){$(this).css({'background': 'white'});})})</script> </head> <body><div id="div1"><input type="text" id="text1"><input type="button" id="button1" value="點擊"></div> </body>說明:
- this指的是當前發生事件的對象，但是它是一個原生js對象
- $(this) 指的是當前發生事件的jquery對象
5.7 ajax異步請求
學習目標
- 能夠知道ajax的作用
5.7.1 ajax的介紹
ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術，它可以讓 javascript 發送異步的 http 請求，與后臺服務器通信進行數據的獲取，ajax 最大的優點是實現局部刷新，ajax可以發送http請求，當獲取到后臺服務器數據的時候更新頁面顯示數據實現局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。
這里提示一下大家,?在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。
5.7.2 ajax的使用
jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執行ajax請求。
- 使用前, 先在?API Shop，專業的數據交易平臺 | API免費調用，行業數據下載，數據定制?注冊賬號, 在控制臺獲得APIKEY
- 使用時, 需更換自己的APIKEY進行測試使用
示例代碼:
<script>$(function() {$.ajax({// url: 請求地址url: "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=tQntBLT1120d915becfd7863b84819c9e52f047cf6fe862&area=上海",// type: 請求方式，默認是"GET"，常用的還有"POST"type: "GET",// dataType: 設置服務器返回的數據格式，常用的是 json 格式dataType: "JSON",// data: 設置發送給服務器的數據，沒有參數不需設置// success: 設置請求成功后的回調函數success: function(response) {console.log(response);alert("請求成功!")},// error: 設置請求失敗后的回調函數error: function() {alert("請求失敗！請稍后再試！");},// async：設置請求是否異步，默認是true，表示異步，一般不用寫async: true}) }); </script>ajax方法的參數說明:
(1) url 請求地址
(2) type 請求方式，默認是'GET'，常用的還有'POST'
(3) dataType 設置服務器返回的數據格式，常用的是'json'格式
(4) data 設置發送給服務器的數據，沒有參數不需要設置
(5) success 設置請求成功后的回調函數
(6) error 設置請求失敗后的回調函數
(7) async 設置是否異步，默認值是'true'，表示異步，一般不用寫
(8) 同步和異步說明
? ? ? ? a. 同步是必須等待一個 ajax 請求完成之后，代碼才能繼續向下執行
? ? ? ? b. 異步是指代碼的執行不必等待一個 ajax 請求完成
5.7.3 ajax簡寫方式
$.ajax按照請求方式可以簡寫成$.get或者$.post方式
$.get和$.post方法的參數說明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
(1) url 請求地址
(2) data 設置發送給服務器的數據，沒有參數不需要設置
(3) success 設置請求成功后的回調函數
? ? ? ? a. data 請求的結果數據
? ? ? ? b. status 請求的狀態信息, 比如: "success"
? ? ? ? c. xhr 底層發送http請求XMLHttpRequest對象
(4) dataType 設置返回的數據格式,?如果設置了dataType為JSON, 則會將JSON字符串自動轉換為JS對象類型.
? ? ? ? a. "xml"
? ? ? ? b. "html"
? ? ? ? c. "text"
? ? ? ? d. "json"
(5) error 表示錯誤異常處理
????????func 錯誤異常回調函數
<script>/*1. url 請求地址2. data 設置發送給服務器的數據, 沒有參數不需要設置3. success 設置請求成功后的回調函數4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式*/// ajax 的簡寫：GET請求$(function() {$.get("https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=tQntBLT1120d915becfd7863b84819c9e52f047cf6fe862&area=上海", function(response, status) {// 請求成功后的回調函數alert(response);console.log(response);console.log(status);}, "json").error(function() {// 請求失敗后的回調函數alert("請求失敗！請稍后重試！");});});/*1. url 請求地址2. data 設置發送給服務器的數據, 沒有參數不需要設置3. success 設置請求成功后的回調函數4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式. 如果設置了dataType為JSON, 則會將JSON字符串自動轉換為JS對象類型.*/ // ajax 的簡寫：POST請求$.post("https://api.apishop.net/common/weather/get15DaysWeatherByArea", {apiKey: "tQntBLT1120d915becfd7863b84819c9e52f047cf6fe862",area: "上海"}, function(response) {alert(response);console.log(response);}, "json").error(function() {alert("請求失敗！請稍后重試！");});</script>5.8 前端開發綜合練習
學習目標
- 能夠結合所學知識，通過Ajax請求天氣數據接口，實現天氣頁面的動態刷新
5.8.1?數據接口：?https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area=上海
5.8.2 請求數據格式效果
5.8.3 關鍵字說明
{"statusCode":"000000","desc":"請求成功","result":{"area":"上海",//地區名稱"areaid":"101280101", //地區ID"dayList":[{"area":"上海",//地區名稱"areaid":"310000",//地區ID"day_air_temperature":"29", //日平均溫度"day_weather":"小雨",//天氣狀況"day_weather_code":"07",//天氣狀況編碼"day_weather_pic":"http://app1.showapi.com/weather/icon/day/07.png", //天氣狀況示例圖片"day_wind_direction":"東北風",//風向"day_wind_power":"0-3級",//風力"daytime":"20210816",//日期"night_air_temperature":"25",//晚間溫度"night_weather":"陰",//晚間天氣狀況"night_weather_code":"02", //晚間天氣狀態編碼"night_weather_pic":"http://app1.showapi.com/weather/icon/night/02.png",//晚間天氣狀況示例圖"night_wind_direction":"3-4級"//晚間風向}],"ret_code":0} }5.8.4 頁面效果
5.8.5 代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-1.12.4.min.js"></script><script>$(function () {// 綁定`查詢`按鈕的點擊事件函數$("#btnSearch").click(function() {// 獲取 city 文本輸入框的值var city = $("#city").val();// 發送 ajax 請求獲取天氣信息var url = "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=tQntBLT1120d915becfd7863b84819c9e52f047cf6fe862&area=" + city;$.get(url, function(response, success) {// 請求成功執行的函數console.log(response);// 獲取響應數據中的天氣信息數據var list = response.result.dayList;// 將數據填充到頁面上for(var index=0; index<list.length; index++) {var cityDict = list[index];$('#res').append("<ol>");$('div').append("<li>日期："+cityDict.daytime+'</li>');$('div').append("<li>天氣："+cityDict.day_weather +'</li>');$('div').append("<li>氣溫："+cityDict.day_air_temperature+'</li>');$('#res').append("</ol>");}}, "json").error(function() {// 請求失敗執行的函數console.log("error");})});});</script><style>/* 標簽選擇器 */input {font-size: 20px;}/* 類選擇器 */.red {color: red;}/* ID選擇器 */#city {background:oldlace;}</style> </head> <body><input type="text" id="city"><input type="button" id="btnSearch" class="red" value="查詢"><div id="res" class="red"></div> </body> </html>總結
以上是生活随笔為你收集整理的2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： FT232RL变砖之后
- 下一篇： 什么是soft matting方法_NM