Chrome debugger with jQuery

最近和大神討論如何正確的找到所需的答案，以Chrome debugger為例，關鍵字要下chrome developer tools “advanced”，就可以找到這篇可以學習到進階版的除錯方式

會這樣問是因為最近常在爬資料，遇到了一些困難，如何不用IDE就可以找到答案？

1.爬圖片

2.爬網站連結

3.爬數字計算排行

首先要先了解jQuery的selector 可以看這篇學

$(‘a’); // 取得頁面中所有的 <a> 標籤元素

$(‘#el’); // 取得 id 為 el 的元素

$(‘.item’); // 取得 class name 為 item 的所有元素

$(‘#container a’); // 取得 id 為 container 之元素其內部的所有連結 <a>

$(‘div > p’); // 取得 div 父元素其下所有直接 (不包括子元素的子元素) 的 p 子元素

$(‘tr:first’); // 取得第一個找到的 tr 標籤元素

$(‘input[name=”email”]’); // 取得其 name 屬性值為 email 的 input 元素

1.爬圖片

小狗圖

https://www.google.com/search?q=%E5%B0%8F%E7%8B%97&sxsrf=ALeKk03u_iM0UVGSj45NC0MuQbpM7Q52Pw:1604641409367&source=lnms&tbm=isch&sa=X&ved=2ahUKEwimzMmJm-3sAhVBL6YKHfLcAUcQ_AUoAXoECAMQAw&biw=1280&bih=578

var result = $$( “#islrg img[src*=’data:image’]” ).map( function(element){

    return element.src;

});

console.log(result)

2.爬網站連結

https://www.google.com/search?biw=1280&bih=578&sxsrf=ALeKk01MGt3QJZUfDExVcEohgDMypAG8fA%3A1604641348180&ei=ROKkX9rDCoeQr7wPtei1-Aw&q=chrome+debug%E6%95%99%E5%AD%B8&oq=Chrome+deb&gs_lcp=CgZwc3ktYWIQAxgEMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADoICAAQsQMQgwE6BQgAELEDOgQIIxAnOgQIABBDOgQIABAKUIOUY1jfzmNgyPNjaABwAHgAgAFQiAHfBJIBAjEwmAEAoAEBqgEHZ3dzLXdpesABAQ&sclient=psy-ab

var result = $$(‘.yuRUbf >a’).map(function(element){

return element.href;

});

console.log(result);

3.爬數字計算排行

一堆數字，就算要用人腦排出來也很麻煩~工具用法可以參考這一篇

var $element = $$(‘body tr td’);

var count = ($element.length / 2);

var array = [];

for (i = 0; i < count; i++) {

    var obj = {

        brand: $element[i].innerText,

        num: Number($element[i + count].innerText)

    }

    array.push(obj)

}

var result = array.sort(function(a, b) {

    return (a.num < b.num) ? 1 : -1;

});

console.log(result);