繼上一篇 [技巧] 網頁上快速存圖 (一)：縮圖變大圖 ，這次要來教的是更進階的技巧。
當我們在看一串圖的時候，有些時候會被分成好幾頁來觀看，如果分頁少一點還可以接受，但是有些網站分頁實在太多，有時候一整套圖十幾張，一頁就分一張，這要抓圖實在有點難，有些人可能會安裝自動分頁軟體來換頁，然後再利用技巧把圖片放大，這是種解決辦法，但是當分頁軟體沒辦法幫助到你的時候，也只能自力救濟了。
這次應用到的技巧一樣是 Jquery ，如果想要學習 Jquery 可以透過一些速成書籍或是線上教學網站 http://learn.jquery.com/ 來學習，或是看中文版的 學習 jQuery 從入門到精通只要兩小時！投影片。
這次的範例網站選了一個圖片很多的 完美女人，這網站就是典型的一張圖一張網頁，要抓圖的方式也是非常簡單。
首先先取得下一頁的網址。以範例文章中的網址來看，利用 瀏覽器 F12 的開發工具，先針對他的分頁結構下手
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul class="page" id="pagelist"> <li><a>共11页: </a></li> <li><a href="#">上一页</a></li> <li class="thisclass"><a href="#">1</a></li> <li><a href="21667_2.html">2</a></li> <li><a href="21667_3.html">3</a></li> <li><a href="21667_4.html">4</a></li> <li><a href="21667_5.html">5</a></li> <li><a href="21667_6.html">6</a></li> <li><a href="21667_7.html">7</a></li> <li><a href="21667_8.html">8</a></li> <li><a href="21667_9.html">9</a></li> <li><a href="21667_10.html">10</a></li> <li><a href="21667_11.html">11</a></li> <li><a href="21667_2.html">下一页</a></li> </ul> |
想要抓取下一頁的路徑，先要想辦法取得分頁的這個網頁物件，這個範例非常的標準就是，他的分頁有加上 id 因此非常好取得，就是 #pagelist ，接著我們需要建立一個function 來取得下一頁的分頁網址
|
1 2 3 |
function findNext(content){ return $('#pagelist a:last',content).attr('href'); } |
就像這樣， findNext(content) ，content 這個變數的用意就是要接收來自不同分頁的內容，取得不同分頁的下一頁，a:last 就是抓該分頁連結的最後一個，最後一個就是下一頁的內容網址。
接著要做的就是取得該分頁的內容，有了分頁的下一頁網址就可以取得下一頁的內容，要做的事情也是非常簡單，就是利用 $.get 來取得
|
1 2 3 4 5 6 |
function getPage(url){ $.get( url , function(r){ var image = $('.art_con img',content).clone(); $('.art_con:first').append( image ) }) } |
就像這樣，取得之後立刻新增到該頁裡面，這邊利用 clone() 的函式，可以不用管 img的結構直接加入在網頁中。
接著只要將程式一起套起來就可以嚕，用法很簡單跟之前的做法一樣
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// Check if jQuery's loaded function GM_wait() { if(typeof(window.jQuery) == 'undefined') { var GM_JQ = document.createElement('script'); GM_JQ.src = 'http://code.jquery.com/jquery-1.9.1.min.js'; GM_JQ.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(GM_JQ); window.setTimeout(GM_wait,100); } else { $ = window.jQuery; letsJQuery(); } } GM_wait(); function letsJQuery() { getPage( findNext( $('body') ) ) } function getPage(url){ $.get( url , function(content){ var image = $('.art_con img',content).clone(); $('.art_con:first').append( image ) var page = findNext(content); if( page && page != '#'){ getPage(page) } }) } function findNext(content){ return $('#pagelist a:last',content).attr('href'); } |
要把程式串起來讓他可以持續的抓下一頁的內容，只需要在 getPage 裡面加一小段，並且判斷他是不是已經到了最後一頁，每個網頁的判斷方式都不同，這個範例網站中的最後一頁就是網址連結最後方會是一個 # ，所以只要最後一個連結是 # 程式就會停止了。
要讓程式開始只需要在一開始的時候把本頁下一頁載入給 getPage 就可以了。
這樣一樣在 Chrome 裡面使用 Console 貼上上面的Code 就可以一次取得所有的圖片嚕。
