經驗分享：10個簡單實用的 jQuery 代碼片斷

　　儘管各類 JavaScirpt 框架和庫層出不窮，jQuery 仍然是 Web 前端開發中最經常使用的工具庫。今天，向你們分享我以爲在網站開發中10個簡單實用的 jQuery 代碼片斷。
您可能感興趣的相關文章
精心挑選12款優秀 jQuery Ajax 分頁插件
分享60款絢麗的 jQuery 幻燈片插件下載
分享8款效果精美的 jQuery 加載進度條插件
期待已久的2012年度最佳 jQuery 插件揭曉
精心挑選的優秀 JavaScript 日曆和時間插件

 
平滑滾動到錨點 　　這個功能很常見，在網站底部添加一個讓訪客快速回到頁面頂部的功能，下面是實現這個功能的示例代碼：

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>

$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

縮放圖片 　　雖然圖片應該在服務器端縮放，不過若是服務器端未作縮放，須要再客戶端縮放的時候，可使用下面這個方便的代碼片斷：

$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
    
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

滾動時自動加載內容 　　不少網站使用了流行的瀑布圖佈局，這種類型的網站在頁面滾動的時候會自動加載內容。下面這段代碼讓你可以把這個功能搬到你的網站上。

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});

$(document).ready(function() {
    $('#loaded_max').val(50);
});

檢測密碼強度 　　在表單功能中，常常會有檢測用戶輸入的密碼強度的功能，下面這個代碼片斷使用正則表達式來檢測密碼是否足夠安全，固然記得在服務端也進行表單驗證。

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

均衡元素的高度 　　使用純 CSS代碼實現均衡元素的高度比較困難，而下面這段 jQuery 代碼會根據最高的元素來均衡全部的 Div 元素。

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

修復 IE6 PNG 問題 　　至今，IE6 在國內仍然佔據了大量的份額，所以在 Web 開發中仍然須要考慮 IE6 的兼容問題。比較經常使用的 IE6 PNG 圖片問題，下面這段代碼能夠方便的修復。

$('.pngfix').each( function() {
   $(this).attr('writing-mode', 'tb-rl');
   $(this).css('background-image', 'none');
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

解析 JSON 字符串 　　使用 jQuery 解析 JSON 數據並不複雜。下面是一個高效解析 JSON 數據並將其追加到您的網頁的例子。

function parseJson(){
    //Start by calling the json object, I will be using a 
        //file from my own site for the tutorial 
    //Then we declare a callback function to process the data
    $.getJSON('hcj.json',getPosts);
 
    //The process function, I am going to get the title, 
        //url and excerpt for 5 latest posts
    function getPosts(data){
        //Start a for loop with a limit of 5 
        for(var i = 0; i < 5; i++){
            var strPost = '<h2>' 
                      + data.posts[i].title
                      + '</h2>'
                      + '<p>'
                      + data.posts[i].excerpt
                      + '</p>'
                      + '<a href="'
                      + data.posts[i].url
                      + '" title="Read '
                      + data.posts[i].title
                      + '">Read ></a>';
            //Append the body with the string
            $('body').append(strPost);
        }
    }
}
 
//Fire off the function in your document ready
$(document).ready(function(){
    parseJson();                   
});

隔行換色 　　這是一個很老的功能了，在大的列表或表格中，隔行顏色能夠大大提升內容的可讀性。下面的代碼能夠很是簡單實現這個功能。

$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");

預加載圖片 　　你是否注意到 facebook 相冊的圖片加載速度特別快？那是由於在你看到這些圖片以前已經預加載到你的瀏覽器緩存中了。下面是實現這個相似功能的代碼示例：

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
    window.setTimeout(function(){
        var img = $("<img>").attr("src", nextimage).load(function(){
            //all done
        });
    }, 100);
});

讓整個 Div 可點擊  　　這是實現連接的父 Div 也可以點擊的簡單方法，HTML 示例代碼以下：

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

　　下面的 jQuery 代碼讓整個 Div 可點擊：

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

　　
您可能感興趣的相關文章
10套精美的免費網站後臺管理系統模板
精心挑選6款優秀的 jQuery Tooltip 插件
推薦幾款很是棒的 jQuery 全景圖片展現插件
12款經典的白富美型 jQuery 圖片輪播插件
分享12個效果精美的 JavaScript 倒計時腳本

 
英文連接：Catswhocode: Useful jQuery code snippets
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
轉載於猿2048:➸《經驗分享：10個簡單實用的 jQuery 代碼片斷》