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

javascript

前端基础之Html、CSS、JavaScript、JQuery、Ajax

發布時間：2023/12/20 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了前端基础之Html、CSS、JavaScript、JQuery、Ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端

1.HTML

XML：可擴展標記語言
XHTML：可擴展的超文本標記語言

1. HTML 概述

HTML：超文本標記語言

網頁組成：文字 + 圖片 + 表格 + 表單 + 鏈接 + 視頻 + 音頻

網頁文件的格式：htm ，html

網頁的注釋：

html 結構

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>頭部標題</title></head><body>網頁內容所在位置</body> </html>

2. 標記

標記的語法

<起始標簽屬性名="值" ......> 被標記的內容</結束標簽>

注意：

不區分大小寫（個別瀏覽器區分）

一般標記都是成對出現，極少數單獨出現

標簽可以相互嵌套，但不可交叉嵌套（屬性如果其沖突，就近原則）

標簽分類：

塊級標簽：有換行，有寬高，外邊距正常，塊級標簽和行級標簽都可以放

行內標簽：沒有換行，寬高無效，上下外邊距無效，只能放文字和行級標簽，不能放塊級標簽

如果要給服務端提交數據，表單中的組件必須有 name 和 value 屬性。用于給服務端獲取數據方便

特殊字符

  空格 > > < < " " & & © 版權? ® 注冊?

標記

常用標記

標題：<hn="1...6" align="left|center|right" ></hn> 段落：<p align="left|center|right"></p> 字體：<font size="1-7" color="顏色" face="字體風格[黑體]"></font><i>斜體</i> <em>斜體</em><b>加粗</b> <strong>加粗</strong><u>下劃線</u> <ins>下劃線</ins><s>刪除線(貫穿線)</s><del>刪除線</del><sub>下標標識</sub><sup>上部標識</sup>換行：<br/> 居中：<center></center> 元信息：<meta /> 預定義：<pre></pre> 地址：<address></address> 音頻：<embed src=""></embed> 水平線：<hr size="粗細" color="顏色" width="長度" align="center|left|right" noshade(3D 凹凸效果)/> 滾動：<marquee direction="left|right|down|up" scrollamount="滾動速度"behavior="scroll(重復)|slide(不重復)|alternate(來回滾動)" loop="滾動次數-1" scrolldelay="兩次之間的有延遲值越大越明顯的停頓"> </marquee> 頁面排版：<div> </div>

圖片標記：img

鏈接標記：a

文本鏈接

圖片鏈接：可做圖片按鈕

錨連接：一般用于當前頁面位置的跳轉

<a name="錨名字" href="">首頁</a> <a href="#錨名字">跳轉到首頁</a>

表格

完整版

屬性

table 表格

border: 邊框粗細 bordercolor:邊框顏色 width: 寬度 height: 高度 bgcolor: 背景顏色 background: 背景圖片 cellspacing:單元格與單元格之間的距離 cellpadding:單元格與數據之間的距離

tr 行

align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下垂直位置 height: width: bgcolor: background:背景圖片

td|th 列（th 列屬于首列，自動居中加粗）

align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下垂直位置 height: width: bgcolor: background: 背景圖片 rowspan: 合并行 colspan: 合并列 # 合并行列：數格子,數過的格子不能再數

列表

有序列表

無序列表

自定義列表

表單 form、input、select、textarea

表單：是頁面提供客戶端輸入信息的元素的統稱，包括表單和表單元素

如果要給服務端提交數據，表單中的組件必須有 name 和 value 屬性，用于給服務端獲取數據方便

<form action="url 提交地址" method="get|post" name="formname"><fieldset><legend>基本信息</legend>文本框:<input type="text" name="" size="" maxlength="" value="默認值"/>密碼框:<input type="password" name="" size="" maxlength="" value="默認值"/>單選框:<input type="radio" name="sex" value="" checked="checked"/>提示符多選框:<input type="checkbox" name="" value="" checked="checked"/> 提示文字隱藏文本:<input type="hidden" name="" value=""/>上傳文件:<input type="file" name=""/></fieldset>下拉列表：<select name="" size="顯示個數"><optgroup lable="四川省"><option value="成都">成都</option> <option value="南充" selected="selected">南充</option></optgroup></select>文本域:<textarea name="" rows="" cols="" readonly="readonly"></textarea>提交按鈕:<input type="submit" value=""/>重置按鈕:<input type="reset" value=""/>普通按鈕:<input type="button" value=""/>圖片按鈕：<input type="image" src="" alt="圖片加載失敗"/>按鈕圖片：<button type="submit"><img src="" alt="" title="提交"/></button> </form>

頁面框架

框架一般用于寫后臺頁面的時候用

定義框架

<frameset rows="20%,*"> 縱向 <frame src="頁面路徑" noresize="noresize" frameborder="0" scrolling=""/><frame src="頁面路徑" name="right"/> </frameset> <frameset cols="30%,60%,*"> 橫向 </frameset> <noframes><body>瀏覽器不支持</body> </noframes>left.html: <a href="right2.html" target="right">美女</a> right是右側框架的名稱

導入框架

3. GET、POST

GET 請求和 POST 請求的區別：

在客服端的區別

區別GETPOST

是否顯示	提交的信息都顯示在地址欄中	提交的信息不顯示地址欄中
封裝位置	將信息封裝到了請求消息的請求行中	將信息封裝到了請求體中
安全性	對于敏感的數據信息不安全	對于敏感信息安全
數據體積	對于大數據不行，因為地址欄存儲體積有限，大小不超過4KB	可以提交大體積數據
速度	相對較快	相對較慢

在服務端的區別（亂碼處理方式）

如果提交中文到 tomcat 服務器會出現亂碼，服務器默認會用 iso-8859-1 進行解碼，解決方法：

對 get 提交和 post 提交都有效

通過 iso-8859-1 進行編碼，再用指定的中文碼表解碼即可

用 URLDecoder.decode(user,“utf-8”)

修改 tomcat 的配置文件 server.xml：加上 URIEncoding="UTF-8"

對于 post 提交，還有另一種解決辦法，就是直接使用服務端一個 request 對象

request 對象的 setCharacterEncoding 方法直接設置指定的中文碼表就可以將中文數據解析出來。這個方法只對請求體中的數據進行解碼

// 在獲取數據之前，設置請求的字符編碼集 request.setCharacterEncoding("UTF-8");

和服務端交互的三種方式

位置請求方式

地址欄輸入 url 地址	get
超鏈接	get
表單	get 和 post

數據校驗

客服端校驗服務端校驗

是否校驗	如果在客戶端進行增強型的校驗 (只要有一個組件內容是錯誤，是無法繼續提交的, 只有全對才可以提交)	服務端收到數據后，也還需要校驗
校驗目的	提高用戶的上網體驗效果，減輕服務器端的壓力	為了安全性

2. CSS

CSS：層疊樣式表。 HTML 定義網頁的內容，CSS 定義內容的樣式

CSS 的注釋：/* 注釋內容 */

1. 樣式

行內樣式 style

內嵌樣式

外聯樣式 link

2. 選擇器

優先級：id 選擇器 > 類選擇器 > 標簽選擇器

id 選擇器 #

#name{ background-color:red; width:500px; }

class 選擇器 .

.name1{ 樣式屬性 }

標簽選擇器

h1{ font-size:36px;color:red;} /*頁面所有的 h1 標記里的字體大小為 36px,顏色為紅色*/

組合選擇器

h1 a li{ font-size:36px;color:red; } /*所有h1下的a下的li里的字體大小為36px,顏色為紅色*/

通配符選擇器

*{樣式屬性} /* 整個頁面所有的內容都具有的樣式 */

3. 布局

漂浮 float

定位 position

定位的原則：先相對定位，再絕對定位

position:relative; 相對定位，不脫離文檔流 position:absolute; 絕對定位，脫離文檔流具體位置設置：top,left,right,bottom z-index:數值越大，越在上層

4. 樣式屬性

標簽轉換

display:block; 行轉塊 display:inline; 塊轉行 display:none; 隱藏

尺寸、溢出、鼠標變手型

width:100px;固定寬 min-width:100px;最小寬度 max-width:100px;最大寬度cursor:pointer;鼠標變手型 overflow:hidden/visible/scroll/auto;隱藏/顯示/始終出現滾動條/需要時才出現滾動條

字體/文本

Font-style:normal/italic(斜體) Font-size:24px; Font-family:宋體/楷體 Font-weight:bold/bolder/lighter Color:字體顏色Line-height:行高 Letter-spacing:字間距 word-spacing:詞間距 Text-decoration:none/underline/overline/line-through;無修飾/下劃線/上劃線/貫穿線 Text-transform:uppercase/lowercase/capitalize; 大寫/小寫/首字母大寫 Text-indent:文本縮進 Text-align:left/right/center

背景 transparent：透明

Background-color:背景顏色透明 transparent Background-image:背景圖片 Background-repeat:repeat|no-repeat|repeat-x|repeat-y 重復 Background-position:背景位置

邊框

樣式：border-style:solid; 顏色：border-color:red; 寬度：border-width:2px; 簡寫：border:2px solid red;border-top-width:3px; border-top-style:dashed; border-top-color:#000;border-width:2px; 一值(四邊) 兩值(上下左右) 三個值(上左右下) 四個值(上右下左)

邊距 Margin、Padding

內邊距:當前標記和當前標記里的內容區域之間的距離Padding 兩值(上下左右) 三個值(上左右下) 四個值(上右下左)Padding-top:Padding-left:Padding-right:Paddding-bottom: 外邊距:當前標記與該標記之外的內容的區域之間的距離Margin

列表

list-style-image; list-style-position; list-style-type：disc/circle/square/decimal/none; list-style：none;取消列表樣式

5. 偽類

a:link{當連接被訪問之前的樣式} a:visited{當連接被訪問之后的樣式} a:hover{當鼠標懸浮在連接之上時的樣式} a:active{當連接點擊與釋放的瞬間的樣式} a:focus{獲得焦點}

3. JavaScript

1. JavaScript 概述

JavaScript 是基于對象和事件驅動的腳本語言，主要應用在客戶端

javascript 是由上到下解析的，瀏覽器會按照編寫的順序執行每條語句

JS注釋：// 單行注釋、/**/ 多行注釋

特點：

交互性(它可以做的就是信息的動態交互)

安全性(不允許直接訪問本地硬盤)

跨平臺性(只要是可以解釋 Js 的瀏覽器都可以執行，和平臺無關)

JavaScript 與 Java 不同

Js 是基于對象，Java 是面向對象

Js 只需解釋就可以執行，Java 需要先編譯成字節碼文件，再執行

Js 是弱類型，Java 是強類型

JavaScript 可以做什么？

寫入 html 輸出（把 html 標簽寫入 html 頁面）

對事件做出反應

改變 html 內容

改變 html 圖像

改變 html 樣式

驗證輸入

Js 和 HTML 相結合的方式

將 javascript 代碼封裝到<script>標簽中

將 javascript 代碼封裝到 js 文件中，并通過<script>中的 src 屬性進行導入

注意：如果<script>標簽中使用 src 屬性，那么該標簽中封裝的 javascript 代碼不會被執行，
所以通常導入 js 文件都是用單獨<script>來完成。格式：

2. JavaScript 語法

1. 變量

變量的命名規則：

變量通常以字母開頭

變量也能以$和符號開頭（不推薦這么做）

變量名對大小寫敏感（y 和 Y 是兩個不同的變量）

變量（數據類型）：Number、Boolean、String、Object、Array、Object、null、undefined

全局變量：在<script></script>標簽中直接聲明的變量
局部變量：在方法中聲明的變量

javascript 擁有動態類型，即是相同的變量可用作不同的類型（弱數據類型）,由等號右邊的值來決定變量的數據類型。

例如: var x; // 此時 x 是 Undefined 數據類型。 var x = 6; // x 是數字類型 var x = "bochy"; // x 是 String 類型

注意：

js 中定義變量，使用 var 關鍵字

如果把值賦給尚未聲明的變量(沒用 var 聲明)，該變量將自動作為全局變量聲明，即使他在函數內

undefined：未定義，其實它是一個常量

typeof ：判斷具體的值的數據類型

2. 運算符

類型運算符

算術運算符	+ - * / % ++ –
賦值運算符	= += -= *= /= %=
比較運算符	> < >= <= != == ===(全等)
邏輯運算符	&&(與) \|\|(或) ! (非)
位運算符	& (與) \|(或) ^(異或) >>(右移) <<(左移) >>>(無符號右移)
三元運算符	? :

3. 語句

順序結構

判斷結構：if-else

選擇結構：switch

循環結構：for、while、do_while、for…in(用于數組或者對象)

for(var 新變量 in 循環的變量){ //要執行的循環語句 }

特有語句：with

異常語句：try/catch、throw

try{if(條件) throw "可能出現異常的代碼塊的具體異常"; }catch(e){ //處理異常的代碼 }

4. 對象

常用對象有：String、Array、Date、Math、Number、Global、自定義對象

Number 對象：javascript 只有一種數字類型，數字可以帶小數點，也可以不帶

定義方法

var a1 = 12; var a2 = 12.2; var a3 = new Number(12);

Boolean 對象

定義方法

var b1 = new Boolean(); // 默認為false var b2 = new Boolean(true); //true var b3 = true;

String 對象

定義方法

var str1 = "hello"; var str2 = new String("hello"); var str3 = new String(); str3 = "hello";

屬性（constructor、length、prototype 原型屬性）

var str = "www.bochy.COM.cn"; var len = str.length;

方法（toString、valueOf）

toUpperCase(); // 轉成大寫 toLowerCase(); // 轉成小寫 charAt(index); // 下標處的字符 indexOf("o"); // 首次出現的下標 substr(start,length); // 從start處截取length長度的字串 substring(start,end); // 截取字串 [start,end) split("."); // 分割 valueOf(var) // 轉為字符串對象 test("正則表達式字符串"); // 使用正則表達式進行校驗

Array 對象

特點：1.長度是可變的 2.元素類型是任意的，建議存儲同一類型的元素，操作起來比較方便

定義方法

var arr1 = new Array(); // 相當于 Var arr = [] arr1[0] = "a1"; var arr2 = new Array(12,13,14,15); var arr3 = [12,13,14,15];

屬性（constructor、length、prototype）

方法

contact(); // 連接 join(); // 加入 pop(); // 刪除最后一個 shift(); // 刪除第一個 push(); // 添加 splice(); // 刪除并替換 unshift(); // 插入第一個

Object 對象

定義方法

var per1 = {"name":"李四","age":22}; var per2 = new Object(); per2.name = "張三"; //設置對象的屬性和值 per2.age = 20;

Date 對象

var d = new Date(); var year = d.getFullYear(); // 獲取年 var month = d.getMonth()+1; // 獲取月份 var date = d.getDate(); // 獲取日期 var hour = d.getHours(); // 獲取小時 var minute = d.getMinutes(); // 獲取分鐘 var second = d.getSeconds(); // 獲取秒數 var day = d.getDay(); // 獲取星期值 var ms = d.getMilliseconds(); // 獲取毫秒

Math 對象

Math 對象不能用 new 關鍵字創建，如果試圖這樣做會給出錯誤。

該對象在裝載腳本引擎時，由該引擎創建。其方法和屬性在腳本中總是可用

ceil(); // 返回大于等于其數字參數的最小整數。 floor(); // 返回小于等于其數值參數的最大整數。 max();min(); // 求最大值，最小值 random(); // 隨機數, [0,1)

Global 對象

方法

isNaN(); // 是否非法

自定義對象

5. 函數

分類：一般函數、匿名函數、動態函數

函數：就是一個功能的封裝體

一般函數格式

function 函數名(參數列表){// 函數體：return 返回值; //如果沒有具體的返回值，return 語句可以省略不寫。 }

函數細節：

只要使用函數名就是對函數的調用

函數中有一個數組arguments在對傳入的參數進行存儲

動態函數

動態函數：使用 js 中的內置對象 Function，用的不是很多。參數列表，函數體都是通過字符串動態指定的

var add = new Function("x,y","var sum; sum=x+y; return sum;"); // 參數列表，函數體

匿名函數

匿名函數：沒有名字的函數，函數的簡寫形式

var add3 = function (a,b){return a+b;}

6. 事件

常用事件

onblur="" // 失去焦點 onfocus="" // 獲取焦點 onchange="" // 域的內容被改變 onsubmit="" // 提交按鈕事件 onclick="" // 單擊事件 onmousemove="" // 進入某個元素移動 onmouseover="" // 鼠標懸停 onmousedown="" // 鼠標按下 onmouseup="" // 鼠標松開 onmouseout="" // 鼠標移出某個元素

表單的屬性

類型屬性

文本	readonly=“readonly” 只讀
復選框/單選框	checked 是否選中 value 屬性值
下拉列表	value：獲取值 options：所有的值 selectedIndex：返回被選擇的選項的索引號，選中第一個返回 0，第二個返回 1

事件簡單應用

復選框

function func_checkbox(){var myform = document.forms["myform"]; // 通過表單的name獲得表單form對象var loves = myform.loves; // 通過form對象獲得loves屬性,返回的是數組alter(loves.length); // 使用彈窗，輸出數組的長度 }

單選框

function func_radio(){var myform = document.forms["myform"]; // 通過表單的name獲得表單form對象var sex_value = myform.sex.value;// 通過form對象獲得被選中sex屬性值,返回的是字符串alter(sex_value); // 使用彈窗，輸出屬性值 }

7. JS 的 DOM 操作

document 是 html 文本對象

常用 DOM 操作

var img =document.getElementById("id 名"); // 根據 id 獲取 html 節點 var img =document.getElementsByName("屬性的name值"); // 根據 name 獲取 html 節點 var img =document.getElementsByTagName("標簽名"); // 根據標簽名獲取 html 節點 document.getElementById("id 名").value; // 獲得 id 標簽的值 document.getElementById("id 名").innerHTML; // 將內容寫入到 id 標簽中 document.write("hello"); // 將 hello 寫入到 html 頁面img.setAttribute("屬性名","屬性值");// 設置某個屬性的值 img.getAttribute("屬性名"); // 獲取某個屬性的值var p = document.createElement("p"); // 創建元素節點 var m = document.createTextNode("段落里面的內容"); // 創建文本內容 p.appendChild(m); // 把文本內容放到 p 標簽中 p.removeChild(p1); // 刪除 p 的子節點 document.body.appendChild(p); // 將 p 標簽放入文檔中

使用 HTML DOM 來分配事件

window.onload=function(){document.getElementById("username").onfocus=function(){alert("請輸入名字");} }

8. JS 的 BOM 操作

瀏覽器對應的對象就是 window 對象，內置對象直接使用

window 對象的屬性

document 文檔對象（每個載入瀏覽器的 html 文檔都會成為 document 對象）

document.write("hello"); // 將 hello 寫入到 html 頁面

location 地址對象（包含當前 url）

window.location.herf = "url";

history 歷史對象（包含客戶訪問過的 url 信息）

window.history.back(); // 退回到上一步

window 對象的方法

alert(); // 警告提示框 confirm(); // 選擇提示框 prompt(); // 輸入提示框 onload //加載就緒var ID = setInterval("函數名()",周期毫秒值); // 周期性 clearInterval(setInterval()返回的ID值); // 跳出周期性函數 setTimeout,clearTimeout

3. BOM

BOM(Browser Object Model)： 瀏覽器對象模型，用于操作瀏覽器

瀏覽器對應的對象就是 window 對象，可通過查閱 dhtml api 獲得

Window 對象常用方法：

alert(); // 彈窗 confirm(); // 彈窗確認 setTimeOut(); // 超時事件 setInterval(); clearInterval();

常用對象：

Location 對象

Document 對象

4. DOM

DOM(Document Object Model)：文檔對象模型，用來將標記型文檔封裝成對象，并將標記型文檔中的所有的內容(標簽，文本，屬性等)都封裝成對象。

封裝成對象的目的：是為了更加方便操作這些文檔以及文檔中的所有內容。因為對象的出現就可以有屬性和行為可被調用
常見的標記型文檔：html xml

1. DOM 解析

只要是標記型文檔，DOM 這種技術都可以對其進行操作

要操作標記型文檔必須對其進行解析

解析方式：

DOM 解析方式

將標記型文檔解析一棵 DOM 樹，并將樹中的內容都封裝成節點對象

優缺點：

優點：可以對樹中的節點進行任意操作，比如：增刪改查

缺點：要將整個標記型文檔加載進內存，意味著若標記型文檔的體積很大，較為浪費內存空間

SAX 解析方式

SAX：基于事件驅動的解析

SAX 是由一些民間組織定義的解析方式，并不是 w3c 標準，而 DOM 是 W3C 的標準

優缺點：獲取數據的速度很快，但是不能對標記進行增刪改。

2. DHTML

DHTML：動態的 HTML，不是一門語言，是多項技術綜合體的簡稱

DHTML中包含了 HTML，CSS，DOM，Javascript

HTML：負責提供標簽，對數據進行封裝，目的是便于對該標簽中的數據進行操作。

簡單說：用標簽封裝數據。

CSS：負責提供樣式屬性，對標簽中的數據進行樣式的定義。

簡單說：對數據進行樣式定義

DOM：負責將標簽型文檔及文檔中的所有內容進行解析，并封裝成對象，在對象中定義了更多的屬性和行為，便于對對象操作。

簡單說：將文檔和標簽以及其他內容變成對象。

JS：負責提供程序設計語言，對頁面中的對象進行邏輯操作。

簡單說：負責頁面的行為定義。就是頁面的動態效果。

所以 javascript 是動態效果的主力編程語言。

AJAX = DHTML + XMLhttpRequest

5. 正則表達式

常用的正則表達式:（/^是開始標記，$/是結束標記）

1. 驗證郵箱： /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/ 2. 驗證 IP 地址： /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g 注：g 只是正則選項，不屬于匹配內容 3. 驗證手機號碼： /^[1][3][0-9]{9}$/ 4. 驗證帶區號的電話號碼: /^[0][1-9]{2,3}-[0-9]{5,10}$/ 5. 驗證不帶區號的電話號碼: /^[1-9]{1}[0-9]{5,8}$/ 6. 驗證是否是整數: /^[-]{0,1}[0-9]{1,}$/ 7. 檢查輸入字符串是否是帶小數的數字格式,可以是負數: /^[-]{0,1}(\d+)[\.]+(\d+)$/ 8. 檢查輸入字符串是否只由英文字母和數字和下劃線組成: /^[0-9a-zA-Z\_]+$/ 9. 驗證年齡: /^[0-9]{1,3}$/ 10. 驗證數字: /^\d*\.?\d+$/

簡單應用：

4. JQuery

1. JQuery 簡介

JQuery 是一個 JavaScript 的函數庫

JQuery 函數庫包含哪些特性？

html 元素選取

html 元素操作

css 操作（獲取和修改）

html 事件操作（各種事件，在 JQuery 里面做了封裝）

html DOM 操作

ajax

2. JQuery 語法

JQuery 語法是為 html 元素選取編制，可以對元素執行某些操作

基礎語法：$：表示 JQuery

$(selector).action(); // selector 是選擇器，action 是動作

文檔就緒函數：

作用：為了防止文檔在未完全加載之前運行 JQuery 代碼

$(document).ready(function(){//JQuery 代碼 });簡寫形式： $((function(){//JQuery 代碼 });

JQuery 是為事件處理特別設計的函數庫，當你遵循以下原則時，你寫的代碼會更恰當且更易于維護：

把所有的 jquery 代碼置于事件處理函數中

把所有事件處理函數都置于文檔就緒函數中

把 jquery 代碼置于單獨的 js 文件中

3. JQuery 選擇器

在 HTML DOM 中允許對 DOM 元素組或者單個節點進行操作，而在 JQuery 中有很多選擇器

元素選擇器

$("p"); // 選擇<p>元素 $("p.intro"); // 選取所有 class="intro"的所有 p 元素 $("p#demo"); // 選取 id="demo"的第一個 p 元素

屬性選擇器

$("[href]"); // 選取所有帶有 href 屬性的元素 $("[href='#']"); // 選取所有帶有 href 屬性且 href 的值等于#的元素 $("[href!='#']"); // 選取所有帶有 href 屬性且 href 的值不等于#的元素 $("[href$='.jpg']"); // 選取所有 href 值以.jpg 結尾的元素

4. 事件/效果/CSS 函數

JQuery 事件

$(document).ready(function(){}); // 文檔的就緒事件 $(selector).click(function(){}); // 被選元素的單擊事件 $(selector).dblclick(function(){}); // 被選元素的雙擊事件 $(selector).focus(function(){}); // 被選元素的獲取焦點事件 $(selector).mouseover(function(){}); // 被選元素的鼠標懸停事件

JQuery 效果

$(selector).hide(); // 隱藏被選元素 $(selector).show(); // 顯示被選元素 $(selector).toggle(); // 切換（在隱藏與顯示之間）被選元素 $(selector).slideDown(); // 向下滑動（顯示）被選元素 $(selector).slideUp(); // 向上滑動（隱藏）被選元素 $(selector).slideToggle(); // 切換（在隱藏與顯示之間）被選元素 $(selector).fadeIn(); // 淡入被選元素 $(selector).fadeOut(); // 淡出被選元素 $(selector).fadeToggle(); // 切換

JQuery CSS 函數

$(selector).css(name,value); // 為所有匹配元素的給定 css 屬性設置值。 $(selector).css(properties); // 為所有匹配元素的一系列 css 屬性設置值。 $(selector).css(name); // 返回指定的 css 的值 $(selector).width([val]); // 獲取/設置所有匹配元素的寬度 $(selector).height([val]); // 獲取/設置所有匹配元素的高度

5. JQuery 的 DOM 操作

類（Class 選擇器的 css 樣式）

addClass(類名); // 向匹配的元素添加指定的類名 removeClass(類名); // 刪除匹配元素的類 toggleClass(類名); // 沒有就添加類，有就刪除類

屬性

attr(); // 設置/獲取屬性 removeAttr(要刪除的屬性名); // 刪除匹配元素某一個屬性

內容

append(); // 向匹配的元素內部添加內容 after(); // 向匹配的元素之后添加內容 before(); // 向匹配的元素之前添加內容

其他

remove(); // 刪除所有匹配的元素 html(); // 取得第一個匹配元素的 html 內容 text(); // 取得所有匹配元素的內容.結果是由所有匹配元素包含的文本內容組合起來的文本 val(); // 獲取匹配元素的當前值 empty(); // 刪除匹配的元素集合中所有的子節點。(包括文本節點)

5. Ajax 異步交互

1. Ajax 概述

Ajax：不用刷新整個頁面便可與服務器通訊的辦法

傳統 Web 與 Ajax 的差異

差異傳統 WebAjax

發送請求方式	提交表單方式發送請求	異步引擎對象發送請求
服務器響應	響應內容是一個完整頁面	響應內容只是需要的數據
客服端處理方式	需等待服務器響應完成，并重新加載整個頁面后，用戶才能進行操作	可以動態更新頁面中的部分內容，用戶可以不需等待請求的響應

Ajax 執行過程

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EGnpELXS-1648561406717)(link-picture\image-20220114145756983.png)]

2. XMLHttpRequest 對象

XMLHttpRequest：Ajax 的核心對象

該對象是對 JavaScript 的一個擴展，可使網頁與服務器進行通信，是創建 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成 XMLHttpRequest 對象的代名詞

XMLHttpRequest 對象

XMLHttpRequest 的常用方法

// method為GET/POST,url為相對URL或絕對URL。第3個是可選參數 open(“method”,”url”，...); // 建立對服務器的調用 send(content); // 向服務器發送請求 setRequestHeader("label", "value");// 設置請求頭的值，設置任何頭部之前必須先調用 open()

XMLHttpRequest 的常用屬性

onreadystatechange：事件處理函數

該事件處理函數由 ajax 框架觸發，而不是用戶在 Ajax 執行過程中觸發，

觸發后，服務器會通知客戶端當前的通信狀態，

這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是服務器對客戶端連接操作的一種方式。

每次 readyState 屬性的改變都會觸發 onreadystatechange 事件。

readyState：表示 Ajax 當前的請求狀態

它的值用數字代表：

readyState 值含義

0	代表未初始化，還沒有調用 open 方法
1	代表正在加載，open 方法已被調用，但 send 方法還沒有被調用
2	代表已加載完畢，send 已被調用，請求已經開始
3	代表交互中，服務器正在發送響應
4	代表響應完成，響應發送完畢

每次 readyState 值的改變，都會觸發 onreadystatechange 事件。如果把 onreadystatechange 事件處理函數賦給一個函數，那么每次 readyState 值的改變都會引發該函數的執行。readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4。

Status：狀態碼

服務器發送的每一個響應也都帶有頭部信息。三位數的狀態碼是服務器發送的響應中最重要的頭部信息，并且屬于超文本傳輸協議中的一部分。常用狀態碼及其含義：

狀態碼含義

200	一切正常(ok)
304	沒有被修改（服務器返回 304 狀態，表示源文件沒有被修改）
400	錯誤請求，如語法錯誤
403	禁止訪問(forbidden)
404	沒找到頁面(not found)
500	內部服務器出錯(internal service error)

在 XMLHttpRequest 對象中，服務器發送的狀態碼都保存在 status 屬性里。通過把這個值和 200 或 304 比較，可以確保服務器是否已發送了一個成功的響應。

statusText：返回當前請求的響應狀態

服務器的響應內容

responseText：從服務器返回的普通文本數據

responseXML：從服務器返回的是 XML。MIME 類型必須為 text/xml

它是一個 HTML，XML 或普通文本，這取決于服務器發送的響應內容。

注意：

只有Ajax 的請求狀態 readyState 值為 4 時, responseText/responseXML 屬性才可用，表明 Ajax 請求已經結束。

只有服務器發送了帶有正確頭部信息的數據(Status=200)時，responseText/responseXML 屬性才是可用的。

3. JavaScript 的 Ajax 異步交互

瀏覽器端

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript 的 Ajax 請求</title></head><body><label>用戶名:</label><input name="userName" id="userName" onblur="checkUserExist()"/><label id="NameMsg"></label><script type="text/javascript">var xmlHttpRequest; // 定義 XMLHttpRequest 對象function createXmlHttpRequest() { // 建立 XMLHttpRequest()對象if (window.ActiveXObject) { // 解決瀏覽器的兼容問題return new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}function checkUserExist(){ //發起 ajax 請求var userName = document.getElementById('userName');var NameMsg = document.getElementById('NameMsg');if(userName.value == null || userName.value == ''){NameMsg.innerHTML = '用戶名不能為空';userName.focus();return;}else{NameMsg.innerHTML = '';} // encodeURIComponent 是JQuery的方法var param = 'userName='+ encodeURIComponent(userName.value);var url = '${pageContext.request.contextPath}/servlet/UserServlet';// 1.創建 xmlhttprequest 對象xmlHttpRequest = createXmlHttpRequest(); // 2.設置回調函數xmlHttpRequest.onreadystatechange=callback;// 3.建立連接 openxmlHttpRequest.open('POST', url); // 4.設置請求頭xmlHttpRequest.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");// 5.發送請求 sendxmlHttpRequest.send(param); }//處理 ajax 請求的結果function callback(){ if(xmlHttpRequest.readyState == 4){ //完成if(xmlHttpRequest.status == 200){ //成功var result = xmlHttpRequest.responseText; //響應的返回值var NameMsg = document.getElementById('NameMsg');if("true" == result){ // 被占用NameMsg.innerHTML = '用戶名被占用';}else{NameMsg.innerHTML = '用戶名可用';}}}}</script></body> </html>

服務器端

獲取瀏覽器端發過來的參數并作出響應

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userName = request.getParameter("userName"); //參數是寫在 uri 中的if(userName != null){//uri 默認的編碼方式是 ISO8859-1userName = new String(userName.getBytes("ISO8859-1"),"UTF-8");}System.out.println(userName);response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();if("jacky".equals(userName) || "張三".equals(userName)){out.print("true");}else{out.print("false");}out.flush();out.close(); }

4. JQuery 的 Ajax 異步交互

傳統方式 JavaScript 實現 Ajax 的不足

方法、屬性、常用值較多，不易記憶

實現步驟繁瑣

還有瀏覽器兼容問題

1. JQuery 的 Ajax

語法：

$.ajax([參數]);

常用參數

屬性名說明

String url	發送請求的地址，默認為當前頁面地址
String type	請求方式：POST/POST，默認GET
String headers	請求頭
String accepts	通過請求頭發送給服務器，告訴服務器當前客戶端可接受的數據類型
String data或Object data	發送到服務器的數據
String contentType	發送信息至服務器的內容編碼類型，默認： “application/x-www-form-urlencoded; charset=UTF-8”
String dataType	將服務器端返回的數據轉換成指定類型，包括XML、HTML、Script、JSON、JSONP、text
Boolean async	是否異步，默認為true
Boolean global	是否觸發全局Ajax事件，默認為true
Number timeout	設置請求超時時間
function beforeSend(XMLHttpRequest xhr)	發送請求前的回調函數，參數可選
function complete(XMLHttpRequest xhr,String st)	請求完成后的回調函數，參數可選
function success(Object result,String st)	請求成功后的回調函數，參數可選
function error(XMLHttpRequest xhr,String st,Exception e)	請求失敗時的回調函數，參數可選

服務器端返回數據后轉換類型（contentType）：

轉換后類型含義

xml	將服務器端返回的內容轉換成 xml 格式
text	將服務器端返回的內容轉換成普通文本格式
html	將服務器端返回的內容轉換成普通文本格式，在插入 DOM 中時，如果包含 JavaScript 標簽，則會嘗試去執行
script	嘗試將返回值當作 JavaScript 去執行，然后再將服務器端返回的內容轉換成普通文本格式
json	將服務器端返回的內容轉換成相應的 JavaScript 對象
jsonp	JSONP 格式使用 JSONP 形式調用函數時，如 “myurl?callback=?” ，jQuery 將自動替換 ? 為正確的函數名，以執行回調函數

常用方法

$.ajax(); $.get(); $.post(); $.getJSON(); load();

ajax：get、post都可以用 ajax 代替

$.ajax(url:url,type:"get", //1.9.0之后用methoddata:data,dataType:"txt",success:function(result){},error:function(){} );

load：加載函數可用 get 代替

$("#nameDiv").load(url,data);等價于 $.get(url,data,function(result){$("#nameDiv").html(result); }) 等價于 $.ajax(url:url,type:"get",data:data,dataType:"txt",success:function(result){// 處理服務器返回來的數據} );

getJSON：可用 ajax 代替

$.getJSON(url,data,success(result){// 處理服務器返回來的數據 });等價于 $.ajax(url:url,type:"get",data:data,dataType:"json",success:function(result){// 處理服務器返回來的數據} );

5. JSON 的 Ajax 異步交互

客服端的 JSON 的使用

客服端使用 JQuery 的 getJSON() 方法發起請求

$.getJSON(url,data,success(result){// 處理服務器返回來的數據 });

服務端的 JSON 的使用

服務端使用 json-lib 類庫，將要返回的數據轉換成 JSON，或者反向轉換。

json-lib：是一個 java 類庫，提供將 Java 對象(包括 bean,map,collection,array,XML等)轉換成 JSON，或者反向轉換的功能。

使用 json-lib ，執行環境需要其他類庫支持

ajax 代替`

~~~js$.ajax(url:url,type:"get", //1.9.0之后用methoddata:data,dataType:"txt",success:function(result){},error:function(){});~~~

load：加載函數可用 get 代替

getJSON：可用 ajax 代替

5. JSON 的 Ajax 異步交互

客服端的 JSON 的使用

客服端使用 JQuery 的 getJSON() 方法發起請求

$.getJSON(url,data,success(result){// 處理服務器返回來的數據 });

服務端的 JSON 的使用

服務端使用 json-lib 類庫，將要返回的數據轉換成 JSON，或者反向轉換。

json-lib：是一個 java 類庫，提供將 Java 對象(包括 bean,map,collection,array,XML等)轉換成 JSON，或者反向轉換的功能。

使用 json-lib ，執行環境需要其他類庫支持

總結

以上是生活随笔為你收集整理的前端基础之Html、CSS、JavaScript、JQuery、Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：下载安装SQL server2008的步
下一篇： javafx-更改webview中的ht