整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
前段時(shí)間搞了一個(gè)地方性民生資訊號(hào)，資訊嘛，都是我抄你的，你抄官媒的，小市民都喜歡奇聞異事，所以就存在一個(gè)需求，如何去定向抓取奇聞異事的地方號(hào)上的新聞，其實(shí)做起來(lái)很簡(jiǎn)單，用邏輯回歸即可，這篇主要討論如何去抓取，在 C# 中大家都知道抓取通用的庫(kù)是 HtmlAgilityPack，但是這個(gè)庫(kù)主流的做法是采用 xpath 提取網(wǎng)頁(yè)內(nèi)容，這就讓我很不爽了，畢竟不熟悉莫名的抵抗哈，像我這個(gè)年紀(jì)的碼農(nóng)，被 Jquery 教育了至少 5-6 年，所以必須用 類(lèi)Jquery 的方式，在 python 中有 cquery 做這件事情，那在 C# 中有沒(méi)有類(lèi)似的方式呢？ 嘿嘿，萬(wàn)能的 github 上還真有。。。 就是本篇介紹的 CSQuery。
github的地址： https://github.com/zone117x/CsQuery 然后在vs中 nuget 一下即可：
一切都準(zhǔn)備就緒了，那怎么用呢？ 不著急，我以博客園舉兩個(gè)例子。
如上圖，要想獲取這里的 友情鏈接幾個(gè)大字，直接用 text() 肯定是不行的，默認(rèn)情況它會(huì)將所有的子節(jié)點(diǎn)的文本也會(huì)抓到，如下圖：
那怎么處理呢？ 可以用 jquery 提供的 contents 方法，然后在獲取的所有子節(jié)點(diǎn)中判斷是否有 文本節(jié)點(diǎn)，最后獲取文本節(jié)點(diǎn)的內(nèi)容即可，如下代碼：
用js是搞定了，那用 CSQuery 代碼怎么搞定呢？模仿唄，如下代碼：
static void Main(string[] args)
{
var jquery = CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));
var content = jquery["#friend_link"].Contents().Filter((dom) =>
{
return dom.NodeType == NodeType.TEXT_NODE;
}).Text();
Console.WriteLine(content);
}
我不知道用 xpath 提取這樣的內(nèi)容麻不麻煩，不過(guò)用 jquery 方式不簡(jiǎn)單，但輕車(chē)熟路。
有時(shí)候?yàn)榱藰I(yè)務(wù)需要將某些 html 標(biāo)簽改一下顏色，比如說(shuō)將首頁(yè)的 tabmenu 中 博問(wèn) 和 專(zhuān)區(qū) 改成紅色，如下圖：
那用 CSQuery 怎么處理呢？ 如果玩過(guò) jquery，一般來(lái)說(shuō)步驟如下：
有了步驟，C#代碼如下：
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var jquery = CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));
var html = jquery["#nav_left li"].Each(dom =>
{
var self = jquery[dom];
var text = self.Text();
if (text == "博問(wèn)" || text == "專(zhuān)區(qū)")
{
self.Find("a").CssSet(new { color = "red" });
}
}).Render();
}
除了上面兩個(gè)操作方法外，你還可以使用 after，before，replaceAll,IS 等等一百來(lái)個(gè)實(shí)用的方法，這篇肯定也無(wú)法一一介紹了，大家有興趣可以下載下來(lái)看一看，搗鼓搗鼓。
除了抓取html中的元素，我覺(jué)得這玩意還可以用在發(fā)送郵件時(shí)操控郵件模板，畢竟在很久以前大家都是用jquery來(lái)繪制 html，所以用 CSQuery 也是可以的，相對(duì)使用 xslt 有利有弊吧，接下來(lái)做一個(gè)例子：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul id="main"></ul>
</body>
</html>
可以用 Append 將內(nèi)容追加到 <ul> 節(jié)點(diǎn)內(nèi)。
class Program
{
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var strlist = new string[2] { "1", "2" };
var path = Environment.CurrentDirectory + "\\2.html";
var jquery = CQ.CreateFromFile(path);
foreach (var str in strlist)
{
jquery.Find("#main").Append($"<li>{str}</li>");
}
var html = jquery.Render();
}
}
Render方法是將整個(gè)Dom渲染成html，但有時(shí)候你只需要得到你修改的那部分內(nèi)容，而不是整個(gè)html，這就涉及到了部分渲染，可以用 RenderSelection 方法即可，代碼如下：
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var strlist = new string[2] { "1", "2" };
var path = Environment.CurrentDirectory + "\\2.html";
var jquery = CQ.CreateFromFile(path);
var current = jquery.Find("#main");
foreach (var str in strlist)
{
current.Append($"<li>{str}</li>");
}
var html = current.RenderSelection();
Console.WriteLine(html);
}
------------- output ----------------
<ul id="main"><li>1</li><li>2</li></ul>
Jquery 這種操作模式對(duì)我個(gè)人來(lái)說(shuō)還是比較舒服的，畢竟熟！ 不過(guò)在 html5 中也新增了 querySelector 和 querySelectorAll 支持 css3 選擇器，非常強(qiáng)大，可 jquery 不光在選擇器的靈活上，還在于對(duì)節(jié)點(diǎn)的靈活操作上，總的來(lái)說(shuō)不是特別富交互的情況下可以懷舊一把。
人建議：學(xué)習(xí) jQuery 前先掌握基本的 JavaScrpit 語(yǔ)法，特別是對(duì)函數(shù)要掌握，jQuery 基本上是使用函數(shù)。
jQuery 是一個(gè)輕量級(jí) JavaScript 庫(kù)
jQuery 庫(kù)位于一個(gè) JavaScript 文件中，其中包含了所有的 jQuery 函數(shù)，需要通過(guò) <script>標(biāo)簽引入 jQuery 庫(kù)才能進(jìn)行使用
本地引入
共有兩個(gè)版本的 jQuery 可供下載 http://jQuery.com：一份是精簡(jiǎn)過(guò)的，另一份是未壓縮的（供調(diào)試或閱讀）
從 Google 加載 CDN jQuery 核心文件（ 版本可更換 ）
src = http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
從 Microsoft 加載 CDN jQuery 核心文件（ 版本可更換 ）
src = http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js
基礎(chǔ)語(yǔ)法：$(selector).action()
美元符號(hào)（$）定義 jQuery
選擇符（selector）“ 查詢(xún) ” 和 “ 查找 ” HTML 元素
jQuery 的 action() 執(zhí)行對(duì)元素的操作
文檔就緒函數(shù)
文檔就緒函數(shù)，用于在頁(yè)面加載成功后執(zhí)行的指定代碼
如果在文檔沒(méi)有完全加載之前就運(yùn)行函數(shù)，操作可能失敗
通常該函數(shù)用于替換 window.onload 事件，文檔就緒函數(shù)的執(zhí)行效率更高
$(document).ready(function(){
code block
});可以簡(jiǎn)寫(xiě)為:
$(function(){
code block
});jQuery 使用 $ 符號(hào)作為 jQuery 的簡(jiǎn)寫(xiě)
jQuery 標(biāo)識(shí)符
使用 jQuery 全名
jQuery(document).ready(function(){
jQuery("button").click(function(){
code block
});
});使用 jQuery 簡(jiǎn)寫(xiě)
$(function(){
$("button").click(function(){
code block
});
});自定義 jQuery 別名
var jq = $.noConflict();
jq(function(){
jq("button").click(function(){
code block
});
});注：因?yàn)?javascrpit 某些框架中也使用 $ 作為簡(jiǎn)寫(xiě)( 就像 jQuery )，noConflict() 方法是為了解決 javascrpit 框架之間符號(hào)沖突而定義的方法，它會(huì)釋放 $ 標(biāo)識(shí)符的控制，這樣其他腳本也可以使用這個(gè)符號(hào)
jQuery 元素選擇器和屬性選擇器允許您通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì) HTML 元素進(jìn)行選擇
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素
$(this) 當(dāng)前 HTML 元素
$("p") 選取 <p> 元素
$("p.intro") 選取所有 class="intro" 的 <p> 元素
$("p#demo") 選取所有 id="demo" 的 <p> 元素
$("div#intro .head") 選取 id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 屬性選擇器
jQuery 使用 XPath 表達(dá)式來(lái)選擇帶有給定屬性的元素
$("[href]") 選取所有帶有href 屬性的元素
$("[href='#']") 選取所有帶有 href 值等于"#" 的元素
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性
把所有 p 元素的背景顏色更改為紅色：$("p").css("background-color","red")
jQuery 事件處理方法是 jQuery 中的核心函數(shù)
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。術(shù)語(yǔ)由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會(huì)被使用
例子：按鈕的點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)
$("button").click(function() {..some code... } )
常用事件函數(shù)
$(document).ready(function) 將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時(shí)）
$(selector).click(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件
$(selector).change(function) 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 change 事件
$(selector).dblclick(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件
$(selector).mouseover(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件
效果通常綁定在某在事件上，例如通過(guò)點(diǎn)擊按鈕產(chǎn)生隱藏效果
常見(jiàn)的用于效果的函數(shù)
1.隱藏、顯示、切換
- 隱藏 `$(selector).hide(speed,callback)` ： `$("p").hide();`
- 顯示`$(selector).show(speed,callback)` ： `$("p").show(1000);`
- 切換隱藏/顯示`$(selector).toggle(speed,callback)` ： `$("p").toggle();`speed 和 callback 都是可選參數(shù)
speed 參數(shù)規(guī)定顯示/隱藏的速度，可選值為：”slow”、”fast” 或毫秒值
callback 參數(shù)是顯示/隱藏完成后所執(zhí)行的函數(shù)名稱(chēng)
2.淡入、淡出
- 淡入 `$(selector).fadeIn(speed,callback)` ： `$("#div1").fadeIn("slow");`
- 淡出 `$(selector).fadeOut(speed,callback)` ： `$("#div3").fadeOut(3000);`
- 切換淡入/淡出 `$(selector).fadeToggle(speed,callback)` ： ` $("#div1").fadeToggle();`
- 漸變?yōu)樘囟ㄍ该鞫?`$(selector).fadeTo(speed,opacity,callback)` ：`$("#div2").fadeTo("slow",0.4);`speed 和 callback 都是可選參數(shù)，opacity 為必需參數(shù)
speed 參數(shù)規(guī)定淡入/淡出的速度，可選值為：”slow”、”fast” 或毫秒值
callback 參數(shù)是顯示/隱藏完成后所執(zhí)行的函數(shù)名稱(chēng)
opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間)
3.滑動(dòng)
- 向下滑動(dòng) `$(selector).slideDown(speed,callback)` ： `$("#panel").slideDown();`
- 向上滑動(dòng) `$(selector).slideUp(speed,callback)` : `$("#panel").slideUp();`
- 切換向上滑動(dòng)/向下滑動(dòng) `slideToggle()` : `$("#panel").slideToggle();`speed 和 callback 都是可選參數(shù)
speed 參數(shù)規(guī)定向上滑動(dòng)/向下滑動(dòng)的速度，可選值為：”slow”、”fast” 或毫秒值
callback 參數(shù)是向上滑動(dòng)/向下滑動(dòng)完成后所執(zhí)行的函數(shù)名稱(chēng)
4.動(dòng)畫(huà)
- 自定義動(dòng)畫(huà) `$(selector).animate({params},speed,callback)`params 是必需參數(shù)， speed 和 callback 是可選參數(shù)
params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性
speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)，可選值為：”slow”、”fast” 或毫秒值
callback 參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱(chēng)
注： 默認(rèn)地，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無(wú)法移動(dòng)，如需對(duì)位置進(jìn)行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！
- 停止動(dòng)畫(huà) ·`$(selector).stop(stopAll,goToEnd);`
stopAll 和 goToEnd 都是可選參數(shù)
stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行
goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是 false。
默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)
實(shí)例
使用絕對(duì)值
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});使用相對(duì)值
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});使用隊(duì)列功能 ( 逐一進(jìn)行 animate 調(diào)用 )
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});5.方法連接
允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令，一條接著另一條，這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個(gè)動(dòng)作，您只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上
例如： 把 css(), slideUp() 和 slideDown() 鏈接在一起?！眕1” 元素首先會(huì)變?yōu)榧t色，然后向上滑動(dòng)，然后向下滑動(dòng)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
對(duì)內(nèi)容操作
1.獲取內(nèi)容
- `$(selector).text();` 設(shè)置或返回所選元素的文本內(nèi)容 - `$(selector).html();` 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記） - `$(selector).val();` 設(shè)置或返回表單字段的值
2.設(shè)置內(nèi)容
- `$(selector).text(string);` 設(shè)置所選元素的文本內(nèi)容 - `$(selector).val(string);` 設(shè)置所選元素的內(nèi)容（包括 HTML 標(biāo)記） - `$(selector).html(string);` 設(shè)置表單字段的值
3.回調(diào)函數(shù)
i：被選元素列表中當(dāng)前元素的下標(biāo)
origText：原始（舊的）值
res：以函數(shù)新值返回您希望使用的字符串
- `$(selector).text(function(i,origText){return res;});` 設(shè)置或返回所選元素的文本內(nèi)容
- `$(selector).val(function(i,origText){return res;});` 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- `$(selector).html(function(i,origText){return res;});` 設(shè)置或返回表單字段的值對(duì)屬性操作
1.獲取屬性
- `$(selector).attr("attribute");` 獲取指定元素的所選屬性2.設(shè)置屬性
- `$(selector).attr("attribute","value");` 設(shè)置所選屬性的值
- `$(selector).attr({"attribute1":"value1", "attribute2":"value2"});` 同時(shí)設(shè)置多個(gè)屬性的值3.attr() 的回調(diào)函數(shù)
i ： 被選元素列表中當(dāng)前元素的下標(biāo)
origValue : 原始（舊的）值
res ： 以函數(shù)新值返回您希望使用的字符串
- `$(selector).attr("attribute",function(i,origValue){return res});`對(duì)元素/內(nèi)容操作
與前面的 對(duì)內(nèi)容操作 不同的是：上面的三個(gè)方法會(huì)將原來(lái)的值覆蓋，而這里的方法是在原值基礎(chǔ)上進(jìn)行修改
1.添加
參數(shù)可以是多個(gè)，如果多個(gè)含有 html 的內(nèi)容，則相當(dāng)于增加了多個(gè) html 元素
- `$(selector).append("text");` 在被選元素的結(jié)尾插入內(nèi)容
- `$(selector).prepend("text");` 在被選元素的開(kāi)頭插入內(nèi)容
- `$(selector).prepend("text");` 在被選元素之后插入內(nèi)容
- `$(selector).before("text");` 在被選元素之前插入內(nèi)容2.刪除
- `$(selector).remove();` 刪除被選元素（及其子元素） - `$(selector).empty();` 從被選元素中刪除子元素 - `$(selector).remove(selector);` 刪除指定選擇器的元素
對(duì) CSS 元素操作
前三種方法是針對(duì)已經(jīng)寫(xiě)好的樣式
- `$(selector).addClass("className1 className2");` 向被選元素添加一個(gè)或多個(gè)類(lèi)
- `$(selector).removeClass("className1 className2");` 從被選元素刪除一個(gè)或多個(gè)類(lèi)
- `$(selector).toggleClass("className");` 對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作
- `$(selector).css();`返回樣式屬性
- `$(selector).css("attribute","value");`設(shè)置單個(gè)樣式屬性
- `$(selector).css({"propertyname":"value","propertyname":"value",...});`設(shè)置多個(gè)樣式屬性對(duì)尺寸操作
注意參數(shù)，中間四種沒(méi)有沒(méi)有參數(shù)，不能進(jìn)行設(shè)置
- `$(selector).width("text");` 設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）
- `$(selector).height("text");` 設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）
- `$(selector).innerWidth();`返回元素的寬度（包括內(nèi)邊距）
- `$(selector).innerHeight(");`返回元素的高度（包括內(nèi)邊距）
- `$(selector).outerWidth();`返回元素的寬度（包括內(nèi)邊距和邊框）
- `$(selector).outerHeight();` 返回元素的高度（包括內(nèi)邊距和邊框）
- `$(selector).outerWidth(true);`返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）
- `$(selector).outerHeight(true);` 返回元素的高度（包括內(nèi)邊距、邊框和外邊距）祖先
向上遍歷 DOM 樹(shù)
- `$(selector).parent();` 返回被選元素的直接父元素，該方法只會(huì)向上一級(jí)對(duì) DOM 樹(shù)進(jìn)行遍歷 - `$(selector).parents();` 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>) - `$(selector).parents(selector);` 返回經(jīng)過(guò)過(guò)濾的所有祖先元素，它一路向上直到文檔的根元素 (<html>) - `$(selector).parentsUntil() ;`返回介于兩個(gè)給定元素之間的所有祖先元素
祖先
向下遍歷 DOM 樹(shù)，以查找元素的后代
- `$(selector).children();` 返回被選元素的所有直接子元素，該方法只會(huì)向下一級(jí)對(duì) DOM 樹(shù)進(jìn)行遍歷
- `$(selector).children(selector);` 返回被選元素的經(jīng)過(guò)過(guò)濾的子元素，該方法只會(huì)向下一級(jí)對(duì) DOM 樹(shù)進(jìn)行遍歷
- `$(selector).find("selector");` 返回被選元素的后代元素，一路向下直到最后一個(gè)后代(此方法必須有參數(shù)，如果是全部則為 "*" )同胞
DOM 樹(shù)中遍歷元素的同胞元素
- `$(selector).siblings(selector);` 返回被選元素的所有同胞元素（selector可選） - `$(selector).next();` 返回被選元素的下一個(gè)同胞元素 - `$(selector).nextAll();` 返回被選元素的所有跟隨的同胞元素 - `$(selector).nextUntil(selecotr);` 返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素 - prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類(lèi)似，只不過(guò)方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹(shù)中沿著同胞元素向后遍歷，而不是向前）
過(guò)濾
允許您基于其在一組元素中的位置來(lái)選擇一個(gè)特定的元素
- `$(selector).first();` 返回被選元素的首個(gè)元素 - `$(selector).last();` 返回被選元素的最后一個(gè)元素 - `$(selector).eq();` 返回被選元素中帶有指定索引號(hào)的元素（索引號(hào)從 0 開(kāi)始） - `$(selector).filter(selector);` 不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回 - `$(selector).not(selector);` not() 方法與 filter() 相反，返回不匹配標(biāo)準(zhǔn)的所有元素
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）
簡(jiǎn)短地說(shuō)，在不重載整個(gè)網(wǎng)頁(yè)的情況下，AJAX 通過(guò)后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁(yè)上進(jìn)行顯示
load 方法
- `$(selector).load(URL,data,callback);` 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢(xún)字符串鍵/值對(duì)集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱(chēng)
callback 回調(diào)函數(shù)
$(selector).load(URL,data,function(responseTxt,statusTxt,xhr){});
responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對(duì)象
responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對(duì)象
get/post 方法
必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL
可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名
- `$.get(URL,callback);` 通過(guò) HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)
GET - 從指定的資源請(qǐng)求數(shù)據(jù)
GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋?zhuān)篏ET 方法可能返回緩存數(shù)據(jù)
- `$.post(URL,data,callback);` 通過(guò) HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)
data 是要提交給服務(wù)器的數(shù)據(jù)，如果數(shù)據(jù)有多個(gè)，使用 json 格式
POST - 向指定的資源提交要處理的數(shù)據(jù)
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過(guò)，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)
回調(diào)函數(shù)
data : 存有被請(qǐng)求頁(yè)面的內(nèi)容
status : 存有請(qǐng)求的狀態(tài)( success/fail )
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});注意： ajax 不能訪問(wèn)本地文件，需要解決跨域訪問(wèn)的問(wèn)題
么是JS延遲加載？
JS延遲加載，也就是等頁(yè)面加載完成之后再加載JavaScript文件
為什么讓JS實(shí)現(xiàn)延遲加載？
js的延遲加載有助于提高頁(yè)面的加載速度。
Js延遲加載的方式有哪些？一般有以下幾種方式：
·defer屬性
·async屬性
·動(dòng)態(tài)創(chuàng)建DOM方式
·使用jQuery的getScript方法
·使用setTimeout延遲方法
·讓JS最后加載
HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。
用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>說(shuō)明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性
HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類(lèi)似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類(lèi)似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁(yè)面等待腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。異步腳本一定會(huì)在頁(yè)面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁(yè)面的加載。
缺點(diǎn)：不能控制加載的順序
//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement = document .createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window. addEventListener)
window.addEventListener("load" ,downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload) ;
else
window. onload =downloadJSAtOnload;
</script>$.getScript("outer.js" , function(){ //回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
console.log(“腳本加載完成")
});<script type="text/javascript" >
function A(){
$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延遲1秒
})
</script>把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度。
上述方法2也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)
<script type= "text/javascript">
function downloadJSAtonload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent )
window.attachEvent("onload", downloadJSAtonload);
else window.onload = downloadJSAtOnload;
</script>這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
6.1）復(fù)制上面代碼
6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
6.3）修改“defer.js”為你的外部JS文件名
6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：
這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁(yè)面正常加載需要依賴(lài)的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
