摘要: 語法解釋：
1. $("#select_id").change(function(){//code...}); //為Select添加事件，當選擇其中一項時觸發
2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text
3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值
jQuery設置Select選擇的Text和Value:
語法解釋：
1. $("#select_id ").get(0).selectedIndex=1; //設置Sel  閱讀全文

     摘要: RequireJS 發布 1.0.0 了，很值得關注，看是否有可借鑒之處。
本次比較不涉及具體實現代碼，主要比較兩者的 API 設計。

http://requirejs.org
http://seajs.com

從定位談起

首先，從 requirejs.org 首頁可以得知，RequireJS 的定位是：

RequireJS 是一個 JavaScript 文件和模塊加載器，特別為瀏覽器優化，同時也可運行在 Rhino 和 Node 環境中。

SeaJS 的定位是：

SeaJS 是一個適用于瀏覽器端的 JavaScript 模塊加載器。

不要小看這兩句話，任何類庫/框架的定位，或者說愿景/目標，最終會決定該類庫/框架的方方面面  閱讀全文

     摘要: 語法解釋：
1. $("#select_id").change(function(){//code...}); //為Select添加事件，當選擇其中一項時觸發
2. var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text
3. var checkValue=$("#select_id").val(); //獲取Select選擇的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值
jQuery設置Select選擇的Text和Value:
語法解釋：
1. $("#select_id ").get(0).selectedIndex=1; //設置Sel  閱讀全文

一、有點俗態的開場白

要是兩年前，實現“兼容性的漸變效果”這個說法估計不會被提出來的，那個時候，說起漸變背景，想到的多半是IE的漸變濾鏡，其他瀏覽器尚未支持，但是，在對CSS3支持日趨完善的今天，實現兼容性的漸變背景效果已經完全成為可能，本文就將展示如何實現兼容性的漸變背景效果。在眾多的瀏覽器中，目前不支持Opera瀏覽器。

本文實例效果都是同樣的效果，就是垂直漸變，起始顏色紅色，結束顏色藍色，結束的藍色的透明度是0.5。

二、IE瀏覽器下的漸變背景

IE瀏覽器下漸變背景的使用需要使用IE的漸變濾鏡。如下代碼：

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

相關說明：
上面的濾鏡代碼主要有三個參數，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表橫向漸變，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結尾的色彩。

上面代碼實現的是紅色至藍色的漸變，但是不含透明度變化，這是由于IE目前尚未支持opacity屬性以及RGBA顏色，要實現IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強大，這種強大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

其中各個參數的含義如下：
opacity表示透明度，默認的范圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個可選參數，如果想要設置漸變的透明效果，就可以使用他們來指定結束時的透明度。范圍也是0 到 100。
style用來指定透明區域的形狀特征：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸變透明效果開始處的 X坐標。
starty 漸變透明效果開始處的 Y坐標。
finishx 漸變透明效果結束處的 X坐標。
finishy 漸變透明效果結束處的 Y坐標。

綜合上述，實現IE下含透明度變化紅藍垂直漸變的代碼如下：

.gradient{
    width:300px;
    height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 

progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 

progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}

<div class="gradient"></div>

結果如下圖：

三、Firefox瀏覽器下的漸變背景

對于Firefox瀏覽器下(Firefox 3.6+)漸變背景的實現需使用CSS3漸變屬性，-moz-linear-gradient屬性，在之前文章我詳細介紹了Firefox3.6下漸變背景的實現，您有興趣可以狠狠地點擊這里：CSS漸變之CSS3 gradient在Firefox3.6下的使用 。這里我就不再具體講述了，對于本文開頭提到的要實現的效果的實現可以參見下面的代碼：

.gradient{
    width:300px;
    height:150px;
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

<div class="gradient"></div>

此段代碼在Firefox3.6瀏覽器下的效果是：

四、chrome/Safari瀏覽器下的漸變背景實現

對于webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸變背景的實現也是使用CSS3 漸變方法，css-gradient，具體為-webkit-gradient，使用語Firefox瀏覽器是有一些差異的。我在上上一篇文章對此進行了非常詳細的介紹，您可以狠狠地點擊這里：CSS gradient漸變之webkit核心瀏覽器下的使用 。具體使用就不詳述了，參見下面的代碼：

.gradient{
    width:300px;
    height:150px;
    background:-webkit-gradient(linear, 0 0, 0 bottom,

from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}

<div class="gradient"></div>

此段代碼在Safari 4瀏覽器下的效果是：

補充于2011-04-07
Opera11也支持了CSS3漸變。其用法與Firefox一致，需要使用-o-的前綴。另外，Chrome的漸變用法也開始向FireFox瀏覽器下的用法靠攏。

五、綜合 – 兼容性的漸變背景效果

相關代碼如下：

.gradient{
    width:300px;
    height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 

progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 

progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
    background:red; /* 一些不支持背景漸變的瀏覽器 */
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

<div class="gradient"></div>

效果分別為上面三個分類的截圖。
您可以狠狠地點擊這里：兼容性的漸變背景效果demo

六、結語

CSS3的潛力非常的大，就漸變這一塊可以創建很多精湛的UI效果，而以往這些效果都只能使用圖片實現。CSS漸變背景的實現可以有效降低網頁的圖片數，也就是降低了HTTP請求，是非常受用的。但是IE瀏覽器一直蹲在茅廁邊啃雞腿——自以為美味，得使用資源消耗很高的濾鏡才能實現漸變效果。所以，目前而言，漸變背景的的應用與否還是有待于利弊權衡的。

 

來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
原文地址： http://www.zhangxinxu.com/wordpress/?p=743

     摘要: 本文會給你們展示50個jquery代碼片段，這些代碼能夠給你的javascript項目提供幫助。其中的一些代碼段是從jQuery1.4.2才開始支持的做法，另一些則是真正有用的函數或方法，他們能夠幫助你又快又好地把事情完成。如果你發現你任何可以做得更好的地方的話，歡迎把你的版本粘貼在評論中!1. 如何修改jQuery默認編碼（例如默認UTF-8改成改GB2312）： $.ajaxSetup({ a...  閱讀全文

 

函數節流技術的主要思路是，通過一個定時器，阻斷連續重復的函數調用。對于我們自己內部使用的函數，這通常意義不大，也不推薦使用這個技術，它可能會丟失對某些數據的處理。但是對于在用戶界面調用的函數，卻非常有意義。例如一個 mousemove 或者 IE 中 resize 事件的監聽函數。

這類事件監聽函數往往伴隨著兩個主要特征：1. 短時間內連續多次重復觸發 ; 2. 大量的 DOM 操作。眾所周知，DOM 操作對內存和 CPU 的開銷是比較大的，特別是當同時滿足特征1時，往往給瀏覽器造成不小的壓力。函數節流技術的意義在于在用戶察覺范圍外，降低函數調用的頻率，從而提升性能。

這個技巧的大概模式如下面這樣：

 1 var processor = {
 2     timeoutId: null,
 3                    
 4     performProcessing: function(){
 5             // 要執行的代碼
 6     },
 7 
 8     process: function(){
 9         clearTimeout(this.timeoutId);
10         this.timeoutId  = setTimeout(function(){
11             processor.performProcessing();
12         }, 100);
13     }
14 };
15                    
16 //調用
17 processor.process();

performProcessing 是真正要調用的函數，而程序的入口在 process，每次進入 process，真正要調用的函數 performProcessing 都會被延遲 100 毫秒執行，如果在此期間，process 再次被調用，則會重置前一次的計時器，重新開始計時，這樣保證了 performProcessing 中的代碼至少要間隔 100 毫秒才會被執行一次，原理非常的簡單，下面這個函數也是利用這個原理，通過閉包達到了同樣的目的，它接受兩個參數，第一個是要真正要執行的函數，第二個是間隔的時間。

function throttle(fn, delay) {
    var timer = null;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
        fn.apply(context, args);
    }, delay);
  };
}

---

另外，有人為 jQuery 寫了相同功能的插件：點擊這里傳送到 jQuery plugins

Google Closure Library 也有類似的 API：點擊這里傳送到 Google Code