使用Chrome抓取頁面一個非常方便的地方就是它可以執行JS，也就是說我們可以通過JS函數獲取我們想要的數據。一個非常強大易用的庫就是Jquery，本文就簡單的介紹一下使用Chrome獲取數據時Jquery的常用用法。
注入Jquery：
Jquery是一個第三方庫，在瀏覽器中並不是原生支持。雖然Jquery比較流行，但很多網站還是沒有引入Jquery庫的。此時我們可以通過執行JS注入Jquery模塊，從而支持后續的操作，注入的方式也非常簡單：
function injectJquery()
{
if(typeof(jQuery) == 'undefined')
return;
var jq = document.createElement('script');
jq.src = "http://libs.baidu.com/jquery/1.9.0/jquery.js";
document.getElementsByTagName('head')[0].appendChild(jq);
}
injectJquery();
原理比較簡單，就是在Head中注入了一段JS。由於眾所周知的原因，Jquery官網有時會遷移到火星上去，一次這里我用的是百度的鏡像，可以根據實際情況修改上述代碼。
CSS選擇器：
Jquery是通過CSS選擇器來獲取Dom節點的，關於CSS選擇器本身語法的內容就比較多，這里就不一一介紹，詳細介紹可以參看MDN文檔：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
如果要快速入門可以參看些國內教程：
當然，我們也可以用ChromeDevTool快速構建CSS選擇器：
基本查詢：
獲取到Dom節點后，我們可以進一步獲取其屬性信息，常見Jquery獲取屬性函數有：
-
attr() - 獲取屬性
-
text() - 獲取文本內容
-
html() - 獲取元素的內容（包括 HTML 標記）
子查詢：
有的時候，我們需要在查詢內容里面細分，這時就要用到子查詢了，Jquery子查詢支持兩種方式，
//將父對象緩存起來以備將來的使用
var header = $('#header');
var menu = header.find('.menu');
或者
var menu = $('.menu', header);
輸出數據格式化：
直接輸出的Jquery查詢結果是一個Object對象，我們通過DevProtocol不是很容易解析，為了容易解析它，我們可以通過map對象來將其格式化，並且用將序列化為為字符串輸出。例如，獲取園子首頁標題信息的方式如下：
function hrefToData()
{
return {text:this.text, href: this.href};
}
var o = $('#post_list div.post_item_body > h3 > a').map(hrefToData).get();
JSON.stringify(o, null, 4)
另外一個示例：
var o = $('div.post_item').map(function()
{
var title = $('h3 > a', $(this));
var img = $('img.pfs', $(this));
return {icon:img.attr('src'), title:title.text(), href:title.attr('href')};
}).get();
JSON.stringify(o, null, 4)
模擬輸入：
很多時候，我們還需要模擬用戶輸入，如登陸，提交表單等，此時用Jquery相關函數也是非常方便的。
-
text() - 設置文本內容
-
val() - 設置表單字段的值
-
click() - 模擬點擊
當然，我們也可以直接通過JS調用Dom節點的函數模擬輸入。對於反爬蟲比較厲害的網站，我們也可以通過Chrome DevProtocol的Input Domain直接模擬鍵盤鼠標的原始輸入。