使用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直接模擬鍵盤滑鼠的原始輸入。