javascript list all the plugins installed in the browser

取得瀏覽器安裝的所有插件

有時需要判斷瀏覽器安裝那些第三方插件,比如:VLC、Flash Player、PDF Viewer等等,藉以作後續的動作,比如說沒有Flash Player引導user安裝,下面這程式就非常有用:

navigator.plugins

會返回一個已安裝plugin的數組

輸出:

參考:

取得某一Plugin版本:

參考:

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ,雖然jQuery跟CSS選取器(selector)有很多相似之處,但還是有些差異,在CSS中要在重複元素中獲取一個元素是用偽類  :nth-child(2)

比如說我要指定定 Apple 的樣式為紅色:

我們可以這麼做,都可以達到相同效果:

同場加映

除了 :nth-child()還有其他用在取得元素的偽類,都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料:

jQuery get query values from url 取網址參數

本篇使用 jQuery方法, 若覺得jQuery的方法很大包,可參考本站另一篇

javascript get query values from url 取網址參數

QueryString.js

把第一段的程式碼放到一個名叫 QueryString.js 的檔案,以後需要時再去引入這支檔案就可。

用法:

參考資料:

jQuery 確認是否擁有某一標籤屬性

jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在,所以透過下面代碼來檢查

此代碼優點在於可檢查屬性是否存在,並檢查是否為空值

 

 

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/

網頁前端 framework 整理

Bootstrap 4 alphahttp://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

bootstrap 3 v3.3.7
http://getbootstrap.com/

bootstrap 3 v3.3.1 (中文)
https://kkbruce.tw/bs3/

Foundation for Sites 6
http://foundation.zurb.com/

Google Material design

Polymer Paper Elements Paper elements
https://elements.polymer-project.org/

解決 WordPress 無法使用 jQuery 問題

設計WordPress主題或插件開發時,常會需要使用jQuery,WordPress其實很貼心的已經載入jQuery,但實際使用時發現,原本可以跑的jQuery程式,放進WordPress卻不能跑了,才知道原來WordPress的jQuery要這樣寫。

 

WordPress 頁面中,確實看到 jQuery 已載入

頁面中加入一段測試碼

理論上應該是會順利看到 hello 對話框,但是沒有

 

解決方法:

主要是jQuery寫法的問題,選擇器不能使用習慣的簡碼 $ 符號,而要用下面這兩種寫法,
順利看到hello 對話框

本文出自:https://v123.tw

jQuery slideLeft

slideLeft

Javascript for each in 做到跟PHP foreach 一樣的使用方式

//先宣告物件
var myobj = new Object();

//給物件的屬性值
myobj.color = ‘red’;
myobj.name = ‘hsin’;
myobj.nation = ‘taiwan’;

//這邊展現如何用for – in 取出。
var content=”;
for(var key in myobj){
       content +=”屬性名稱:”+ key+” ; 值: “+myobj[key]+”n”;
}

alert(content);

出處:四處流浪的阿基

jQuery selector 替代萬用字元 模糊查找元素

jQuery selector 替代萬用字元 模糊查找元素

HTML:

jQuery:

Demo Download 範例下載: