當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门

發(fā)布時間：2023/12/14 HTML 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

01_Web開發(fā)

學習目標：

簡單了解應用程序開發(fā)的分類：桌面應用程序和 Web 應用程序

1.1 桌面應用程序開發(fā)

桌面應用程序開發(fā)，是一種比較基本的傳統(tǒng)的軟件開發(fā)方式，是基于 C/S 架構模式的軟件體系。我們比較熟悉的一些軟件，如：QQ、微信、瀏覽器以及一些單機版游戲等，需要通過軟件包安裝的方式集成到我們的操作系統(tǒng)中，這些都屬于桌面應用體系范疇。桌面應用程序使用到的開發(fā)語言主要有：C、C++、Java、C#等。在桌面應用程序開發(fā)過程中，我們常常需要考慮的是語言的跨平臺性以及軟件的多平臺支持，比如常見的操作平臺windows、Linux、MacOS。我們開發(fā)一款桌面應用軟件，一般需要考慮對這幾類操作系統(tǒng)的支持。

1.2 Web應用程序開發(fā)

web應用程序開發(fā)主要是建立在 B/S 架構模式下，衍生出來的一系列web應用程序，即主要是基于瀏覽器的應用程序開發(fā)，比如淘寶、騰訊、京東網(wǎng)等。Web開發(fā)在近年來，隨著本身技術的突破以及移動設備的普及，基于Web領域的開發(fā)，也出現(xiàn)了明確的崗位職責分工，一個Web互聯(lián)網(wǎng)產(chǎn)品中，基本上會分為：Web UI設計、Web前端開發(fā)以及Web后端開發(fā)。

1.2.1 Web前端開發(fā)

Web前端開發(fā)用到的編程語言主要有javascript，以及伴隨有標記性文本語言html和樣式渲染方式css。以及近年來衍生出來的一批優(yōu)秀Web前端框架，比如：vue、react等，使Web前端在應用構建方面的效率得到顯著提升。另外nodejs的出現(xiàn)，越來越多的Web前端開發(fā)人員開始走入服務端編程領域，甚至在一些項目中扮演著Web全棧開發(fā)的角色。

1.2.2 Web后端開發(fā)

Web后端開發(fā)，主要用到的語言有java、python、php等，當然隨著nodeJs的興起，也成為近年來服務端開發(fā)的另一種選擇，當前nodeJs更多的是面向Web前端開發(fā)人員。?

02_HTML基礎

本章節(jié)學習目標

能夠知道html的作用
能夠安裝和卸載 vscode 的插件
能夠設置 vscode 的顏色主題和字體大小
能夠知道單標簽和雙標簽的區(qū)別
能夠知道相對路徑和絕對路徑的區(qū)別
無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

本章節(jié)常用單詞

auto?自動
body?主體，一個HTML 標記
button?按鈕
head頭部
meta元信息
title標題
browser?瀏覽器

2.1 html 的介紹

學習目標

能夠知道html的作用

2.1.1 網(wǎng)頁效果圖 -- 京東首頁

2.1.2 html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。

標記：就是標簽,?<標簽名稱>?</標簽名稱>, 比如:?<html></html>、<h1></h1>?等，標簽大多數(shù)都是成對出現(xiàn)的。

所謂超文本，有兩層含義:

? ? ? ? (1) 因為除了普通文本，網(wǎng)頁中還可以包含圖片、視頻、音頻等內容(超越文本限制)

? ? ? ? (2) 它還可以在網(wǎng)頁中跳轉到另一個網(wǎng)頁，與世界各地主機的網(wǎng)頁鏈接(超鏈接文本)

2.1.3 html的作用

html是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言。

2.2 html 的基本結構

學習目標

能夠寫出html的基本結構

2.2.1 結構代碼

<!DOCTYPE html> <html><head> <meta charset="UTF-8"><title>網(wǎng)頁標題</title></head><body>網(wǎng)頁顯示內容</body> </html>

第一行<!DOCTYPE?html>是文檔聲明，用來指定頁面所使用的html的版本，這里聲明的是一個html5的文檔。
<html>...</html>標簽是開發(fā)人員在告訴瀏覽器，整個網(wǎng)頁是從<html>這里開始的，到</html>結束，也就是html文檔的開始和結束標簽。
<head>...</head>標簽用于定義文檔的頭部，是負責對網(wǎng)頁進行設置標題、編碼格式以及引入css和js文件的。
<body>...</body>標簽是編寫網(wǎng)頁上顯示的內容。

2.2.2 瀏覽網(wǎng)頁文件

網(wǎng)頁文件的后綴是.html或者.htm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網(wǎng)頁。

2.2.3 html基本結構

注意：html 頁面結構上方通常還有?<!DOCTYPE?html>?文檔聲明?

2.3vscode 的基本使用

學習目標

能夠安裝和卸載 vscode 的插件
能夠設置 vscode 的顏色主題和字體大小

2.3.1 vscode 的基本介紹

全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器，目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具。

2.3.2 vscode 的安裝

下載網(wǎng)址:?Download Visual Studio Code - Mac, Linux, Windows
選擇對應的安裝包進行下載:

根據(jù)下載的安裝包雙擊進行安裝即可，當然為了更好的使用 vscode 還可以安裝對應的插件。

2.3.3 vscode 的插件安裝

插件名說明

Chinese (Simplified) Language Pack for VS Code	中文(簡體)漢化包
open in browser	右擊在瀏覽器打開html

(1) 漢化插件安裝

?(2) open in browser插件安裝

(3) 注意: 如果在vscode打開的html文檔中右擊沒有出現(xiàn) open in browser 類型的選項，需要把當前打開的文件關掉，重新打開這個文件就好了。

2.3.4 vscode 的插件卸載

點擊對應安裝的插件，然后再點擊卸載按鈕即可。

2.3.5?vscode 的使用

(1) 打開文件夾創(chuàng)建文件

?(2) 快速創(chuàng)建html文檔的基本結構

?(3) 右擊在瀏覽器打開html文檔

2.3.6 設置字體大小?

2.3.7 設置顏色主題

?2.3.8 設置默認瀏覽器[可選]

(1) 可以根據(jù)自己的需要設置默認使用的瀏覽器

????????谷歌瀏覽器: chrome

2.3.9 設置自動保存代碼[必選]

VSCode默認不會自動保存代碼, 所以當編寫完代碼運行在瀏覽器時, 網(wǎng)頁不會有變化. 因此, 需要勾選自動保存

2.4 初識常用的 html 標簽

學習目標

能夠知道單標簽和雙標簽的區(qū)別

2.4.1 常用的 html 標簽

<h1>一級標題</h1><h2>二級標題</h2><div>這是一個div標簽</div><div>這是一個div標簽</div><p>這是一個段落標簽</p><p>這是一個段落標簽</p><br><img src="./images/mm.png" alt="圖片"><hr><img src="./images/mm.png" alt="圖片"><a href="http://www.baidu.com">百度網(wǎng)</a><div><img src="./images/mm.png" alt="圖片"><a href="http://www.baidu.com">百度網(wǎng)</a></div>

提示:

標簽不區(qū)分大小寫，但是推薦使用小寫。
根據(jù)標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽)
2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽
2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

2.5 資源路徑

學習目標

能夠知道相對路徑和絕對路徑的區(qū)別

當我們使用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 是/

示例代碼:
?

<img src="C:\Users\smart\Desktop\高級-day02\images\mm.png" alt="圖片">

提示:

一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現(xiàn)資源文件找不到的問題

2.6 列表標簽

學習目標

能夠知道列表標簽的種類

2.6.1 列表標簽的種類

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

2.6.2?無序列表

<ul><li>列表標題1</li><li>列表標題2</li><li>列表標題3</li></ul>

2.6.3 有序列表

<ol><li>列表標題1</li><li>列表標題2</li><li>列表標題3</li></ol>

03_CSS基礎

本章節(jié)學習目標

能夠知道 css 的作用
能夠知道 css 的引入三種方式
能夠說出 css 選擇器的種類
能夠知道常用的樣式屬性

本章節(jié)常用單詞

style樣式
type類型
href?網(wǎng)址路徑

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 的基本語法

選擇器 {樣式規(guī)則 }樣式規(guī)則：屬性名1: 屬性值1;屬性名2: 屬性值2;屬性名3: 屬性值3;...

選擇器：是用來選擇標簽的，選出來以后給標簽加樣式。

代碼示例：

div {width: 100px; /* 設置 div 的寬度為 100px */height: 100px; /* 設置 div 的高度為 100px */background: gold; /* 設置 div 的背景為黃色 */ }

說明

css 是由兩個主要的部分構成：選擇器和一條或多條樣式規(guī)則，注意:樣式規(guī)則需要放到大括號里面。

3.2 css 的引入方式

學習目標

能夠知道 css 的引入三種方式

css的三種引入方式

行內式
內嵌式（內部樣式）
外鏈式

3.2.1 行內式

直接在標簽的 style 屬性中添加 css 樣式

示例代碼:

<div style="width: 100px; height: 100px; background: gold;">hello</div>

優(yōu)點：方便、直觀。

缺點：缺乏可重用性。

3.2.2 內嵌式（內部樣式）

在<head>標簽內加入<style>標簽，在<style>標簽中編寫css代碼。

示例代碼:

<head>...<style type="text/css">h3 {color: red;}</style> </head>

優(yōu)點：在同一個頁面內部便于復用和維護。

缺點：在多個頁面之間的可重用性不夠高。

3.2.3 外鏈式

將css代碼寫在一個單獨的.css文件中，在<head>標簽中使用<link>標簽直接引入該文件到頁面中。

示例代碼:

main.css：

a {color: green;font-size: 20px; } <head>...<link rel="stylesheet" href="./css/main.css"> </head>

優(yōu)點：使得css樣式與html頁面分離，便于整個頁面系統(tǒng)的規(guī)劃和維護，可重用性高。

缺點：css代碼由于分離到單獨的css文件，容易出現(xiàn)css代碼過于集中，若維護不當則極容易造成混亂。

3.2.4 css引入方式選擇

行內式幾乎不用
內嵌式在學習css樣式的階段使用
外鏈式在公司開發(fā)的階段使用，可以對 css 樣式和 html 頁面分別進行開發(fā)。

完整代碼：

<!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><link rel="stylesheet" href="./css/main.css"> </head> <body><div style="width: 100px; height: 100px; background: gold;">hello</div><h3>三級標題</h3><a href="http://www.baidu.com">百度網(wǎng)</a> </body> </html>

3.3 css 選擇器

學習目標

能夠說出 css 選擇器的種類

3.3.1 css 選擇器的定義

css 選擇器是用來選擇標簽的，選出來以后給標簽加樣式。

3.3.2 css 選擇器的種類

標簽選擇器

類選擇器

id選擇器

3.3.3 標簽選擇器

根據(jù)標簽來選擇標簽，以標簽開頭，此種選擇器影響范圍大，一般用來做一些通用設置。

示例代碼

<!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 類選擇器

根據(jù)類名來選擇標簽，以 . 開頭, 一個類選擇器可應用于多個標簽上，一個標簽上也可以使用多個類選擇器，多個類選擇器需要使用空格分割，應用靈活，可復用，是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選擇器

根據(jù)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

本章節(jié)學習目標

能夠知道JavaScript的作用
能夠知道JavaScript的使用方式
能夠說出常用的數(shù)據(jù)類型
能夠知道函數(shù)的定義和調用方式
能夠知道 2種循環(huán)語句
能夠知道字符串拼接的操作
能夠知道json的格式

本章節(jié)常用單詞

alert?提醒，警示
Array數(shù)組
length?長度
result?結果
append?附加，增補

4.1 JavaScript的介紹

學習目標

能夠知道JavaScript的作用

4.1.1 JavaScript的定義

JavaScript是運行在瀏覽器端的腳本語言, 是由瀏覽器解釋執(zhí)行的, 簡稱js.

它能夠讓網(wǎng)頁和用戶有交互功能, 增加良好的用戶體驗效果。

前端開發(fā)三大塊

? ? ? ? (1) HTML：負責網(wǎng)頁結構

? ? ? ? (2) CSS：負責網(wǎng)頁樣式

? ? ? ? (3) JavaScript：負責網(wǎng)頁行為，比如:網(wǎng)頁與用戶的交互效果

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 變量和數(shù)據(jù)類型

學習目標

能夠說出常用的數(shù)據(jù)類型

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的注釋分為單行注釋(//注釋內容)和多行注釋(/* 多行注釋 */)

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

js中有六種數(shù)據(jù)類型，包括五種基本數(shù)據(jù)類型和一種復雜數(shù)據(jù)類型(object)。

4種基本數(shù)據(jù)類型：

number 數(shù)字類型
string 字符串類型
boolean 布爾類型 true 或 false
undefined undefined類型，變量聲明未初始化，它的值就是undefined

1種復合類型：

object 后面學習的JavaScript對象屬于復合類型
null 表示空對象，如果定義的變量將來準備保存對象，可以將變量初始化為null，在頁面上獲取不到對象，返回的值就是null

//1.1 數(shù)字 number var num = 10.1;//1.2 字符串 string var str = '1234';//1.3 布爾 boolean; var isTrue = false;//1.4 未定義 undefined var unData;//1.5 null 表示空對象 var nullData = null;//1.6 object 表示對象類型 var obj = {name: "隔壁老王",age: 38 } // 獲取變量的類型 typeof(obj) // 獲取對象的name屬性 obj.name // 獲取對象的age屬性 obj.age

4.3.4 變量命名規(guī)范

由數(shù)字、字母、下劃線、美元符組成，不能以數(shù)字開頭
變量名區(qū)分大小寫

4.4 函數(shù)定義和調用

學習目標

能夠知道函數(shù)的定義和調用方式

4.4.1 函數(shù)定義和調用

函數(shù)就是可以重復使用的代碼塊, 使用關鍵字?function?定義函數(shù)。

函數(shù)調用就是函數(shù)名加小括號，比如:函數(shù)名(參數(shù)[參數(shù)可選])

4.4.2 匿名函數(shù)

函數(shù)可以沒有名字, 使用匿名函數(shù)表達式。將匿名函數(shù)，賦值給一個變量。

4.4.3?定義有參數(shù)有返回值的函數(shù)

定義函數(shù)時，函數(shù)如果有參數(shù)，參數(shù)放到小括號里面，函數(shù)如果有返回值，返回值通過?return?關鍵字來返回

函數(shù)中?return?關鍵字的作用:
? ? ? ? (1) 返回函數(shù)中的值
? ? ? ? (2) 執(zhí)行完 return 函數(shù)即執(zhí)行結束

4.5 數(shù)組及操作方法

學習目標

能夠說出數(shù)組的定義和取值語法

4.5.1 數(shù)組的介紹

數(shù)組就是一組數(shù)據(jù)的集合，javascript 中，數(shù)組里面的數(shù)據(jù)可以是不同類型的數(shù)據(jù)，好比 python 里面的列表。

4.5.2 數(shù)組的定義

// 創(chuàng)建數(shù)組方式1 var aList = [1, 2, 3, 4];// 創(chuàng)建數(shù)組方式2：實例化對象方式 var aList2 = new Array(1, 2, 3, 'smart');

4.5.3 數(shù)組的操作

(1) 獲取數(shù)組的長度

var aList = [1, 2, 3, 4]; // 獲取數(shù)組的長度 alert(aList.length); // 彈出4

(2) 根據(jù)下標取值

var aList = [1, 2, 3, 4]; // 根據(jù)下標取值 alert(aList[0]); // 彈出1

4.6 循環(huán)語句

學習目標

能夠知道2種循環(huán)語句

4.6.1?循環(huán)語句的介紹

循環(huán)語句就是讓一部分代碼重復執(zhí)行，javascript中常用的循環(huán)語句有:

for
while

4.6.2 for循環(huán)

var aList = [1, 3, 5];// for 循環(huán)遍歷數(shù)組元素 for (var i=0; i<aList.length; i++) {var result = aList[i];console.log(result); }

4.6.3 while循環(huán)

var aList = [1, 3, 5]; var i = 0;// while 循環(huán)遍歷數(shù)組元素 while (i < aList.length) {var result = aList[i];alert(result);i++; }

說明:

當條件成立的時候, while語句會循環(huán)執(zhí)行

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

說明

數(shù)字和字符串拼接會自動進行類型轉換(隱式類型轉換)，把數(shù)字類型轉成字符串類型進行拼接

4.8 JavaScript對象

學習目標

能夠知道JavaScript對象有兩種創(chuàng)建方式

4.8.1 JavaScript對象的介紹

JavaScript 中的所有事物都是對象：字符串、數(shù)值、數(shù)組、函數(shù)等都可以認為是對象，此外，JavaScript 允許自定義對象，對象可以擁有屬性和方法。

4.8.2 JavaScript創(chuàng)建對象操作

創(chuàng)建自定義javascript對象有兩種方式:

通過頂級Object類型來實例化一個對象
通過對象字面量創(chuàng)建一個對象

Object類創(chuàng)建對象的示例代碼:

對象字面量創(chuàng)建對象的示例代碼:

說明:

調用屬性和方法的操作都是通過點語法的方式來完成，對象的創(chuàng)建推薦使用字面量方式，因為更加簡單。

4.9 json

學習目標

能夠知道json的格式

4.9.1 json的介紹

json是 JavaScript Object Notation 的首字母縮寫，翻譯過來就是javascript對象表示法，這里說的json就是類似于javascript對象的字符串，它同時是一種數(shù)據(jù)格式，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的xml數(shù)據(jù)格式。

4.9.2 json的格式

json有兩種格式：

對象格式
數(shù)組格式

對象格式:

對象格式的json數(shù)據(jù)，使用一對大括號({})，大括號里面放入key:value形式的鍵值對，多個鍵值對使用逗號分隔。

對象格式的json數(shù)據(jù):

'{"name":"tom","age":18}'

格式說明:

json中的(key)屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數(shù)據(jù)錯誤。

數(shù)組格式:

數(shù)組格式的json數(shù)據(jù)，使用一對中括號([])，中括號里面的數(shù)據(jù)使用逗號分隔。

數(shù)組格式的json數(shù)據(jù):

'["tom",18,"programmer"]'

實際開發(fā)的json格式比較復雜,例如:

'{"name":"jack","age":29,"hobby":["reading","travel","photography"]"school":{"name":"Merrimack College","location":"North Andover, MA"} }'

4.9.3 json數(shù)據(jù)轉換成JavaScript對象

json本質上是字符串，如果在js中操作json數(shù)據(jù)，可以將json字符串轉化為JavaScript對象。

示例代碼:

05_Jquery

本章節(jié)學習目標

能夠知道jQuery的作用及優(yōu)點
能夠知道jQuery的引入方式
能夠說出兩種jQuery入口函數(shù)的寫法
能夠使用jQuery選擇器獲取標簽元素
能夠知道獲取和設置元素內容的操作
能夠知道獲取和設置元素屬性的操作
能夠說出兩個常用的jQuery事件
能夠知道ajax的作用
能夠結合所學知識,通過Ajax請求天氣數(shù)據(jù)接口,實現(xiàn)天氣頁面的動態(tài)刷新

本章節(jié)常用單詞

person?人，個人
name?名字
age?年齡

5.1 jQuery的介紹

學習目標

能夠知道jQuery的作用及優(yōu)點

5.1.1 jQuery的定義

jQuery是對JavaScript的封裝，它是免費、開源的JavaScript函數(shù)庫，jQuery 極大地簡化了 JavaScript 編程。

5.1.2?jQuery的作用

jQuery和JavaScript它們的作用一樣，都是負責網(wǎng)頁行為操作，增加網(wǎng)頁和用戶的交互效果的，只不過jQuery簡化了JavaScript編程，jQuery實現(xiàn)交互效果更簡單。

5.1.3 jQuery的優(yōu)點

jQuery兼容了現(xiàn)在主流的瀏覽器，增加了程序員的開發(fā)效率。
jQuery簡化了 JavaScript 編程，代碼編寫更加簡單。

5.2 jQuery的用法

學習目標

能夠知道jQuery的引入方式
能夠說出兩種jQuery入口函數(shù)的寫法

5.2.1 jQuery的引入

5.2.2?jQuery的入口函數(shù)

我們知道使用js獲取標簽元素，需要頁面加載完成以后再獲取，我們通過給onload事件屬性設置了一個函數(shù)來獲取標簽元素，而jquery提供了ready函數(shù)來解決這個問題，保證獲取標簽元素沒有問題，它的速度比原生的 window.onload 更快。

入口函數(shù)示例代碼:

入口函數(shù)的簡寫示例代碼:

5.3 jQuery選擇器

學習目標

能夠使用jQuery選擇器獲取標簽元素

5.3.1 jQuery選擇器的介紹

jquery選擇器就是快速選擇標簽元素，獲取標簽的，選擇規(guī)則和css樣式一樣。

5.3.2 jQuery選擇器的種類

標簽選擇器

類選擇器

id選擇器

示例代碼:

$('#myId') //選擇id為myId的標簽 $('.myClass') // 選擇class為myClass的標簽 $('li') //選擇所有的li標簽

說明:
可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。

$(function(){var result = $("div").length;alert(result); });

5.4 獲取和設置元素內容

學習目標

能夠知道獲取和設置元素內容的操作

5.4.1 html方法的使用

jquery中的html方法可以獲取和設置標簽的html內容

示例代碼:

說明:

給指定標簽追加html內容使用append方法

5.5 獲取和設置元素屬性

學習目標

能夠知道獲取和設置元素屬性的操作

5.5.1 prop方法的使用

設置標簽的屬性可以使用prop方法。

示例代碼:

說明:?獲取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><script src="js/jquery-1.12.4.min.js"></script><script>// $()內的函數(shù)，會在 onload 事件觸發(fā)時執(zhí)行$(function(){// 獲取 html 頁面的元素var button = $('#button1');var text = $('#text1');var div = $('#div1');// 1. 點擊按鈕時，獲取輸入文本框的值button.click(function(){// 標簽元素.val()：獲取標簽元素的 value 值alert(text.val());})// $(this)：觸發(fā)事件的 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指的是當前發(fā)生事件的對象，但是它是一個原生js對象
$(this) 指的是當前發(fā)生事件的jquery對象

5.7 ajax異步請求

學習目標

能夠知道ajax的作用

5.7.1 ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術，它可以讓 javascript 發(fā)送異步的 http 請求，與后臺服務器通信進行數(shù)據(jù)的獲取，ajax 最大的優(yōu)點是實現(xiàn)局部刷新，ajax可以發(fā)送http請求，當獲取到后臺服務器數(shù)據(jù)的時候更新頁面顯示數(shù)據(jù)實現(xiàn)局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數(shù)據(jù)交互就可以使用ajax了。

這里提示一下大家,?在html頁面使用ajax需要在web服務器環(huán)境下運行, 一般向自己的web服務器發(fā)送ajax請求。

5.7.2 ajax的使用

jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執(zhí)行ajax請求。

使用前, 先在?API Shop，專業(yè)的數(shù)據(jù)交易平臺 | API免費調用，行業(yè)數(shù)據(jù)下載，數(shù)據(jù)定制?注冊賬號, 在控制臺獲得APIKEY
使用時, 需更換自己的APIKEY進行測試使用

示例代碼:

ajax方法的參數(shù)說明:

(1) url 請求地址

(2) type 請求方式，默認是'GET'，常用的還有'POST'

(3) dataType 設置服務器返回的數(shù)據(jù)格式，常用的是'json'格式

(4) data 設置發(fā)送給服務器的數(shù)據(jù)，沒有參數(shù)不需要設置

(5) success 設置請求成功后的回調函數(shù)

(6) error 設置請求失敗后的回調函數(shù)

(7) async 設置是否異步，默認值是'true'，表示異步，一般不用寫

(8) 同步和異步說明

? ? ? ? a. 同步是必須等待一個 ajax 請求完成之后，代碼才能繼續(xù)向下執(zhí)行

? ? ? ? b. 異步是指代碼的執(zhí)行不必等待一個 ajax 請求完成

5.7.3 ajax簡寫方式

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

$.get和$.post方法的參數(shù)說明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

(1) url 請求地址

(2) data 設置發(fā)送給服務器的數(shù)據(jù)，沒有參數(shù)不需要設置

(3) success 設置請求成功后的回調函數(shù)

? ? ? ? a. data 請求的結果數(shù)據(jù)

? ? ? ? b. status 請求的狀態(tài)信息, 比如: "success"

? ? ? ? c. xhr 底層發(fā)送http請求XMLHttpRequest對象

(4) dataType 設置返回的數(shù)據(jù)格式,?如果設置了dataType為JSON, 則會將JSON字符串自動轉換為JS對象類型.

? ? ? ? a. "xml"

? ? ? ? b. "html"

? ? ? ? c. "text"

? ? ? ? d. "json"

(5) error 表示錯誤異常處理

????????func 錯誤異?；卣{函數(shù)

5.8 前端開發(fā)綜合練習

學習目標

能夠結合所學知識，通過Ajax請求天氣數(shù)據(jù)接口，實現(xiàn)天氣頁面的動態(tài)刷新

5.8.1?數(shù)據(jù)接口：?https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area=上海

5.8.2 請求數(shù)據(jù)格式效果

5.8.3 關鍵字說明

{"statusCode":"000000","desc":"請求成功","result":{"area":"上海",//地區(qū)名稱"areaid":"101280101", //地區(qū)ID"dayList":[{"area":"上海",//地區(qū)名稱"areaid":"310000",//地區(qū)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", //晚間天氣狀態(tài)編碼"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 () {// 綁定`查詢`按鈕的點擊事件函數(shù)$("#btnSearch").click(function() {// 獲取 city 文本輸入框的值var city = $("#city").val();// 發(fā)送 ajax 請求獲取天氣信息var url = "https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=tQntBLT1120d915becfd7863b84819c9e52f047cf6fe862&area=" + city;$.get(url, function(response, success) {// 請求成功執(zhí)行的函數(shù)console.log(response);// 獲取響應數(shù)據(jù)中的天氣信息數(shù)據(jù)var list = response.result.dayList;// 將數(shù)據(jù)填充到頁面上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() {// 請求失敗執(zhí)行的函數(shù)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大数据学习日志——数据埋点+网络爬虫——前端开发入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

HTML

2021-10-19大数据学习日志——数据埋点+网络爬虫——前端开发入门

01_Web開發(fā)

1.1 桌面應用程序開發(fā)

1.2 Web應用程序開發(fā)

1.2.1 Web前端開發(fā)

1.2.2 Web后端開發(fā)

02_HTML基礎

本章節(jié)學習目標

本章節(jié)常用單詞

2.1 html 的介紹

2.1.1 網(wǎng)頁效果圖 -- 京東首頁

2.1.2 html的定義

2.1.3 html的作用

2.2 html 的基本結構

2.2.1 結構代碼

2.2.2 瀏覽網(wǎng)頁文件

2.2.3 html基本結構

2.3vscode 的基本使用

2.3.1 vscode 的基本介紹

2.3.2 vscode 的安裝

2.3.3 vscode 的插件安裝

2.3.4 vscode 的插件卸載

2.3.5?vscode 的使用

2.3.6 設置字體大小?

2.3.7 設置顏色主題

?2.3.8 設置默認瀏覽器[可選]

2.3.9 設置自動保存代碼[必選]

2.4 初識常用的 html 標簽

2.4.1 常用的 html 標簽

提示:

2.5 資源路徑

2.5.1 相對路徑

2.5.2 絕對路徑

2.6 列表標簽

2.6.1 列表標簽的種類

2.6.2?無序列表

2.6.3 有序列表

03_CSS基礎

本章節(jié)學習目標

本章節(jié)常用單詞

3.1 css 的介紹

3.1.1 css 的定義

3.1.2 css 的作用?

3.1.3 css 的基本語法

3.2 css 的引入方式

3.2.1 行內式

3.2.2 內嵌式（內部樣式）

3.2.3 外鏈式

3.2.4 css引入方式選擇

3.3 css 選擇器

3.3.1 css 選擇器的定義

3.3.2 css 選擇器的種類

3.3.3 標簽選擇器

3.3.4 類選擇器

3.3.5 id選擇器

04_JavaScript

本章節(jié)學習目標

本章節(jié)常用單詞

4.1 JavaScript的介紹

4.1.1 JavaScript的定義

4.2 JavaScript的使用方式

4.2.1 行內式（主要用于事件）

4.2.2 內嵌式

4.2.3 外鏈式

4.3 變量和數(shù)據(jù)類型

4.3.1 定義變量

4.3.2 JavaScript注釋

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

4.3.4 變量命名規(guī)范

4.4 函數(shù)定義和調用

4.4.1 函數(shù)定義和調用

4.4.2 匿名函數(shù)

4.4.3?定義有參數(shù)有返回值的函數(shù)

4.5 數(shù)組及操作方法

4.5.1 數(shù)組的介紹

4.5.2 數(shù)組的定義

4.5.3 數(shù)組的操作

4.6 循環(huán)語句