|
|
> 唔，這個主題掛的時間也夠長的了，也該換換了，到時候找找看有沒有合胃口的主題。
> 話說，最近有點偏向 php 去了，我發現貪多嚼不爛，所以就又回到主題咯，(*^__^*) 嘻嘻。
1. Jquery 庫的調用：
> 呵呵，相信很多童鞋早就會了，不過還是得提一下，忘記就杯具咯。
> 第一個是常用的 Google 托管處的 jQuery 庫地址。
> 而第二個則是 jQuery 官方網站的庫地址，隨時獲取最新版，嘿嘿。
復制代碼 代碼如下:
<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() 函數：
> 這個也是很不錯的喔，很多地方都可以用上。
> 比如想在某些圖片沒有載入之前加個提示之類的。
> 或者對頁面載入過程最后一個元素使用，則可以提供整頁面的載入提示。
> 下面只是一個簡單的例子，選擇器選擇的是 Img 標簽。
> 然后搜索屬性，只是屬性類型為 Src 即圖片地址，后面則是圖片地址的內容。
> 在圖片載入完成之后則會彈出一個提示框表示圖片已經載好。
> 注意！！請一定要填入與目標元素內填的完全相同的 Src，否則會杯具的。
復制代碼 代碼如下:
<script>
jQuery(document).ready(function($){
$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg')
.load(function() {
alert('Image Loaded');
});
});
</script>
> 演示頁面傳送門：http://www.evlos.org/global/demo/jquery_load
3. 簡單的垂直居中：
> 這里使用的是 Height() 函數，選擇器里的 document 表示整個頁面。
> 下面查找的是 Class 為 Move 的元素，It_height 定義為元素高度。
> 然后將變量 Global_height 定義為整個頁面的高度，即頁頂至頁底的距離。
> 然后將此元素的至頂部的距離調整為整個頁面的高度的一半即可。
> 呵呵，相信有興趣的童鞋已經可以舉一反三咯。
> jQuery 對 CSS 進行調整的能力是灰常強大的 O(∩_∩)O。
復制代碼 代碼如下:
<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});
});
> 演示頁面傳送門：http://www.evlos.org/global/demo/jquery_height
4. jQuery 與 Onclick 事件結合：
復制代碼 代碼如下:
<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>
> 把上面的代碼放到這里來，則鼠標點擊此 DIV 之后執行代碼。
5. ReplaceWith 函數：
> 下面的代碼是尋找 Class 為 Demo 的元素，然后將其整個替換掉。
> 整個的意思，是包含了前后的標簽的，所以替換函數內別忘記寫標簽喔。
復制代碼 代碼如下:
<script>
jQuery(document).ready(function($){
$('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>');
});
</script>
> 演示頁面傳送門：http://www.evlos.org/global/demo/jquery_replace
6. Load() 函數的運用（頁面載入提示）：
> 首先寫好 CSS，絕對定位到頁面右上角。
復制代碼 代碼如下:
#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 庫哈，剛才測試代碼的時候地址寫錯了，差點瘋掉。
復制代碼 代碼如下:
<script>
jQuery(document).ready(function($){
$('img').load(function(){
$('#loading').css("display","none");
});
});
</script>
> 隨便某處插入一個 DIV 即可，O(∩_∩)O 哈哈。
<div id="loading">Loading ...</div>
JavaScript技術：幾個比較經典常用的jQuery小技巧，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
