Category Archives: jQuery

[jQuery](function($))(jQuery) 與 document.ready的不同

這是個常令人confused的東西,常常會搞不清楚區別在哪裡

$(function)

以上兩個是相同的意思,意指在DOM tree載入完成後再執行方法 這個方式主要是用在前端UI要操作DOM tree時使用,但無法回傳任何jQuery相關物件

(function($))(jQuery)

這個方式主要是用在jQuery plugin,實際上是執行了一個匿名的function並回傳jQuery物件,當jQuery載入完成後便會開始執行,但無法操作DOM tree

Continue Reading

[jQuery]Modernizr

Modernizr是一套 JavaScript 函式庫,用來偵測瀏覽器是否支援像HTML5與CSS3等技術

使用之前,要先引入Modernizr的js和jQuery

Modernizr常見用法有兩種,一種是透過Javascript利用Modernizr的物件判斷是否支援

另一種則是透過Modernizr插入的class,透過CSS來處理是否支援

Continue Reading

[jQuery]滑出式選單

若要使用一般所看到的滑出式選單,只要透過mouseover和mouseleave這兩個event再配合animate就可以完成

例如: HTML

CSS

Javascript

Continue Reading

[jQuery]Masonry

Masonry 是用來製作瀑布流版型的套件

基本使用方法 HTML

Javascript

如果有讀入圖片,可以使用imagesLoaded的plugin

更多細部設定可以參考官方文件

Continue Reading

[jQuery].data()

在HTML5中,開發者可以自行在標籤上定義data-元素

例如

而jQuery也提供了.data()這個函式,可以直接取得自訂data-值

Continue Reading

[Javascript]Backbone.js

Backbone.js 是一個 Javascript Framework,它提供了簡單的view和model的使用,讓程式碼看起來比較不會髒亂,開發者也比較好維護。另外Backbone.js不是MVC的Framework,因為並沒有controller。

Backbone.js跟jQuery搭配操作DOM Tree,在使用上也還算方便

Backbone.js主要有以下四種類別:

Model View Router Collection

使用Backbone.js

Model:存放資料的類別,同時也可以綁定一些資料異動時的事件 基本Model操作:

Model event控制

View:用來代表HTML中所指定的區塊,並針對初始化其事件做設定 View的操作 HTML:

View(將上段HTML建成View)

Model

產生View Object並傳入Model

View 載入 template HTML

View

View 載入 template(加入動態參數) HTML

View

Router:能針對不同的 fragment 給予相對應的callback function Router基本操作 HTML:

Javascript

Collection:可以當成Model的陣列 Collenction用法

fetch部份也可以透過success和error參數做一些操作

其他用法 傳入參數物件

JSONP用法(重新定義fetch)

Continue Reading

[jQuery]自訂jQuery plugin

平常都會使用網路上所釋出的jQuery plugin,像這樣:

如果是自己的功能要一直重複使用的話,做成plugin會比較方便,維護容易,使用上彈性也比較高

最精簡的jQuery plugin主要有兩個部份要處理 1.用jQuery.fn註冊plugin名稱 2.定義回傳function的動作

例如

使用

加入click事件

設計可以自行傳入設定的plugin

使用

新增參數

使用

另外一個簡單的plugin範例

使用

Continue Reading

[jQuery]透過JSONP完成跨站請求

Javascript因為安全性的問題,是無法做跨站(cross-domain)請求的

如果要顯示一些非同步且跨站的資訊,通常都會使用iframe

但是有個例外,透過script標籤裡的src元素可以引用外部網站的資源(例如jQuery)

其實這就是透過JSONP(JSON with Padding)傳輸的,將JSON資料填入Padding(Padding就是要呼叫的函式)

JSONP使用方法需要配合url?jsoncallback=handler的參數

以下為透過jQuery.ajax跨站請求範例 Server端 test.php回傳以下資料(在一個Handler中產生一組JSON)

Client端

另外也可以詳細去定義ajax

PS:如果需要同時使用數個ajax去取得資料,callback function名稱不要設成一樣的,不然會產生callback function not found錯誤,或者直接使用jsoncallback=?並把jsonpCallback參數拿掉,jQuery就會自動產生亂數的callback

也可以使用jQuery.getJSON

若使用動態產生的callback name,負責產生json的程式就不能寫死

Continue Reading