POSTS

jQuery 1.4 研究與報導 之個人見解（二）

New .toArray() method

.get()用來轉換陣列,將被移除.
jQuery1.4 請使用.toArray() 不用帶入參數可以自動解析.

jQuery() returns empty set

在舊版jQuery1.3 jQuery() 會回傳整個結構函數.
jQuery1.4 將改善此現象 回傳一個空函數.
PS:保留jQuery().ready() 和 jQuery(function(){}).

jQuery(“TAG”)

快數透過TAG目標定義選取.

CSS

The performance of the .css() method has seen a 2x performance improvement.
.css()速度大幅增長2倍,請看官方圖表.

The performance of the .addClass(), .removeClass(), and .hasClass() methods has seen a 3x performance improvement.
.addClass().removeClass().hasClass()速度大幅增長3倍,請看官方圖表.

.toggleClass() can toggle multiple classes
.toggleClass()現在可以針對多個CLASS.

Data

.data() returns Object and .data(Object) sets the object.
現在.data()回傳為物件並且使用.data(Object) 去設定更改變更.

.data()(no longer returns the unique ID assigned to the node)

Effects

Per-property Easing
線在特效可以更快速的依照個人定義去效果.

$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("





  Animation complete.




");
  });
});

Events

New Method: jQuery.proxy()
新函數jQuery.proxy()確保變更目標時傳入含數做替代品.

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

Event Multi-binding
快速個別定義各種對作事件.

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

`change` and `submit` events normalized
`change` and `submit`兩個事件已經修改跨平台的相容性.

New events: `focusin` and `focusout`
新的事件可用`focusin` and `focusout`

All Events Can Be Live Events
除了ready, focus ,blur 其他都可以用live().
並且.live()可以使用data 物件.

live/die now work with context
live/die 現在支援 context

Make sure ready event has body at least
如需事件正常 document.body 必須存在.

Unload is sped up in non-IE browsers that don’t need memory leak hand-holding.
unload速度更快~在非IE瀏覽器不會去檢查清除Memory Leak.

Manipulation

Performance of .append(), .prepend(), .before(), and .after() has been improved.
.append(), .prepend(), .before(), .after()效能些許增強.(參考官方圖表)

Performance of .html() has been improved by nearly 3x.
.html() 效能強致3倍.(參考官方圖表)

Performance of .remove() and .empty() has seen over a 4x speed increase.
.remove() .empty()效能強致4倍.(參考官方圖表)

New Method: .detach()
新的.detach() 移除目標但不移除事件.
範例將foo 設定CLICK事件後.detach()再把它放回body.

var foo = $("#foo").click(function() {
    // do something
});
foo.detach();
// foo retains event handlers
foo.appendTo("body");

New unwrap() method
新的.unwrap() 移除目標tag.
範例將DIV移除.
</p> <pre lang="html"> <body> <div> <p>annie</p> <p>davey</p> <p>stevie</p> </div> </body> </pre> <pre lang="javascript">$('div').unwrap();</pre> <pre lang="html"> <body> <p>annie</p> <p>davey</p> <p>stevie</p> </body> </pre> <p>

Caching in domManip
內部函數domManip加入對 node dom的Cache機制,加快slelect速度.

before, after, replaceWith on disconnected nodes
現在before, after, replaceWith在非DOM的NOD也可使用了.

.clone(true) also clones data
現在.clone(true).也飽含拷貝date() 陣列及物件.但不包含自訂的物件.

.offset( coords | Function )
現在可以針對DOM元件取的目前的OFFSET大小或指定大小.

Queueing
New .delay() method
一般常用的延遲 .delay(1000)單位一樣ms

Queue next
Queue提供next()可以直接跳到下個Queue做動作.

.clearQueue()
清掉目前的Queue.

Selectors
增強改進 “#id p”對ID得速度.

.index(), .index(String)
.index()可以更快速直覺使用.
取的

// get the index of the first 


  • 
  in relation to its siblings:
  $("li.current").index()

    • 取的特定 

    // get the index of the 


    
  in relation to all 
  
  
    
    elements:
    $("#more-info").index("h3")
    <p>
  <strong>New .has() method </strong><br />
  新.has() 方法.
</p>


<pre lang="javascript">$("ul").has("li").addClass("full");


    <p>
  <strong>New .nextUntil(), .prevUntil(), .parentsUntil() methods</strong><br />
  新<code>.nextUntil(), .prevUntil(), .parentsUntil()</code>可做向前向後貨目標內的搜尋.
</p>


<p>
  <strong>.add(String, Element) .closest(filter, DOMElement) </strong><br />
  <code>.add().closest()</code>第二參數支援context.
</p>


<div class="wp_plus_one_button" style="margin: 0 8px 8px 0; float:left; ">
  <g:plusone href="https://blog.sd.idv.tw/archives/159" callback="wp_plus_one_handler"></g:plusone>
</div>
    comments powered by Disqus