2013年7月30日 星期二

jQuery 樣式表操作

.addClass() 增加樣式類別
.removeClass() 移除樣式類別
.hasClass() 是否有指定的樣式類別
.toogleClass() 切換樣式類別
.css() 取得或設定指定的樣式

jQuery 屬性操作

.attr() 取得或設定屬性
.removeAttr() 移除屬性
.prop() 取得或設定屬性
.removeProp() 移除屬性

.attr()和.prop()的差異在1.6版本
對於bool值的屬性,例如checked, disabled, readonly, selected...,用prop會比較合適

2013年7月29日 星期一

jQuery 移除元素

.detach() 移除符合指定的選擇器元素,包含選擇器本身
被移除的元素原本繫結的事件,還原回去後並不會消失
.empty() 移除符合指定的選擇器元素,不包含選擇器本身
被移除的元素原本繫結的事件,還原回去後並不會消失
.remove() 移除符合指定的選擇器元素,包含選擇器本身
被移除的元素原本繫結的事件,還原回去後會消失
.unwrap() 移除符合指定的選擇器外層元素

jQuery 替換元素

.html() 在符合指定的選擇器元素內容中,取得或設定HTML結構
.text() 在符合指定的選擇器元素內容中,取得或設定純文字內容
.replaceWith() 將符合指定的選擇器元素,用指定的HTML結構取代
.replaceAll() 和replaceWith的效果一樣,差別在於主要的處理對象是新建的新元素
可以做串接的函式處理後,再取代符合的選擇器元素

jQuery 附加元素

.append() 將HTML結構插入到符合指定的選擇器內容的尾端
.appendTo() 和append的效果一樣,差別在於主要的處理對象是新建的新元素
可以做串接的函式處理後,再插入符合的選擇器內容尾端
.prepend() 將HTML結構插入的符合指定的選擇器內容的前端
.prependTo() 和prepend的效果一樣,差別在於主要的處理對象是新建的新元素
可以做串接的函式處理後,再插入符合的選擇器內容前端

jQuery 插入元素

.after() 將指定的元素插入每一個符合的選擇器後面
.insertAfter() 和after的效果一樣,差別在於主要的處理對象是新建的新元素
可以做串接的函式處理後,再插入符合的選擇器後面
.before() 將指定的元素插入每一個符合的選擇器前面
.insertBefore() 和before的效果一樣,差別在於主要的對象是新建的新元素
可以做串接的函式處理後,再插入符合的選擇器前面

jQuery 包裝元素

.wrap() 每一個符合指定的選擇器元素都被封裝到指定的HTML結構中
.wrapAll() 將所有符合選擇器的元素封裝在一個指定的HTML結構中
.wrapInner() 每一個符合指定的選擇器元素內部都封裝一個指定的HTML結構

2013年7月25日 星期四

jQuery 滑鼠事件

.click() 在元素上單擊左鍵
.dblclick() 在元素上雙擊左鍵
.hover() 進入和離開元素時觸發
.mousedown() 在元素上按下滑鼠按鍵
.mouseenter() 進入元素時觸發
.mouseleave() 離開元素時觸發
.mousemove() 在元素上移動時觸發
.mouseout() 離開元素時觸發
支持Bubble Up
.mouseover() 進入元素時觸發
支持Bubble Up
.mouseup() 在元素上放開滑鼠按鍵

jQuery 鍵盤事件

.keydown() 按下鍵盤
.keypress() 壓住鍵盤
.keyup() 放開鍵盤

jQuery 事件繫結

.bind() 為一個元素綁定一個事件處理
執行多次會重覆綁定
動態生成元素綁定事件會有先後問題
.unbind() 從元素上移除一個之前綁定的事件處理
.live() 附加一個事件處理器到指定選擇器的元素上
version deprecated:1.7, remove:1.9
.die() 從元素移除之前用.live()綁定的事件
version deprecated:1.7, remove:1.9
.delegate() 指派事件處理
利用事件的Bubble Up特性,在上層元素掛上事件處理
V1.4.2以上適用
.undelegate() 解除事件指派
V1.4.2以上適用
.on() 繫結事件
v1.7以上適用
.off() 解除事件
v1.7以上適用
.trigger() 觸發事件
.one() 在元素上綁定一個事件處理函式
該處理函式只會執行一次,然後刪除自已

2013年7月19日 星期五

jQuery 自定義效果

.animate() 自訂動畫效果
.queue() 動畫效果只能影響數值效果
如要在動畫中改變非數值效果需放入佇列中執行
.dequeue() 繼續執行佇列之後的效果
.clearQueue() 移除佇列
.delay() 延遲效果
.finish() 結束動畫效果
.stop() 停止動畫效果

2013年7月15日 星期一

jQuery 滑動效果

.slideDown() 滑動顯示效果
.slideUp() 滑動隱藏效果
.slideToggle() 切換滑動顯示隱藏效果

jQuery 漸變效果

.fadeIn() 淡入效果
.fadeOut() 淡出效果
.fadeTo(duration, opacity) 切換透明度
.fadeToggle() 切換淡出淡入效果

jQuery 基礎效果

.hide() 隱藏元素
.show() 顯示元素
.toggle() 切換顯示隱藏元素

jQuery 內容過濾語法

內容過濾語法
範例 說明
:contains(foo) 包含foo文字的元素,區分大小寫
:empty 選取沒有子節點的元素
:has(E) 選取有E為子元素的元素
:parent 選取有子節點的元素
:hidden 選取隱藏元素
:visible 選取可見元素

jQuery 表單元素語法

表單元素語法
範例 說明
:button 任何按鈕,包含button、submit、reset
:checkbox 核取方塊元素
:checked 已核取的核取方塊或單選鈕
:disabled 已停用的表單元素
:enabled 可啟用的表單元素
:focus 按鈕
:file 選取所有檔案元素
:image 選取所有圖片元素
:input 選取所有輸入元素,包含text、select、textarea、button
:password 選取密碼元素
:radio 選取單選鈕元素
:reset 選取重置按鈕
:selected 選取被選取的選項
:submit 選取發送按鈕
:text 選取文字元素

jQuery 子元素過濾語法

子元素過濾語法
範例 說明
:first-child 第一個子元素
:first-of-type 同級元素之間的第一個相同的元素
:last-child 最後一個子元素
:last-of-type 同級元素之間的最後一個相同的元素
:nth-child(n) 第n個子元素且為指定的元素
:nth-last-child(n) 倒數第n個子元素
:nth-last-of-type(n) 倒數第n個指定的子元素
:nth-of-type(n) 第n個指定的子元素
:only-child 只有一個子節點的元素
:only-of-type 同級元素之間只有一個子節點的元素

2013年7月12日 星期五

jQuery 位置過濾語法

位置過濾語法,從一個位置索引從0開始計算
範例 說明
:first 第一個元素
:last 最後一個元素
:odd 奇數元素
:even 偶數元素
:eq(n) 第n個元素
:gt(n) 大於第n個元素
:lt(n) 小於第n個元素
:not() 反向選擇
:header h1~h6標題元素
:animated 正在執行動畫效果的元素

jQuery 屬性選擇器

屬性選擇器
範例 說明
$("E[A]") 具有A屬性的元素E
$("E[A='V']") 具有A屬性的元素E,且值為V
$("E[A^='V']") 具有A屬性的元素E,且值開頭為V
$("E[A$='V']") 具有A屬性的元素E,且值結尾為V
$("E[A*='V']") 具有A屬性的元素E,且值內容包含V
$("E[A!=V]") 具有A屬性的元素E,且值內容不等於V
$("E[A|='V']") 具有A屬性的元素E,且值內容的前綴為V或是V-
$("E[A~='V']") 具有A屬性的元素E,且用空格分隔的值中有V
$("E[A1='V1'][A2='V2'][A3='V3']...") 具有A屬性的元素E,且屬性符號多重串接

jQuery 層級選擇器

層級選擇器
範例 說明
$("E F") 後代選擇器,找出在E元素的所有子元素裡面的所有F元素
遞迴子元素的子元素,效率較差
$("E>F") 子代選擇器,找出在E元素的第一層子元素中的所有F元素
只找子元素,效能較佳
$("E+F") 毗鄰選擇器,E元素之後同層級的第一個F元素
$("E~F") 鄰後選擇器,E元素之後同層級的所有F元素

jQuery 基本選擇器

基本選擇器
範例 說明
$("*") 選取所有元素
("#id") 符合id名稱的元素,因為id是唯一值,所以效能會比較好
$(".C") 符合CSS類別名稱C的所有元素
$("E") 符合E標籤的所有元素

2013年7月2日 星期二

2013年7月1日 星期一

Json.Net 日期處理

Json.Net 序列化的日期格式,在4.5版之前是Microsoft Date Format:"\/Date(ticks)\/"
4.5版之後,預設的日期格式已經改成ISO 8601 standard
可以透過JsonSerializerSettings的方式來指定序列化的格式
反序列化的時後會自動識別不需另外指定

另外還有一種JavaScript格式,需要透過指定JavaScriptDateTimeConverter來轉換
反序列化的時後也需要明確指定,否則會出現錯誤

DateTime d = DateTime.Now;

Console.WriteLine("datetime:{0}\r\n", d);

// ISO8601的格式
string jsonString1 = JsonConvert.SerializeObject(d);
Console.WriteLine("ISO8601 Date Format:{0}", jsonString1);
DateTime d1 = JsonConvert.DeserializeObject<DateTime>(jsonString1);
Console.WriteLine("datetime:{0}, kind:{1}\r\n", d1, d1.Kind);

// Microsoft Date Format
string jsonString2 = JsonConvert.SerializeObject(
    d, 
    new JsonSerializerSettings() 
    {
        DateFormatHandling = DateFormatHandling.MicrosoftDateFormat 
    });
Console.WriteLine("Microsoft Date Format:{0}", jsonString2);
DateTime d2 = JsonConvert.DeserializeObject<DateTime>(jsonString2);
Console.WriteLine("datetime:{0}, kind:{1}\r\n", d2, d2.Kind);

// JavaScript Date Format
string jsonString3 = JsonConvert.SerializeObject(d, new JavaScriptDateTimeConverter());
Console.WriteLine("JavaScript Date Format:{0}", jsonString3);
DateTime d3 = JsonConvert.DeserializeObject<DateTime>(jsonString3, new JavaScriptDateTimeConverter());
Console.WriteLine("datetime:{0}, kind:{1}\r\n", d3.ToLocalTime(), d3.Kind);

Console.ReadLine();

執行結果

ISO8601格式需要ECMAScript 5才能支援,瀏覽器的版本可以參考ECMAScript 5 compatibility table
打開一個Chrome的主控台並輸入以下幾行指令
// 建立一個ISO8601格式的日期資料
d = {"today":"2013-07-01T15:21:47.6748196+08:00"};
// 日期會被當成字串
d.today;
// 直接使用new Date得到日期
new Date(d.today)

執行結果