輕鬆調整網頁元素！在Chrome的Console使用jQuery / How to ...

我參考「Include jQuery in the JavaScript Console」這篇的作法，跟大家分享如何在Google Chrome使用jQuery。

1. 開啟Console / Open Console; 2. 引用 ... ::: HOME SITEMAP ABOUT MENU HOME回到首頁 SITEMAP網站地圖 ABOUT關於布丁 PUBLICATIONS發表 WORKS作品 ARCHIVES文章列表 LABELS標籤 DONATE捐款 SUBSCRIBE訂閱 CONTACT聯絡布丁 HELP ::: 輕鬆調整網頁元素！在Chrome的Console使用jQuery/HowtoincludejQueryinChrome'sConsole 1月18,2017 Programming/JavaScript 0Comments Edit Copy Download GoogleChrome(Google瀏覽器)的Console(主控台)不僅可以顯示來自JavaScript的錯誤訊息，其實我們也可以用它直接執行JavaScript程式碼。

不過如果我們想要在Console使用JavaScript最流行的函式庫jQuery，那就必須執行一段JavaScript程式碼來引用jQuery囉。

我參考「IncludejQueryintheJavaScriptConsole」這篇的作法，跟大家分享如何在GoogleChrome使用jQuery。

1.開啟Console/OpenConsoleGoogleChrome的Console必須跟網頁一起使用。

就讓我們以「布丁布丁吃什麼？」為例，一起來操作看看吧。

開啟GoogleChrome的Console的方法很多，最簡單的做法是先按「F12」鍵。

然後切換到「Console」頁籤，底下就會出現Console畫面了。

雖然乍看之下Console中沒有任何東西，但我們可以在Console點一下，這時會出現輸入游標，接著就能夠輸入JavaScript程式碼了。

2.引用jQuery/InjectjQueryLibrary接著請把下面的JavaScript程式碼複製到Console中，按下「Enter」鍵執行。

javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();$=jQuery;console.log('jQueryinjected')};document.head.appendChild(e);})(document.createElement('script'),'http://code.jquery.com/jquery-latest.min.js') 順利的話就會看到上圖的訊息：「jQueryInjected」，表示已經可以使用jQuery了。

用書籤引用jQuery/InjectjQueryviaBookmark 這篇的另一個教學是教大家使用Bookmarklet來引用jQuery。

做法很簡單： 請把下面這個「InjectjQuery」按鈕拖曳到你的書籤列： InjectjQuery 點選該書籤，網頁就會載入jQuery了。

3.測試使用jQuery/TestjQuery 讓我們用一段簡單的jQuery程式碼，數數看網頁中「div」元素的數量。

$("div").length 結果就會直接回傳在Console上囉。

關於jQuery的各種用法，請參考jQuery的使用手冊吧。

結語/InClosing 最近我常常在整理各種文件。

有Excel試算表的檔案、有Word文件的檔案、甚至也有PDF這種不能修改的檔案。

我要把這些文件整理成特定格式，但總不能一直花時間做複製貼上的動作吧。

所以我就把這些文件轉換成HTML網頁，然後利用jQuery快速整理大量資料。

效率意外地很不錯呢。

而且動動腦用jQuery整理資料也好過用機械性地操作鍵盤滑鼠，還可以避免腕隧道症候群喔。

布丁布丁吃布丁 輕鬆調整網頁元素！在Chrome的Console使用jQuery/HowtoincludejQueryinChrome'sConsole 是由 布丁布丁吃布丁 製作，以創用CC姓名標示-非商業性-相同方式分享3.0台灣授權條款釋出。

這個布丁是在無聊的世界中找尋樂趣的一種不能吃的食物，喜愛動漫畫、遊戲、程式，以及跟世間脫節的生活步調。

L P 關於布丁 訂閱BLOG 贊助 RelatedPosts CommentTools: Chooseone... UploadImage(imgur) UploadVideo(Streamable) UploadTemporaryFile(Upload.express) CodeFormatter(forHTMLorXMLcode) CommentsFeed(JSONformat) CommentsFeed(XMLformat) 較新的文章 首頁 較舊的文章 訂閱： 張貼留言(Atom) ::: AboutMe 布丁布丁吃布丁 這個布丁是在無聊的世界中找尋樂趣的一種不能吃的食物，喜愛動漫畫、遊戲、程式，以及跟世間脫節的生活步調。

FacebookFanpage NowLoading... RandomPosts Guestbook RecentPosts Comments ::: 聯絡布丁 信箱：[email protected] 提問： 留言板 聯絡時間：週一~週日24小時 BuyMeACoffee(Donate) 如果有幫到您的話，請布丁喝杯咖啡吧！ 進入贊助捐款網頁 Labels (AllLabels) 日記 (235) 輔大圖資 (166) 電腦軟體 (129) 政大圖檔 (113) 期刊論文閱讀 (98) Programming/JavaScript (85) 作品 (84) Blogger (77) 網路管理 (71) 記事 (58) DSpace (56) JavaScript (56) OS/ProxmoxVE (51) 程式寫作 (50) 碩士畢業論文 (47) Proxmox (41) Android (39) OS/Android (37) Presentation (36) OS/Linux (34) DataMining (31) Software/Weka (31) Course (30) Linux (29) 研究方法 (29) 虛擬機器 (29) OS/Windows (26) Software/Zotero (26) Work/Widget (26) Zotero (26) 新玩具 (26) DLLL-CIAS (25) Software/Windows (25) 程式語言/JavaScript (25) 網站服務 (25) Software/GoogleDoc (23) Software/LibreOffice (23) 雲端科技與圖書館行動服務研習班(2014) (23) Programming/PHP (22) 作業報告 (22) 研究所推甄 (19) 演講心得 (18) Windows/電腦軟體 (17) 資訊計量學 (17) Series/BigDataAnalysisCourse (16) 無題 (16) 課程/圖書資訊學研究趨勢 (16) PHP (15) Programming/AutoIt (15) GitHub (14) Programming/R (14) Statistics (14) 圖資學術界 (13) Software/Word (12) 課程/國際檔案學 (12) Series/LibreOfficeCalcTemplate (11) Software/OwnCloud (11) Software/R (11) VirtualMachine/VirtualBox (11) VirtualBox (11) 極短 (11) AutoIt (10) NetBeans (10) Server/ownCloud (10) Software (10) Software/Google (10) Software/NetBeans (10) Zentyal (10) 作業系統/Linux (10) KALS (9) Programing/PHP (9) Programming/PhoneGap (9) Research (9) Research/TextMining (9) 教學課程 (9) 課程/檔案應用研究 (9) 輔漫 (9) GLPI (8) Koha (8) OS/Chromebook (8) OS/Koha (8) Series/NOUWord (8) Software/SPSS (8) Work (8) 政大平價美食 (8) 數位圖書館 (8) CSS (7) OS/Zentyal (7) Plurk (7) Programming/CSS (7) Programming/Node.js (7) Drawing (6) OS/FreeNAS (6) Programming/APP (6) Service/GitHub (6) Software/PostgreSQL (6) Software/PostreSQL (6) Tool/NetBeans (6) VirtualMachine/OpenVZ (6) 報告/教學課程 (6) 發表 (6) 2009詐欺案件 (5) Note/Paper (5) Programming/Electron (5) Programming/Java (5) Programming/Python (5) Software/Firefox (5) Software/Inkscape (5) Work/Windows (5) 評論 (5) 3C (4) IDE (4) Library/ORCID (4) LibreOfficeCalcCourse (4) Programming/Database (4) Programming/SeleniumIDE (4) Programming/Vue.js (4) Research/SequentialAnalysis (4) Selenium (4) Server/OCS (4) Software/Browser (4) Software/Notepad++ (4) Software/PDF (4) Software/Pentaho (4) WebService (4) 博士班考試 (4) 問答訪談 (4) 課程/資訊行為與資訊服務 (4) 讀者服務研討 (4) CKEditor (3) Drupal (3) GAME (3) GoogleAnalytics (3) Hardware (3) Hardware/Notebook (3) OCS (3) Programming/CKEditor (3) Series/WekaImageClassification (3) Server/ApacheSolr (3) Software/Cortana (3) Software/Drupal (3) VirtualMachine (3) 活動籌辦 (3) 演講 (3) 生活/日記 (3) 網站系統/ownCloud (3) 課程/檔案學 (3) 遊戲 (3) 閱讀學習 (3) AngularJS (2) EMAIL-KM (2) GAME/PokemonGO (2) IPFire (2) MachineLearning (2) OS/IPFire (2) OS/pfSense (2) OSSIM (2) Programming/AdonisJs (2) Research/SocialNetworkAnalysis (2) Server/GitLab (2) Software/CWISE (2) Software/Office (2) Software/OpenLiveWriter (2) Software/WordPress (2) Software/mRemoteNG (2) Sponsored (2) VirtualMachine/Docker (2) pfSense (2) ニコニコ動画 (2) 國立政治大學 (2) 圖書資訊學研討 (2) 布丁通信 (2) 技術服務研討 (2) 生活/政大平價美食 (2) 研究方法\序列分析 (2) 研究領域/閱讀學習 (2) 硬體設備 (2) 系統/WordPress (2) 輕小說 (2) 電腦軟體/R (2) 3C/Note8 (1) Auto (1) Hardware/Teclast (1) Linux/WINE (1) Programming/AngularJS (1) Programming/HTML (1) Programming/SVG (1) Programming/Svelte (1) Programming/WebDesign (1) Programming/Webpack (1) Publication/Conference (1) RIME (1) Research/Infometric (1) SecondLife (1) Server/Apache (1) Software/ApacheTika (1) Software/DSpace (1) Software/FileZilla (1) Software/ImageMagick (1) Software/中州韻輸入法 (1) TimemarktoSSA (1) Travel (1) Userscript (1) 國家考試 (1) 國立空中大學 (1) 專題 (1) 課程/計算智能與商業分析 (1) 販售 (1) 資訊管理/網站管理 (1) 電視 (1)