2013年12月17日 星期二

Jquery 常用方法紀錄

  $("form#selector).find()形式
  選取特定form底下的特定元素
   $("form#Form的id").find("#元素的id")

 $(selector).find()形式:
  選取特定class下的特定元素: $(".ClassName").find("#元素的id")
  選取特定id下的特定元素:$("#id").find("#元素的id")

 $(selector).each()形式:
 取得符合過濾器的集合後,按照自己的需求對集合中每一個元素做處理,此方法使用頻率很高,而且在做動態處理元素集合時很好用。
下面一個範例程式是要取出一個div中的所有分隔線,並加總所有分隔線高度
$("#divChannel .DIV_Spliter1").each(function(index){
   splitHeight+=$(this).outerHeight();
   }); 

$(selector).animate({CSS屬性},duration, function(){ });  
CSS屬性:
對選出的元素進行設定的動畫效果,由css去指定如height、width或opacity等屬性,讓元素有變高、變寬或是變透明等效果。
例如想讓一個Div元素向左移動如下設定,表示每次往左移動50px
$("#div1").animate({
             left : "+=50px"
})
duration屬性:
此屬性是指要用多少時間去完成一個動作,單位是毫秒milliseconds。例如上面的例子可以再接著設定duration=200,來指定動畫要在200毫秒內完成。
$("#div1").animate({
             left : "+=50px"
},200)
同時,duration也可以以字串代替,"slow"=200毫秒,"fast"=600毫秒。
function(){}:
為animate指定一個callback function,也就是當動畫執行完畢後,最後會去執行的方法,例如:
$("#div1").animate({
             left : "+=50px"
},200, function(){ alert("done")} )
在向右移動完50px後,顯示"done"訊息。

.stop([clearQueue][,jumpToEnd])
clerarQueue參數:當一個元素有一個以上的動畫在queue中等待執行,當clearQueue設為true時,除了當前的動畫行為立刻停止之外,在queue中等待執行的動畫也會被清空,
clearQueue預設為false
jumpToEnd參數:設為true時,會立刻將目前正在執行的動畫執行完畢,若是在執行物件的移動時,就有如瞬間移動的效果,jumpToEnd預設為false

實務上,animate會配合.stop來搭配使用,以讓動畫看起來不會有延遲的情況,例如要做一個有下拉及收回的Div選單,若不加stop,則連續多按幾次,即可看出延遲效果
$("#div1").click(function()
  $( this ).slideToggle();
});
加入stop,因為會先立刻停止當前正在執行的動做,並執行下一個動作,因此就算連續按好幾下,也不會有延遲效果的問題。
$("#div1").click(function()
  $( this ).stop().slideToggle();
});

ps:在測試slideToggle時,同時發現疑似 jquery-1.4在slideToggle的bug,當執行上述的jquery指令時,若連續觸發數次click,則隨著div1連續執行.stop().slideTogge(),會發現div的高度會一次比一次還要低,最後幾乎看不到,但當我將jquery套件換成 jquery-1.8.3後,此問題即不存在。
經過我的追查,此問題在官網上有公布已經修正的版本為1.7,原文如下:

Toggling Animations Work Intuitively

In previous versions of jQuery, toggling animations such as .slideToggle() or .fadeToggle() would not work properly when animations were stacked on each other and a previous animation was terminated with .stop(). This has been fixed in 1.7 so that the animation system remembers the elements’ initial values and resets them in the case where a toggled animation is terminated prematurely.
文中即說明slideToggle()與fadeToggle配上stop()時皆會有類似的問題發生,會發生我所說的:當連續觸發
$(selector).stop().slideToggle()時,展開的高度一次比一次還低,是因為 jquery沒有將元素的初始高度正確的紀錄下來並在每次觸發slideToggle()時重設高度為原始高度。


好用的Jquery 功能查詢與線上測試網站
W3C_Jquery_原始碼測試:除了有中文(簡體)功能解說外,還可直接線上編輯jquery代碼並測試
Jquery 官網:有最新版Jquery與 API可供下載與查詢
Jquery UI套件:可下載最新的Jquery UI套件與線上測試