★網站前端技術發展太快, 新手很難抉擇要學的東西, 大家學了什麼

CSS:https://colorlib.com/wp/free-css3-frameworks/
JS:https://colorlib.com/wp/javascript-frameworks/
HYBRID APP:https://blog.jscrambler.com/10-frameworks-for-mobile-hybrid-apps/
2d/3d Game:https://www.diycode.cc/topics/16
Desktop:https://electron.atom.io/
IOT:https://webduino.io/

上述只是冰山一角, UI/UX視覺整合, 前端資安, 後端node.js, Social Plugin, SEO, 自動化測試, 大數據分析, 資料視覺化, RWD, AI, Google Map, 語音辨識, 文字轉發音, 影像辨識, VR/AR, Webphone, WebRTC, midi, GrouthHacker, 程式混淆壓縮加密, 程式編譯如Typescript/Kotlin編譯成js, 版控只能git了,讓你玩不完....老實說有點噁心, 而且沒談到各框架生態系與外掛....哈哈 Orz

後端工作如後台開發, 金流, 後台資安, 大數據分析, 自動化測試, 排程, BOT, 轉檔, 檔案管理, RESTFUL API撰寫, 伺服器調教維運, 資料庫調教維運, LOG管理, 種類相較較少, 當然不是說比前端簡單, 後端工作需要深度學習與經驗. 個人推薦python作為後端開發程式會很省力, 因為投資報酬率還不錯. 或者想省掉後端管理的工就用firebase也是不錯選擇

2016年2月18日 星期四

Chrome Console 應用實戰第二發,用 jQuery 取出外部 HTML 有價值資料,像取外部 JSON 與 XML 資料一樣簡單

此課題較為進階請耐心看完,有修正建議請多多指教~謝謝大家!

我們知道流行的資料交換格式就是 json 跟 xml,但是 html 裡面也有寶貴資料可以擷取,我們可以利用
$.post("你想解取資料的網址",function(raw){ // 回傳 raw 是 html 網頁資料, 不是 json 與 xml
  var jqHTML = $($.parseHTML(raw)); // 解析 html 並轉成 jQuery 物件
  var jqHTML.find("css selector").xxx; // 取得想要資料片段
})
來針對結構複雜的 html 網頁資料建立 jQuery 物件並用 css selector 找到我們要的指定資料。

★接觸此範例前建議先閱讀上一篇文章 Chrome Console 應用實戰,用 jQuery 批量下載正妹圖

我們正式進入主題 -
請先到作者朋友網站 http://facemood.grtimed.com/

開新視窗連結到 http://facemood.grtimed.com/?view=facemood&tid=1&page=1,請不要把首頁關掉,等下要切換回去
檢視面板找到 div class="xxx" data-f-text="(*゚∀゚*)",我想要擷取此畫面所有顏文字字串

回到首頁 http://facemood.grtimed.com/ 的頁面動態載入 jQuery
(不了解請先看之前範例了解如何製作動態載入jQuery的標籤)

打開 Console 貼上下面程式

$.post("http://facemood.grtimed.com/?view=facemood&tid=1&page=1",function(raw){
 // 將載入 HTML 解析並轉化成jQuery物件,all_emoji儲存所有顏文字
 var html = $($.parseHTML(raw)),all_emoji=[];
 // 取得指定標籤顏文字
 var emoji = html.find("div[data-f-text]");
 // 將所有顏文字存到 all_emoji 陣列
 emoji.each(function(){all_emoji.push($.trim($(this).html()));});
 // 清空畫面,輸出 all_emoji 陣列轉字串資料
 document.write(all_emoji.join(","));
})

輸出結果如下,我在網站首頁讀取其它頁面資料並輸出

你是否有能力靠程式擷取網站所有顏文字呢?請自行練習tid=x&page=y,x,y為變數,遞迴函示跑資料。作者擷取資料成功範例,抓到近550筆顏文字,下方為擷取成果

2 則留言:

  1. 你好,請問一下在這裡為什麼使用 $.post 而不使用 $.get ?

    回覆刪除