亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

幾個(gè)比較經(jīng)典常用的jQuery小技巧

 更新時(shí)間：2010年03月01日 22:17:39   作者：  
現(xiàn)在講一下幾個(gè)比較經(jīng)典，而且比較常用的 jQuery 技巧，相信你能舉一反三。

> 唔，這個(gè)主題掛的時(shí)間也夠長(zhǎng)的了，也該換換了，到時(shí)候找找看有沒(méi)有合胃口的主題。
> 話說(shuō)，最近有點(diǎn)偏向 PHP 去了，我發(fā)現(xiàn)貪多嚼不爛，所以就又回到主題咯，(*^__^*) 嘻嘻。

1. Jquery 庫(kù)的調(diào)用：

> 呵呵，相信很多童鞋早就會(huì)了，不過(guò)還是得提一下，忘記就杯具咯。
> 第一個(gè)是常用的 Google 托管處的 jQuery 庫(kù)地址。
> 而第二個(gè)則是 jQuery 官方網(wǎng)站的庫(kù)地址，隨時(shí)獲取最新版，嘿嘿。

復(fù)制代碼 代碼如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

2. Load() 函數(shù)：

> 這個(gè)也是很不錯(cuò)的喔，很多地方都可以用上。
> 比如想在某些圖片沒(méi)有載入之前加個(gè)提示之類的。
> 或者對(duì)頁(yè)面載入過(guò)程最后一個(gè)元素使用，則可以提供整頁(yè)面的載入提示。
> 下面只是一個(gè)簡(jiǎn)單的例子，選擇器選擇的是 Img 標(biāo)簽。
> 然后搜索屬性，只是屬性類型為 Src 即圖片地址，后面則是圖片地址的內(nèi)容。
> 在圖片載入完成之后則會(huì)彈出一個(gè)提示框表示圖片已經(jīng)載好。
> 注意?。≌?qǐng)一定要填入與目標(biāo)元素內(nèi)填的完全相同的 Src，否則會(huì)杯具的。
復(fù)制代碼 代碼如下:

<script>
jQuery(document).ready(function($){
$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg')
        .load(function() {
alert('Image Loaded');
});
});
</script>

> 演示頁(yè)面?zhèn)魉烷T(mén)：http://www.evlos.org/global/demo/jquery_load

3. 簡(jiǎn)單的垂直居中：

> 這里使用的是 Height() 函數(shù)，選擇器里的 document 表示整個(gè)頁(yè)面。
> 下面查找的是 Class 為 Move 的元素，It_height 定義為元素高度。
> 然后將變量 Global_height 定義為整個(gè)頁(yè)面的高度，即頁(yè)頂至頁(yè)底的距離。
> 然后將此元素的至頂部的距離調(diào)整為整個(gè)頁(yè)面的高度的一半即可。

> 呵呵，相信有興趣的童鞋已經(jīng)可以舉一反三咯。
> jQuery 對(duì) CSS 進(jìn)行調(diào)整的能力是灰常強(qiáng)大的 O(∩_∩)O。
復(fù)制代碼 代碼如下:

<script>
jQuery(document).ready(function($){
    var global_height = $(document).height();
    var it_height = $('.move').height();
    $('.move').css({'position' : 'absolute' , 'top' :
        global_height/2 - it_height/2});
});


> 演示頁(yè)面?zhèn)魉烷T(mén)：http://www.evlos.org/global/demo/jquery_height

4. jQuery 與 Onclick 事件結(jié)合：
復(fù)制代碼 代碼如下:

<div onclick="var global_height = $(document).height();
    var it_height = $('.move').height();
    $('.move').css({'position' : 'absolute' , 'top' :
    global_height/2 - it_height/2});">Move It !</div>

> 把上面的代碼放到這里來(lái)，則鼠標(biāo)點(diǎn)擊此 DIV 之后執(zhí)行代碼。

5. ReplaceWith 函數(shù)：

> 下面的代碼是尋找 Class 為 Demo 的元素，然后將其整個(gè)替換掉。
> 整個(gè)的意思，是包含了前后的標(biāo)簽的，所以替換函數(shù)內(nèi)別忘記寫(xiě)標(biāo)簽喔。

 
復(fù)制代碼 代碼如下:

<script>
jQuery(document).ready(function($){
    $('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>');
});
</script>

> 演示頁(yè)面?zhèn)魉烷T(mén)：http://www.evlos.org/global/demo/jquery_replace

6. Load() 函數(shù)的運(yùn)用（頁(yè)面載入提示）：

> 首先寫(xiě)好 CSS，絕對(duì)定位到頁(yè)面右上角。

復(fù)制代碼 代碼如下:

#loading {
    position:absolute;    z-index:900;text-align:center;
    background-color:#eef2fa;border:1px solid #d8e3e8;
    color:#000;font-size:12px;padding:3px;width:80px;
    right:0;top:0;
}

> 然后用 jQuery 然后在所有圖片載入完成之后，隱藏 Loading DIV。
> 別忘記載入 jQuery 庫(kù)哈，剛才測(cè)試代碼的時(shí)候地址寫(xiě)錯(cuò)了，差點(diǎn)瘋掉。
復(fù)制代碼 代碼如下:

<script>
jQuery(document).ready(function($){
$('img').load(function(){
        $('#loading').css("display","none");
});
});
</script>

> 隨便某處插入一個(gè) DIV 即可，O(∩_∩)O 哈哈。

<div id="loading">Loading ...</div>

相關(guān)文章

最新評(píng)論