|
|
> 唔，這個(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è)提示之類(lèi)的。
> 或者對(duì)頁(yè)面載入過(guò)程最后一個(gè)元素使用，則可以提供整頁(yè)面的載入提示。
> 下面只是一個(gè)簡(jiǎn)單的例子，選擇器選擇的是 Img 標(biāo)簽。
> 然后搜索屬性，只是屬性類(lèi)型為 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>
JavaScript技術(shù)：幾個(gè)比較經(jīng)典常用的jQuery小技巧，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
