querySelector – javascript的查詢選擇器

在有 jQuery 環境下, 操作選擇器很直覺, 不過沒有 jQuery 時, 如何進行相關的作業呢? 以下幾組為可能會用到的指令:

  1. document.getElementById 指定 id 來取得該物件 (唯一)
  2. document.getElementsByTagName 指定 html tag 來取得該物件陣列 (通常為多個)
  3. document.getElementsByClassName 指定 class name (可多組 class name 一起) 來取得該物件陣列 (通常為多個)
  4. document.querySelector 使用 css selector 來取得該物件 (注意, 僅傳回符合條件的第一筆)
  5. document.querySelectorAll 使用 css selector 來取得該物件陣列 (符合條件的多筆)

當物件被選擇出來後, 就可以進行操作了, 操作的方式可以再參考這裡:

http://www.w3schools.com/jsref/dom_obj_all.asp

在沒有 jQuery 的狀況下, 也能順利選擇物件, 並進行操作了.

分類
好用軟體

很好用的javascript除錯工具FireBug (firefox)

firefox extesion tools好用的不少, 在一個偶然的機會, 發現有個對 javascript除錯相當好用的工具, FireBug.

原來在firefox內建的javascript console就已經能提供相當多的資訊應用於javascript有錯誤時的除錯, 然而, firebug更強捍的地方有

分類
好用軟體

超強的Web Developer extension功能(firefox)

先下載 firefox:
http://www.mozilla.com/firefox/

之後再安裝
https://addons.mozilla.org/firefox/60/

接下來就是很強的功能介紹了, 一般我們在寫 client side 的 html, javascript這些tag或script, 最麻煩的就是debug的部分, 然而, 用 firefox 加上一個 web developer extesion 後, 你會發現一切都改觀了, 無論是 form 的變數, input text 密碼顯示, 長度取消, readonly 改為可寫入, 隨時修改html source改變顯示結果, cookie 變數, 變數值, div, iframe 等區域顯示, javascript 除錯, validation css 及html的功能, 都可以很容易的在一個瀏覽器內實現, 果然名如其功能, 就是好用的 [web developer]. 無論是程式設計人員或是網頁美工人員, 都是不可或缺的一個好工具. 不過 firefox 就是 layout 和 ie 不太一樣, 為了滿足廣大 ie 的用戶, 建議是搭配 firefox 寫 html及script配合 ie preview, 應該是最理想的方式囉….

 

另外像是 ie 常常會有 view source 時的問題(開不起來)的這種狀況, 在 firefox 是不會發生的, 而且source還會有美觀的字型顏色來呈現, 方便寫 code 的人看哦.