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倍,請看官方圖表.
Read More

一堆 width / height

(引用 http://blog.ericsk.org/archives/776#more-776)

記錄一下,以後可以方便自己查詢。

在寫 JavaScript 時最煩的就是計算畫面或是頁面的大小,但是每家瀏覽器提供的內容都不太一樣,所以我就針對幾個瀏覽器(IE, Firefox, Safari, Opera)共同支援的 attr 來寫個簡單的 cheat sheet:

  • document.body.client{Width, Height}
    用來取得目前瀏覽器視窗內頁面區域的 width, height,也就是不含工具列的部份。
  • document.body.offset{Width, Height}
    IE, Opera, Safari: 瀏覽器可視區域大小(同 clientWidth)。
    FF: body 的大小,若無特別指定,寬會隨著瀏覽器的可視區域更改。
  • document.body.scroll{Width, Height}
    IE: body 的大小,若無特別指定,寬會隨著瀏覽器的可視區域更改。
    FF, Opera, Safari: 若可視區域 小於 body 大小,則是 body 大小,否則是可視區域大小。
  • document.documentElement.client{Width, Height}
    IE: (0, 0)
    FF, Opera, : body 的大小。
    Safari: 可視區域大小。
  • document.documentElement.offset{Width, Height}
    IE, Safari: 可視區域大小。
    FF, Opera: body 大小。
  • document.documentElement.scroll{Width, Height}
    IE: 可視區域大小。
    FF, Opera, Safari: 同 document.body.scroll{Width, Height}

看起來,大家都自己 implement 得很開心嘛…完全找不到規則 Orz

使用Js來讓IE支援png圖片透明效果

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
    if ((version >= 5.5) && (version < 7) && (document.body.filters))
    {
       var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
    var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
    var imgTitle = (myImage.title) ?
               "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
    var imgStyle = "display:inline-block;" + myImage.style.cssText
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + myImage.width
                  + "px; height:" + myImage.height
                  + "px;" + imgStyle + ";"
                  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
    myImage.outerHTML = strNewHTML
    }
}

使用方法 :

在模板的<HEAD> 段裡加上[注意你的路徑.]

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

在要透明的 png 的地方格式為:

<img src="xyz.png" alt=" "foo"

width=“10″ height=“20″ onload=“fixPNG(this)">注意, 你的圖片的高與寬是不能去掉的! 就是多了 onload="fixpng(this)" 而已.
嘿嘿, 不詳細? En好的話看這裡 :http://homepage.ntlworld.com/bobosola

javascript正則表達式中用於replace

正則表達式我經常用,但是用的都是最基礎的,基本上都是用於驗證一個字符串的合理性。例如:

var m="12345″;

var n=/^\d+$/;

if(n.test(m)) alert(‘ok’);

今天看了一個關於replace方法中用正則的例子,很有價值,可以輕鬆的實現諸如lenb和trim方法。

我想總結的不是這個,而是在replace中模式與$的替換,例如:

var m=eval(“/(northsnow)+/g");

var n="i am northsnow,I come from Jilin";

var t=n.replace(m,"<b>$1</b>");

alert(n);

則 得到:i am <b>northsnow</b>,I come from Jilin";

括號裡面的模式匹配的結果會被提取出來放到$變量中,$1存儲第一個模式的匹配,$2存儲第二個模式的匹配,以此類推。

例如:

var m="northsnow is a good man";

var n=m.replace(/(\s)([a-z]+)/g,"$1″)

得結果:northsnow

var n=m.replace(/(\s)([a-z]+)/g,"$2″)

得結果:northsnowisagoodman

另外,還有一個\num可以用,這裡邊的num是一個整數,表示將第num個模式拿過來放到這裡。

如果(.)\1表示連續重複的兩個字符。

如果(.)\d*\1 表示有兩個相同的字符,中間夾了n個數字,n>=0

具體就不舉例子了。只要掌握了技巧,那麼就靠實踐來積累經驗了。