javascript
前端基础之Html、CSS、JavaScript、JQuery、Ajax
前端
1.HTML
XML：可擴(kuò)展標(biāo)記語(yǔ)言
XHTML：可擴(kuò)展的超文本標(biāo)記語(yǔ)言
1. HTML 概述
HTML：超文本標(biāo)記語(yǔ)言
網(wǎng)頁(yè)組成：文字 + 圖片 + 表格 + 表單 + 鏈接 + 視頻 + 音頻
網(wǎng)頁(yè)文件的格式：htm ，html
網(wǎng)頁(yè)的注釋：<!-- 注釋的內(nèi)容 -->
html 結(jié)構(gòu)
<!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>頭部標(biāo)題</title></head><body>網(wǎng)頁(yè)內(nèi)容所在位置</body> </html>2. 標(biāo)記
標(biāo)記的語(yǔ)法
<起始標(biāo)簽 屬性名="值" ......> 被標(biāo)記的內(nèi)容</結(jié)束標(biāo)簽>注意：
標(biāo)簽分類：
如果要給服務(wù)端提交數(shù)據(jù)，表單中的組件必須有 name 和 value 屬性。用于給服務(wù)端獲取數(shù)據(jù)方便
特殊字符
空格 > > < < " " & & © 版權(quán)? ® 注冊(cè)?標(biāo)記
常用標(biāo)記
標(biāo)題：<hn="1...6" align="left|center|right" ></hn> 段落：<p align="left|center|right"></p> 字體：<font size="1-7" color="顏色" face="字體風(fēng)格[黑體]"></font><i>斜體</i> <em>斜體</em><b>加粗</b> <strong>加粗</strong><u>下劃線</u> <ins>下劃線</ins><s>刪除線(貫穿線)</s><del>刪除線</del><sub>下標(biāo)標(biāo)識(shí)</sub><sup>上部標(biāo)識(shí)</sup>換行：<br/> 居中：<center></center> 元信息：<meta /> 預(yù)定義：<pre></pre> 地址：<address></address> 音頻：<embed src=""></embed> 水平線：<hr size="粗細(xì)" color="顏色" width="長(zhǎng)度" align="center|left|right" noshade(3D 凹凸效果)/> 滾動(dòng)：<marquee direction="left|right|down|up" scrollamount="滾動(dòng)速度"behavior="scroll(重復(fù))|slide(不重復(fù))|alternate(來(lái)回滾動(dòng))" loop="滾動(dòng)次數(shù)-1" scrolldelay="兩次之間的有延遲 值越大越明顯的停頓"> </marquee> 頁(yè)面排版：<div> </div>圖片標(biāo)記：img
<img src="路徑" width="長(zhǎng)度" height="高度 px" alt="加載失敗" title="標(biāo)題"/>鏈接標(biāo)記：a
文本鏈接
<a href="路徑" target="_self|_blank(新窗口打開(kāi))" title="提示">百度</a>圖片鏈接：可做圖片按鈕
<a href="鏈接路徑" title="提示"><img src="圖片路徑" alt="圖片加載失敗" title="提示"/></a>錨連接：一般用于當(dāng)前頁(yè)面位置的跳轉(zhuǎn)
<a name="錨名字" href="">首頁(yè)</a> <a href="#錨名字">跳轉(zhuǎn)到首頁(yè)</a>表格
完整版
<table><caption>標(biāo)題</caption><thead><tr><th></th></tr><thead><tbody><tr><td></td></tr></tbody><tfoot><tr><td></td></tr></tfoot> </table>屬性
table 表格
border: 邊框粗細(xì) bordercolor:邊框顏色 width: 寬度 height: 高度 bgcolor: 背景顏色 background: 背景圖片 cellspacing:單元格與單元格之間的距離 cellpadding:單元格與數(shù)據(jù)之間的距離tr 行
align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下 垂直位置 height: width: bgcolor: background:背景圖片td|th 列 （th 列屬于首列，自動(dòng)居中加粗）
align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下 垂直位置 height: width: bgcolor: background: 背景圖片 rowspan: 合并行 colspan: 合并列 # 合并行列：數(shù)格子,數(shù)過(guò)的格子不能再數(shù)列表
有序列表
<ol type="1|A|a|I|i" start="阿拉伯?dāng)?shù)字從哪里開(kāi)始"><li type="1|A|a|I|i"></li> </ol>無(wú)序列表
<ul type="disc(實(shí)心圓)|circle(空心圓)|square(正方形)"><li></li> </ul>自定義列表
<dl><dt> 小標(biāo)題 </dt><dd> 內(nèi)容 </dd> </dl>表單 form、input、select、textarea
表單：是頁(yè)面提供客戶端輸入信息的元素的統(tǒng)稱，包括表單和表單元素
如果要給服務(wù)端提交數(shù)據(jù)，表單中的組件必須有 name 和 value 屬性，用于給服務(wù)端獲取數(shù)據(jù)方便
<form action="url 提交地址" method="get|post" name="formname"><fieldset><legend>基本信息</legend>文本框:<input type="text" name="" size="" maxlength="" value="默認(rèn)值"/>密碼框:<input type="password" name="" size="" maxlength="" value="默認(rèn)值"/>單選框:<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="顯示個(gè)數(shù)"><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>頁(yè)面框架
框架一般用于寫(xiě)后臺(tái)頁(yè)面的時(shí)候用
定義框架
<frameset rows="20%,*"> 縱向 <frame src="頁(yè)面路徑" noresize="noresize" frameborder="0" scrolling=""/><frame src="頁(yè)面路徑" name="right"/> </frameset> <frameset cols="30%,60%,*"> 橫向 </frameset> <noframes><body>瀏覽器不支持</body> </noframes>left.html: <a href="right2.html" target="right">美女</a> right是右側(cè)框架的名稱導(dǎo)入框架
<frame src="頁(yè)面路徑" frameborder="0" scrolling="auto 可需|yes|no"/> 或 <iframe src="頁(yè)面路徑" frameborder="0" scrolling="" width="" height=""></iframe>3. GET、POST
GET 請(qǐng)求和 POST 請(qǐng)求的區(qū)別：
在客服端的區(qū)別
| 是否顯示 | 提交的信息都顯示在地址欄中 | 提交的信息不顯示地址欄中 |
| 封裝位置 | 將信息封裝到了請(qǐng)求消息的請(qǐng)求行中 | 將信息封裝到了請(qǐng)求體中 |
| 安全性 | 對(duì)于敏感的數(shù)據(jù)信息不安全 | 對(duì)于敏感信息安全 |
| 數(shù)據(jù)體積 | 對(duì)于大數(shù)據(jù)不行，因?yàn)榈刂窓诖鎯?chǔ)體積有限，大小不超過(guò)4KB | 可以提交大體積數(shù)據(jù) |
| 速度 | 相對(duì)較快 | 相對(duì)較慢 |
在服務(wù)端的區(qū)別（亂碼處理方式）
如果提交中文到 tomcat 服務(wù)器會(huì)出現(xiàn)亂碼，服務(wù)器默認(rèn)會(huì)用 iso-8859-1 進(jìn)行解碼，解決方法：
對(duì) get 提交和 post 提交都有效
通過(guò) iso-8859-1 進(jìn)行編碼，再用指定的中文碼表解碼即可
用 URLDecoder.decode(user,“utf-8”)
修改 tomcat 的配置文件 server.xml：加上 URIEncoding="UTF-8"
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>對(duì)于 post 提交，還有另一種解決辦法，就是直接使用服務(wù)端一個(gè) request 對(duì)象
request 對(duì)象的 setCharacterEncoding 方法直接設(shè)置指定的中文碼表就可以將中文數(shù)據(jù)解析出來(lái)。這個(gè)方法只對(duì)請(qǐng)求體中的數(shù)據(jù)進(jìn)行解碼
// 在獲取數(shù)據(jù)之前，設(shè)置請(qǐng)求的字符編碼集 request.setCharacterEncoding("UTF-8");和服務(wù)端交互的三種方式
| 地址欄輸入 url 地址 | get |
| 超鏈接 | get |
| 表單 | get 和 post |
數(shù)據(jù)校驗(yàn)
| 是否校驗(yàn) | 如果在客戶端進(jìn)行增強(qiáng)型的校驗(yàn) (只要有一個(gè)組件內(nèi)容是錯(cuò)誤，是無(wú)法繼續(xù)提交的, 只有全對(duì)才可以提交) | 服務(wù)端收到數(shù)據(jù)后，也還需要校驗(yàn) |
| 校驗(yàn)?zāi)康?/td> | 提高用戶的上網(wǎng)體驗(yàn)效果，減輕服務(wù)器端的壓力 | 為了安全性 |
2. CSS
CSS：層疊樣式表。 HTML 定義網(wǎng)頁(yè)的內(nèi)容，CSS 定義內(nèi)容的樣式
CSS 的注釋：/* 注釋內(nèi)容 */
1. 樣式
行內(nèi)樣式 style
<p style="[屬性樣式] font-size:18px;background-image:url(.....);" ></p>內(nèi)嵌樣式
<head><title></title><style type="text/css">選擇器{屬性樣式}</style> </head>外聯(lián)樣式 link
<head><title></title><link href="樣式路徑" rel="stylesheet" type="text/css"/> </head>2. 選擇器
優(yōu)先級(jí)：id 選擇器 > 類選擇器 > 標(biāo)簽選擇器
id 選擇器 #
#name{ background-color:red; width:500px; }class 選擇器 .
.name1{ 樣式屬性 }標(biāo)簽選擇器
h1{ font-size:36px;color:red;} /*頁(yè)面所有的 h1 標(biāo)記里的字體大小為 36px,顏色為紅色*/組合選擇器
h1 a li{ font-size:36px;color:red; } /*所有h1下的a下的li里的字體大小為36px,顏色為紅色*/通配符選擇器
*{樣式屬性} /* 整個(gè)頁(yè)面所有的內(nèi)容都具有的樣式 */3. 布局
漂浮 float
Float:none|left|right 浮動(dòng) Clear:none|left|right|both 清除浮動(dòng)定位 position
定位的原則：先相對(duì)定位，再絕對(duì)定位
position:relative; 相對(duì)定位，不脫離文檔流 position:absolute; 絕對(duì)定位，脫離文檔流 具體位置設(shè)置：top,left,right,bottom z-index:數(shù)值越大，越在上層4. 樣式屬性
標(biāo)簽轉(zhuǎn)換
display:block; 行 轉(zhuǎn) 塊 display:inline; 塊 轉(zhuǎn) 行 display:none; 隱藏尺寸、溢出、鼠標(biāo)變手型
width:100px;固定寬 min-width:100px;最小寬度 max-width:100px;最大寬度cursor:pointer;鼠標(biāo)變手型 overflow:hidden/visible/scroll/auto;隱藏/顯示/始終出現(xiàn)滾動(dòng)條/需要時(shí)才出現(xiàn)滾動(dòng)條字體/文本
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;無(wú)修飾/下劃線/上劃線/貫穿線 Text-transform:uppercase/lowercase/capitalize; 大寫(xiě)/小寫(xiě)/首字母大寫(xiě) Text-indent:文本縮進(jìn) Text-align:left/right/center背景 transparent：透明
Background-color:背景顏色 透明 transparent Background-image:背景圖片 Background-repeat:repeat|no-repeat|repeat-x|repeat-y 重復(fù) Background-position:背景位置邊框
樣式：border-style:solid; 顏色：border-color:red; 寬度：border-width:2px; 簡(jiǎn)寫(xiě)：border:2px solid red;border-top-width:3px; border-top-style:dashed; border-top-color:#000;border-width:2px; 一值(四邊) 兩值(上下 左右) 三個(gè)值(上 左右 下) 四個(gè)值(上 右 下 左)邊距 Margin、Padding
內(nèi)邊距:當(dāng)前標(biāo)記和當(dāng)前標(biāo)記里的內(nèi)容區(qū)域之間的距離Padding 兩值(上下 左右) 三個(gè)值(上 左右 下) 四個(gè)值(上 右 下 左)Padding-top:Padding-left:Padding-right:Paddding-bottom: 外邊距:當(dāng)前標(biāo)記與該標(biāo)記之外的內(nèi)容的區(qū)域之間的距離Margin列表
list-style-image; list-style-position; list-style-type：disc/circle/square/decimal/none; list-style：none;取消列表樣式5. 偽類
a:link{當(dāng)連接被訪問(wèn)之前的樣式} a:visited{當(dāng)連接被訪問(wèn)之后的樣式} a:hover{當(dāng)鼠標(biāo)懸浮在連接之上時(shí)的樣式} a:active{當(dāng)連接點(diǎn)擊與釋放的瞬間的樣式} a:focus{獲得焦點(diǎn)}3. JavaScript
1. JavaScript 概述
JavaScript 是基于對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言，主要應(yīng)用在客戶端
javascript 是由上到下解析的，瀏覽器會(huì)按照編寫(xiě)的順序執(zhí)行每條語(yǔ)句
JS注釋：// 單行注釋 、/**/ 多行注釋
特點(diǎn)：
JavaScript 與 Java 不同
JavaScript 可以做什么？
Js 和 HTML 相結(jié)合的方式
將 javascript 代碼封裝到<script>標(biāo)簽中
<head><title></title><script type="text/javascript">// js代碼</script> </head> 或放在<body><script></script></body>將 javascript 代碼封裝到 js 文件中，并通過(guò)<script>中的 src 屬性進(jìn)行導(dǎo)入
注意：如果<script>標(biāo)簽中使用 src 屬性，那么該標(biāo)簽中封裝的 javascript 代碼不會(huì)被執(zhí)行，
所以通常導(dǎo)入 js 文件都是用單獨(dú)<script>來(lái)完成。格式：
2. JavaScript 語(yǔ)法
1. 變量
變量的命名規(guī)則：
變量（數(shù)據(jù)類型）：Number、Boolean、String、Object、Array、Object、null、undefined
全局變量：在<script></script>標(biāo)簽中直接聲明的變量
局部變量：在方法中聲明的變量
javascript 擁有動(dòng)態(tài)類型，即是相同的變量可用作不同的類型（弱數(shù)據(jù)類型）,由等號(hào)右邊的值來(lái)決定變量的數(shù)據(jù)類型。
例如: var x; // 此時(shí) x 是 Undefined 數(shù)據(jù)類型。 var x = 6; // x 是數(shù)字類型 var x = "bochy"; // x 是 String 類型注意：
2. 運(yùn)算符
| 算術(shù)運(yùn)算符 | + - * / % ++ – |
| 賦值運(yùn)算符 | = += -= *= /= %= |
| 比較運(yùn)算符 | > < >= <= != == ===(全等) |
| 邏輯運(yùn)算符 | &&(與) ||(或) ! (非) |
| 位運(yùn)算符 | & (與) |(或) ^(異或) >>(右移) <<(左移) >>>(無(wú)符號(hào)右移) |
| 三元運(yùn)算符 | ? : |
3. 語(yǔ)句
順序結(jié)構(gòu)
判斷結(jié)構(gòu)：if-else
選擇結(jié)構(gòu)：switch
循環(huán)結(jié)構(gòu)：for、while、do_while、for…in(用于數(shù)組或者對(duì)象)
for(var 新變量 in 循環(huán)的變量){ //要執(zhí)行的循環(huán)語(yǔ)句 }特有語(yǔ)句：with
異常語(yǔ)句：try/catch、throw
try{if(條件) throw "可能出現(xiàn)異常的代碼塊的具體異常"; }catch(e){ //處理異常的代碼 }4. 對(duì)象
常用對(duì)象有：String、Array、Date、Math、Number、Global、自定義對(duì)象
Number 對(duì)象：javascript 只有一種數(shù)字類型，數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶
定義方法
var a1 = 12; var a2 = 12.2; var a3 = new Number(12);Boolean 對(duì)象
定義方法
var b1 = new Boolean(); // 默認(rèn)為false var b2 = new Boolean(true); //true var b3 = true;String 對(duì)象
定義方法
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(); // 轉(zhuǎn)成大寫(xiě) toLowerCase(); // 轉(zhuǎn)成小寫(xiě) charAt(index); // 下標(biāo)處的字符 indexOf("o"); // 首次出現(xiàn)的下標(biāo) substr(start,length); // 從start處截取length長(zhǎng)度的字串 substring(start,end); // 截取字串 [start,end) split("."); // 分割 valueOf(var) // 轉(zhuǎn)為字符串對(duì)象 test("正則表達(dá)式字符串"); // 使用正則表達(dá)式進(jìn)行校驗(yàn)Array 對(duì)象
特點(diǎn)：1.長(zhǎng)度是可變的 2.元素類型是任意的，建議存儲(chǔ)同一類型的元素，操作起來(lái)比較方便
定義方法
var arr1 = new Array(); // 相當(dāng)于 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(); // 刪除最后一個(gè) shift(); // 刪除第一個(gè) push(); // 添加 splice(); // 刪除并替換 unshift(); // 插入第一個(gè)Object 對(duì)象
定義方法
var per1 = {"name":"李四","age":22}; var per2 = new Object(); per2.name = "張三"; //設(shè)置對(duì)象的屬性和值 per2.age = 20;Date 對(duì)象
var d = new Date(); var year = d.getFullYear(); // 獲取年 var month = d.getMonth()+1; // 獲取月份 var date = d.getDate(); // 獲取日期 var hour = d.getHours(); // 獲取小時(shí) var minute = d.getMinutes(); // 獲取分鐘 var second = d.getSeconds(); // 獲取秒數(shù) var day = d.getDay(); // 獲取星期值 var ms = d.getMilliseconds(); // 獲取毫秒Math 對(duì)象
Math 對(duì)象不能用 new 關(guān)鍵字創(chuàng)建，如果試圖這樣做會(huì)給出錯(cuò)誤。
該對(duì)象在裝載腳本引擎時(shí)，由該引擎創(chuàng)建。其方法和屬性在腳本中總是可用
ceil(); // 返回大于等于其數(shù)字參數(shù)的最小整數(shù)。 floor(); // 返回小于等于其數(shù)值參數(shù)的最大整數(shù)。 max();min(); // 求最大值，最小值 random(); // 隨機(jī)數(shù), [0,1)Global 對(duì)象
方法
isNaN(); // 是否非法自定義對(duì)象
5. 函數(shù)
分類：一般函數(shù)、匿名函數(shù)、動(dòng)態(tài)函數(shù)
函數(shù)：就是一個(gè)功能的封裝體
一般函數(shù)格式
function 函數(shù)名(參數(shù)列表){// 函數(shù)體：return 返回值; //如果沒(méi)有具體的返回值，return 語(yǔ)句可以省略不寫(xiě)。 }函數(shù)細(xì)節(jié)：
動(dòng)態(tài)函數(shù)
動(dòng)態(tài)函數(shù)：使用 js 中的內(nèi)置對(duì)象 Function，用的不是很多。參數(shù)列表，函數(shù)體都是通過(guò)字符串動(dòng)態(tài)指定的
var add = new Function("x,y","var sum; sum=x+y; return sum;"); // 參數(shù)列表，函數(shù)體匿名函數(shù)
匿名函數(shù)：沒(méi)有名字的函數(shù)，函數(shù)的簡(jiǎn)寫(xiě)形式
var add3 = function (a,b){return a+b;}6. 事件
常用事件
onblur="" // 失去焦點(diǎn) onfocus="" // 獲取焦點(diǎn) onchange="" // 域的內(nèi)容被改變 onsubmit="" // 提交按鈕事件 onclick="" // 單擊事件 onmousemove="" // 進(jìn)入某個(gè)元素移動(dòng) onmouseover="" // 鼠標(biāo)懸停 onmousedown="" // 鼠標(biāo)按下 onmouseup="" // 鼠標(biāo)松開(kāi) onmouseout="" // 鼠標(biāo)移出某個(gè)元素表單的屬性
| 文本 | readonly=“readonly” 只讀 |
| 復(fù)選框/單選框 | checked 是否選中 value 屬性值 |
| 下拉列表 | value：獲取值 options：所有的值 selectedIndex：返回被選擇的選項(xiàng)的索引號(hào)，選中第一個(gè)返回 0，第二個(gè)返回 1 |
事件簡(jiǎn)單應(yīng)用
復(fù)選框
function func_checkbox(){var myform = document.forms["myform"]; // 通過(guò)表單的name獲得表單form對(duì)象var loves = myform.loves; // 通過(guò)form對(duì)象獲得loves屬性,返回的是數(shù)組alter(loves.length); // 使用彈窗，輸出數(shù)組的長(zhǎng)度 }單選框
function func_radio(){var myform = document.forms["myform"]; // 通過(guò)表單的name獲得表單form對(duì)象var sex_value = myform.sex.value;// 通過(guò)form對(duì)象獲得被選中sex屬性值,返回的是字符串alter(sex_value); // 使用彈窗，輸出屬性值 }7. JS 的 DOM 操作
document 是 html 文本對(duì)象
常用 DOM 操作
var img =document.getElementById("id 名"); // 根據(jù) id 獲取 html 節(jié)點(diǎn) var img =document.getElementsByName("屬性的name值"); // 根據(jù) name 獲取 html 節(jié)點(diǎn) var img =document.getElementsByTagName("標(biāo)簽名"); // 根據(jù)標(biāo)簽名獲取 html 節(jié)點(diǎn) document.getElementById("id 名").value; // 獲得 id 標(biāo)簽的值 document.getElementById("id 名").innerHTML; // 將內(nèi)容寫(xiě)入到 id 標(biāo)簽中 document.write("hello"); // 將 hello 寫(xiě)入到 html 頁(yè)面img.setAttribute("屬性名","屬性值");// 設(shè)置某個(gè)屬性的值 img.getAttribute("屬性名"); // 獲取某個(gè)屬性的值var p = document.createElement("p"); // 創(chuàng)建元素節(jié)點(diǎn) var m = document.createTextNode("段落里面的內(nèi)容"); // 創(chuàng)建文本內(nèi)容 p.appendChild(m); // 把文本內(nèi)容放到 p 標(biāo)簽中 p.removeChild(p1); // 刪除 p 的子節(jié)點(diǎn) document.body.appendChild(p); // 將 p 標(biāo)簽放入文檔中使用 HTML DOM 來(lái)分配事件
window.onload=function(){document.getElementById("username").onfocus=function(){alert("請(qǐng)輸入名字");} }8. JS 的 BOM 操作
瀏覽器對(duì)應(yīng)的對(duì)象就是 window 對(duì)象，內(nèi)置對(duì)象直接使用
window 對(duì)象的屬性
document 文檔對(duì)象（每個(gè)載入瀏覽器的 html 文檔都會(huì)成為 document 對(duì)象）
document.write("hello"); // 將 hello 寫(xiě)入到 html 頁(yè)面location 地址對(duì)象（包含當(dāng)前 url）
window.location.herf = "url";history 歷史對(duì)象（包含客戶訪問(wèn)過(guò)的 url 信息）
window.history.back(); // 退回到上一步window 對(duì)象的方法
alert(); // 警告提示框 confirm(); // 選擇提示框 prompt(); // 輸入提示框 onload //加載就緒var ID = setInterval("函數(shù)名()",周期毫秒值); // 周期性 clearInterval(setInterval()返回的ID值); // 跳出周期性函數(shù) setTimeout,clearTimeout3. BOM
BOM(Browser Object Model)： 瀏覽器對(duì)象模型，用于操作瀏覽器
瀏覽器對(duì)應(yīng)的對(duì)象就是 window 對(duì)象，可通過(guò)查閱 dhtml api 獲得
Window 對(duì)象常用方法：
alert(); // 彈窗 confirm(); // 彈窗確認(rèn) setTimeOut(); // 超時(shí)事件 setInterval(); clearInterval();常用對(duì)象：
4. DOM
DOM(Document Object Model)：文檔對(duì)象模型，用來(lái)將標(biāo)記型文檔封裝成對(duì)象，并將標(biāo)記型文檔中的所有的內(nèi)容(標(biāo)簽，文本，屬性等)都封裝成對(duì)象。
- 封裝成對(duì)象的目的：是為了更加方便操作這些文檔以及文檔中的所有內(nèi)容。因?yàn)閷?duì)象的出現(xiàn)就可以有屬性和行為可被調(diào)用
- 常見(jiàn)的標(biāo)記型文檔：html xml
1. DOM 解析
只要是標(biāo)記型文檔，DOM 這種技術(shù)都可以對(duì)其進(jìn)行操作
要操作標(biāo)記型文檔必須對(duì)其進(jìn)行解析
解析方式：
DOM 解析方式
將標(biāo)記型文檔解析一棵 DOM 樹(shù)，并將樹(shù)中的內(nèi)容都封裝成節(jié)點(diǎn)對(duì)象
優(yōu)缺點(diǎn)：
SAX 解析方式
SAX：基于事件驅(qū)動(dòng)的解析
SAX 是由一些民間組織定義的解析方式，并不是 w3c 標(biāo)準(zhǔn)，而 DOM 是 W3C 的 標(biāo)準(zhǔn)
優(yōu)缺點(diǎn)：獲取數(shù)據(jù)的速度很快，但是不能對(duì)標(biāo)記進(jìn)行增刪改。
2. DHTML
DHTML：動(dòng)態(tài)的 HTML，不是一門(mén)語(yǔ)言，是多項(xiàng)技術(shù)綜合體的簡(jiǎn)稱
DHTML中包含了 HTML，CSS，DOM，Javascript
HTML：負(fù)責(zé)提供標(biāo)簽，對(duì)數(shù)據(jù)進(jìn)行封裝，目的是便于對(duì)該標(biāo)簽中的數(shù)據(jù)進(jìn)行操作。
簡(jiǎn)單說(shuō)：用標(biāo)簽封裝數(shù)據(jù)。
CSS：負(fù)責(zé)提供樣式屬性，對(duì)標(biāo)簽中的數(shù)據(jù)進(jìn)行樣式的定義。
簡(jiǎn)單說(shuō)：對(duì)數(shù)據(jù)進(jìn)行樣式定義
DOM：負(fù)責(zé)將標(biāo)簽型文檔及文檔中的所有內(nèi)容進(jìn)行解析，并封裝成對(duì)象，在對(duì)象中定義了更多的屬性和行為，便于對(duì)對(duì)象操作。
簡(jiǎn)單說(shuō)：將文檔和標(biāo)簽以及其他內(nèi)容變成對(duì)象。
JS：負(fù)責(zé)提供程序設(shè)計(jì)語(yǔ)言，對(duì)頁(yè)面中的對(duì)象進(jìn)行邏輯操作。
簡(jiǎn)單說(shuō)：負(fù)責(zé)頁(yè)面的行為定義。就是頁(yè)面的動(dòng)態(tài)效果。
所以 javascript 是動(dòng)態(tài)效果的主力編程語(yǔ)言。
AJAX = DHTML + XMLhttpRequest
5. 正則表達(dá)式
常用的正則表達(dá)式:（/^是開(kāi)始標(biāo)記，$/是結(jié)束標(biāo)記）
1. 驗(yàn)證郵箱： /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/ 2. 驗(yàn)證 IP 地址： /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g 注：g 只是正則選項(xiàng)，不屬于匹配內(nèi)容 3. 驗(yàn)證手機(jī)號(hào)碼： /^[1][3][0-9]{9}$/ 4. 驗(yàn)證帶區(qū)號(hào)的電話號(hào)碼: /^[0][1-9]{2,3}-[0-9]{5,10}$/ 5. 驗(yàn)證不帶區(qū)號(hào)的電話號(hào)碼: /^[1-9]{1}[0-9]{5,8}$/ 6. 驗(yàn)證是否是整數(shù): /^[-]{0,1}[0-9]{1,}$/ 7. 檢查輸入字符串是否是帶小數(shù)的數(shù)字格式,可以是負(fù)數(shù): /^[-]{0,1}(\d+)[\.]+(\d+)$/ 8. 檢查輸入字符串是否只由英文字母和數(shù)字和下劃線組成: /^[0-9a-zA-Z\_]+$/ 9. 驗(yàn)證年齡: /^[0-9]{1,3}$/ 10. 驗(yàn)證數(shù)字: /^\d*\.?\d+$/簡(jiǎn)單應(yīng)用：
function is_age(){var ageRegExp = /^[0-9]{1,3}$/; // 注意：不要加""var age = document.getElementById("age"),value; // 獲取表單中的值if(ageRegExp.test(age)){document.getElementById("age_info").innerHTML = "年齡正確";}else{document.getElementById("age_info").innerHTML = "請(qǐng)輸入1-3位的數(shù)字";} }4. JQuery
1. JQuery 簡(jiǎn)介
JQuery 是一個(gè) JavaScript 的函數(shù)庫(kù)
JQuery 函數(shù)庫(kù)包含哪些特性？
2. JQuery 語(yǔ)法
JQuery 語(yǔ)法是為 html 元素選取編制，可以對(duì)元素執(zhí)行某些操作
基礎(chǔ)語(yǔ)法：$：表示 JQuery
$(selector).action(); // selector 是選擇器，action 是動(dòng)作文檔就緒函數(shù)：
作用：為了防止文檔在未完全加載之前運(yùn)行 JQuery 代碼
$(document).ready(function(){//JQuery 代碼 });簡(jiǎn)寫(xiě)形式： $((function(){//JQuery 代碼 });JQuery 是為事件處理特別設(shè)計(jì)的函數(shù)庫(kù)，當(dāng)你遵循以下原則時(shí)，你寫(xiě)的代碼會(huì)更恰當(dāng)且更易于維護(hù)：
3. JQuery 選擇器
在 HTML DOM 中允許對(duì) DOM 元素組或者單個(gè)節(jié)點(diǎn)進(jìn)行操作，而在 JQuery 中有很多選擇器
元素選擇器
$("p"); // 選擇<p>元素 $("p.intro"); // 選取所有 class="intro"的所有 p 元素 $("p#demo"); // 選取 id="demo"的第一個(gè) p 元素屬性選擇器
4. 事件/效果/CSS 函數(shù)
JQuery 事件
$(document).ready(function(){}); // 文檔的就緒事件 $(selector).click(function(){}); // 被選元素的單擊事件 $(selector).dblclick(function(){}); // 被選元素的雙擊事件 $(selector).focus(function(){}); // 被選元素的獲取焦點(diǎn)事件 $(selector).mouseover(function(){}); // 被選元素的鼠標(biāo)懸停事件JQuery 效果
$(selector).hide(); // 隱藏被選元素 $(selector).show(); // 顯示被選元素 $(selector).toggle(); // 切換（在隱藏與顯示之間）被選元素 $(selector).slideDown(); // 向下滑動(dòng)（顯示）被選元素 $(selector).slideUp(); // 向上滑動(dòng)（隱藏）被選元素 $(selector).slideToggle(); // 切換（在隱藏與顯示之間）被選元素 $(selector).fadeIn(); // 淡入被選元素 $(selector).fadeOut(); // 淡出被選元素 $(selector).fadeToggle(); // 切換JQuery CSS 函數(shù)
$(selector).css(name,value); // 為所有匹配元素的給定 css 屬性設(shè)置值。 $(selector).css(properties); // 為所有匹配元素的一系列 css 屬性設(shè)置值。 $(selector).css(name); // 返回指定的 css 的值 $(selector).width([val]); // 獲取/設(shè)置所有匹配元素的寬度 $(selector).height([val]); // 獲取/設(shè)置所有匹配元素的高度5. JQuery 的 DOM 操作
類（Class 選擇器的 css 樣式）
addClass(類名); // 向匹配的元素添加指定的類名 removeClass(類名); // 刪除匹配元素的類 toggleClass(類名); // 沒(méi)有就添加類，有就刪除類屬性
attr(); // 設(shè)置/獲取屬性 removeAttr(要?jiǎng)h除的屬性名); // 刪除匹配元素某一個(gè)屬性內(nèi)容
append(); // 向匹配的元素內(nèi)部添加內(nèi)容 after(); // 向匹配的元素之后添加內(nèi)容 before(); // 向匹配的元素之前添加內(nèi)容其他
remove(); // 刪除所有匹配的元素 html(); // 取得第一個(gè)匹配元素的 html 內(nèi)容 text(); // 取得所有匹配元素的內(nèi)容.結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本 val(); // 獲取匹配元素的當(dāng)前值 empty(); // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。(包括文本節(jié)點(diǎn))5. Ajax 異步交互
1. Ajax 概述
Ajax：不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法
傳統(tǒng) Web 與 Ajax 的差異
| 發(fā)送請(qǐng)求方式 | 提交表單方式發(fā)送請(qǐng)求 | 異步引擎對(duì)象發(fā)送請(qǐng)求 |
| 服務(wù)器響應(yīng) | 響應(yīng)內(nèi)容是一個(gè)完整頁(yè)面 | 響應(yīng)內(nèi)容只是需要的數(shù)據(jù) |
| 客服端處理方式 | 需等待服務(wù)器響應(yīng)完成，并重新加載整個(gè)頁(yè)面后，用戶才能進(jìn)行操作 | 可以動(dòng)態(tài)更新頁(yè)面中的部分內(nèi)容，用戶可以不需等待請(qǐng)求的響應(yīng) |
Ajax 執(zhí)行過(guò)程
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-EGnpELXS-1648561406717)(link-picture\image-20220114145756983.png)]
2. XMLHttpRequest 對(duì)象
XMLHttpRequest：Ajax 的核心對(duì)象
該對(duì)象是對(duì) JavaScript 的一個(gè)擴(kuò)展，可使網(wǎng)頁(yè)與服務(wù)器進(jìn)行通信，是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把 Ajax 當(dāng)成 XMLHttpRequest 對(duì)象的代名詞
XMLHttpRequest 對(duì)象
XMLHttpRequest 的常用方法
// method為GET/POST,url為相對(duì)URL或絕對(duì)URL。第3個(gè)是可選參數(shù) open(“method”,”url”，...); // 建立對(duì)服務(wù)器的調(diào)用 send(content); // 向服務(wù)器發(fā)送請(qǐng)求 setRequestHeader("label", "value");// 設(shè)置請(qǐng)求頭的值，設(shè)置任何頭部之前必須先調(diào)用 open()XMLHttpRequest 的常用屬性
onreadystatechange：事件處理函數(shù)
該事件處理函數(shù)由 ajax 框架觸發(fā)，而不是用戶在 Ajax 執(zhí)行過(guò)程中觸發(fā)，
觸發(fā)后，服務(wù)器會(huì)通知客戶端當(dāng)前的通信狀態(tài)，
這依靠更新 XMLHttpRequest 對(duì)象的 readyState 來(lái)實(shí)現(xiàn)。改變 readyState 屬性是服務(wù)器對(duì)客戶端連接操作的一種方式。
每次 readyState 屬性的改變都會(huì)觸發(fā) onreadystatechange 事件。
readyState：表示 Ajax 當(dāng)前的請(qǐng)求狀態(tài)
它的值用數(shù)字代表：
| 0 | 代表未初始化，還沒(méi)有調(diào)用 open 方法 |
| 1 | 代表正在加載，open 方法已被調(diào)用，但 send 方法還沒(méi)有被調(diào)用 |
| 2 | 代表已加載完畢，send 已被調(diào)用，請(qǐng)求已經(jīng)開(kāi)始 |
| 3 | 代表交互中，服務(wù)器正在發(fā)送響應(yīng) |
| 4 | 代表響應(yīng)完成，響應(yīng)發(fā)送完畢 |
每次 readyState 值的改變，都會(huì)觸發(fā) onreadystatechange 事件。如果把 onreadystatechange 事件處理函數(shù)賦給一個(gè)函數(shù)，那么每次 readyState 值的改變都會(huì)引發(fā)該函數(shù)的執(zhí)行。readyState 值的變化會(huì)因?yàn)g覽器的不同而有所差異。但是，當(dāng)請(qǐng)求結(jié)束的時(shí)候，每個(gè)瀏覽器都會(huì)把 readyState 的值統(tǒng)一設(shè)為 4。
Status：狀態(tài)碼
服務(wù)器發(fā)送的每一個(gè)響應(yīng)也都帶有頭部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的響應(yīng)中最重要的頭部信息，并且屬于超文本傳輸協(xié)議中的一部分。常用狀態(tài)碼及其含義：
| 200 | 一切正常(ok) |
| 304 | 沒(méi)有被修改（服務(wù)器返回 304 狀態(tài)，表示源文件沒(méi)有被修改） |
| 400 | 錯(cuò)誤請(qǐng)求，如語(yǔ)法錯(cuò)誤 |
| 403 | 禁止訪問(wèn)(forbidden) |
| 404 | 沒(méi)找到頁(yè)面(not found) |
| 500 | 內(nèi)部服務(wù)器出錯(cuò)(internal service error) |
在 XMLHttpRequest 對(duì)象中，服務(wù)器發(fā)送的狀態(tài)碼都保存在 status 屬性里。通過(guò)把這個(gè)值和 200 或 304 比較，可以確保服務(wù)器是否已發(fā)送了一個(gè)成功的響應(yīng)。
statusText：返回當(dāng)前請(qǐng)求的響應(yīng)狀態(tài)
服務(wù)器的響應(yīng)內(nèi)容
它是一個(gè) HTML，XML 或普通文本，這取決于服務(wù)器發(fā)送的響應(yīng)內(nèi)容。
注意：
3. JavaScript 的 Ajax 異步交互
瀏覽器端
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript 的 Ajax 請(qǐng)求</title></head><body><label>用戶名:</label><input name="userName" id="userName" onblur="checkUserExist()"/><label id="NameMsg"></label><script type="text/javascript">var xmlHttpRequest; // 定義 XMLHttpRequest 對(duì)象function createXmlHttpRequest() { // 建立 XMLHttpRequest()對(duì)象if (window.ActiveXObject) { // 解決瀏覽器的兼容問(wèn)題return new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}function checkUserExist(){ //發(fā)起 ajax 請(qǐng)求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.創(chuàng)建 xmlhttprequest 對(duì)象xmlHttpRequest = createXmlHttpRequest(); // 2.設(shè)置回調(diào)函數(shù)xmlHttpRequest.onreadystatechange=callback;// 3.建立連接 openxmlHttpRequest.open('POST', url); // 4.設(shè)置請(qǐng)求頭xmlHttpRequest.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");// 5.發(fā)送請(qǐng)求 sendxmlHttpRequest.send(param); }//處理 ajax 請(qǐng)求的結(jié)果function callback(){ if(xmlHttpRequest.readyState == 4){ //完成if(xmlHttpRequest.status == 200){ //成功var result = xmlHttpRequest.responseText; //響應(yīng)的返回值var NameMsg = document.getElementById('NameMsg');if("true" == result){ // 被占用NameMsg.innerHTML = '用戶名被占用';}else{NameMsg.innerHTML = '用戶名可用';}}}}</script></body> </html>服務(wù)器端
獲取瀏覽器端發(fā)過(guò)來(lái)的參數(shù)并作出響應(yīng)
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userName = request.getParameter("userName"); //參數(shù)是寫(xiě)在 uri 中的if(userName != null){//uri 默認(rèn)的編碼方式是 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 異步交互
傳統(tǒng)方式 JavaScript 實(shí)現(xiàn) Ajax 的不足
1. JQuery 的 Ajax
語(yǔ)法：
$.ajax([參數(shù)]);常用參數(shù)
| String url | 發(fā)送請(qǐng)求的地址，默認(rèn)為當(dāng)前頁(yè)面地址 |
| String type | 請(qǐng)求方式：POST/POST，默認(rèn)GET |
| String headers | 請(qǐng)求頭 |
| String accepts | 通過(guò)請(qǐng)求頭發(fā)送給服務(wù)器，告訴服務(wù)器當(dāng)前客戶端可接受的數(shù)據(jù)類型 |
| String data或Object data | 發(fā)送到服務(wù)器的數(shù)據(jù) |
| String contentType | 發(fā)送信息至服務(wù)器的內(nèi)容編碼類型，默認(rèn)： “application/x-www-form-urlencoded; charset=UTF-8” |
| String dataType | 將服務(wù)器端返回的數(shù)據(jù)轉(zhuǎn)換成指定類型， 包括XML、HTML、Script、JSON、JSONP、text |
| Boolean async | 是否異步，默認(rèn)為true |
| Boolean global | 是否觸發(fā)全局Ajax事件，默認(rèn)為true |
| Number timeout | 設(shè)置請(qǐng)求超時(shí)時(shí)間 |
| function beforeSend(XMLHttpRequest xhr) | 發(fā)送請(qǐng)求前的回調(diào)函數(shù)，參數(shù)可選 |
| function complete(XMLHttpRequest xhr,String st) | 請(qǐng)求完成后的回調(diào)函數(shù)，參數(shù)可選 |
| function success(Object result,String st) | 請(qǐng)求成功后的回調(diào)函數(shù)，參數(shù)可選 |
| function error(XMLHttpRequest xhr,String st,Exception e) | 請(qǐng)求失敗時(shí)的回調(diào)函數(shù)，參數(shù)可選 |
服務(wù)器端返回?cái)?shù)據(jù)后轉(zhuǎn)換類型（contentType）：
| xml | 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成 xml 格式 |
| text | 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式 |
| html | 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式，在插入 DOM 中時(shí)，如果包含 JavaScript 標(biāo)簽，則會(huì)嘗試去執(zhí)行 |
| script | 嘗試將返回值當(dāng)作 JavaScript 去執(zhí)行，然后再將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成普通文本格式 |
| json | 將服務(wù)器端返回的內(nèi)容轉(zhuǎn)換成相應(yīng)的 JavaScript 對(duì)象 |
| jsonp | JSONP 格式使用 JSONP 形式調(diào)用函數(shù)時(shí)，如 “myurl?callback=?” ，jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù) |
常用方法
$.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：加載函數(shù) 可用 get 代替
$("#nameDiv").load(url,data);等價(jià)于 $.get(url,data,function(result){$("#nameDiv").html(result); }) 等價(jià)于 $.ajax(url:url,type:"get",data:data,dataType:"txt",success:function(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù)} );getJSON： 可用 ajax 代替
$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });等價(jià)于 $.ajax(url:url,type:"get",data:data,dataType:"json",success:function(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù)} );5. JSON 的 Ajax 異步交互
客服端的 JSON 的使用
客服端使用 JQuery 的 getJSON() 方法發(fā)起請(qǐng)求
$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });服務(wù)端的 JSON 的使用
服務(wù)端使用 json-lib 類庫(kù)，將要返回的數(shù)據(jù)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換。
json-lib： 是一個(gè) java 類庫(kù)，提供將 Java 對(duì)象(包括 bean,map,collection,array,XML等)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換的功能。
使用 json-lib ，執(zhí)行環(huán)境需要其他類庫(kù)支持
ajax 代替`
~~~js$.ajax(url:url,type:"get", //1.9.0之后用methoddata:data,dataType:"txt",success:function(result){},error:function(){});~~~load：加載函數(shù) 可用 get 代替
$("#nameDiv").load(url,data);等價(jià)于 $.get(url,data,function(result){$("#nameDiv").html(result); }) 等價(jià)于 $.ajax(url:url,type:"get",data:data,dataType:"txt",success:function(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù)} );getJSON： 可用 ajax 代替
$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });等價(jià)于 $.ajax(url:url,type:"get",data:data,dataType:"json",success:function(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù)} );5. JSON 的 Ajax 異步交互
客服端的 JSON 的使用
客服端使用 JQuery 的 getJSON() 方法發(fā)起請(qǐng)求
$.getJSON(url,data,success(result){// 處理服務(wù)器返回來(lái)的數(shù)據(jù) });服務(wù)端的 JSON 的使用
服務(wù)端使用 json-lib 類庫(kù)，將要返回的數(shù)據(jù)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換。
json-lib： 是一個(gè) java 類庫(kù)，提供將 Java 對(duì)象(包括 bean,map,collection,array,XML等)轉(zhuǎn)換成 JSON，或者反向轉(zhuǎn)換的功能。
使用 json-lib ，執(zhí)行環(huán)境需要其他類庫(kù)支持
總結(jié)
以上是生活随笔為你收集整理的前端基础之Html、CSS、JavaScript、JQuery、Ajax的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 下载安装SQL server2008的步
- 下一篇： javafx-更改webview中的ht