jQuery使用手冊之三 CSS操作

傳統javascript對css的操作相當繁瑣，比如<div id="a" style="background:blue">css</div>取它的background文法是 document.getElementById("a").style.background，而jQuery對css更方便的操作，$("#a").background()，$("#a").background(“red”)
$("#a")得到jQuery對象[ <div id="a" … /div> ]
$("#a").background()將取出該對象的background樣式。
$("#a").background(“red”)將該對象的background樣式設為redjQuery提供了以下方法，來操作css
background () background (val) color() color(val) css(name) css(prop)
css(key, value) float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)

這裡需要講解一下css(name) css(prop) css(key, value)，其他的看名字都知道什麼作用了！

<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>

css(name) 擷取樣式名為name的樣式
$("#a").css("color") 將得到樣式中color值red，("#a").css("background ")將得到blue

css(prop) prop是一個hash對象，用於設定大量的css樣式
$("#b").css({ color: "red", background: "blue" });
最終效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" }，hash對象，color為key，"red"為value，

css(key, value) 用於設定一個單獨得css樣式
$("#b").css("color","red");最終效果是<p id="b" style="color:red">test</p>

四：JavaScript處理

$.browser() 判斷瀏覽器類型，返回boolen值

$(function(){
if($.browser.msie) {
alert("這是一個IE瀏覽器");}
else if($.browser.opera) {
alert("這是一個opera瀏覽器");}
})

當頁面載入式判斷瀏覽器類型，可判斷的類型有msie、mozilla、opera、safari

$.each(obj, fn) obj為對象或數組，fn為在obj上依次執行的函數，注意區分$().each()

$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });

分別將0，1，2為參數，傳入到function(i)中

$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );

{ name: "John", lang: "JS" }為一個hash對象，依次將hash中每組對象傳入到函數中

$.extend(obj, prop) 用第二個對象擴充第一個對象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

執行後settings對象為{ validate: true, limit: 5, name: "bar" }
可以用下面函數來測試

$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})

$.grep(array,fn) 通過函數fn來過濾array，將array中的元素依次傳給fn，fn必須返回一個boolen，如fn返回true，將被過濾

$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})

我們可以看待執行$.grep後數組[0,1,2,3,4]變成[0，1]

$.merge(first, second) 兩個參數都是數組，排出第二個數組中與第一個相同的，再將兩個數組合并

$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})

可以看出arr的結果為[0,1,2,3,4]

$.trim(str) 移出字串兩端的空格
$.trim(" hello, how are you? ")的結果是"hello, how are you?"

五：動態效果

在將這部分之前我們先看個例子，相信做網頁的朋友都遇到n級菜單的情景，但點擊某功能表按鈕時，如果它的子功能表是顯示的，則隱藏子功能表，如果子功能表隱藏，則顯示出來，傳統的javascript做法是先用getElementById取出子功能表所在容器的id，在判斷該容器的style.display是否等於none，如果等於則設為block,如果不等於這設為none，如果在將效果設定複雜一點，當點擊按鈕時，不是忽然隱藏和顯示子功能表，而是高度平滑的轉變，這時就要通過setTimeout來設定子功能表的height了，再複雜一點透明度也平滑的消失和顯現，這時顯現下來需要編寫很多代碼，如果js基礎不好的朋友可能只能從別人寫好的代碼拿過來修改了！jQuery實現上面效果只需要1句話就行，$("#a").toggle("slow"),,學完jQuery後還需要抄襲修改別人的代碼嗎？下面我們逐個介紹jQuery用於效果處理的方法。

hide() 隱藏匹配對象

<p id="a">Hello Again</p><a href="#" onClick=' ("#a").hide()'>jQuery</a>

當點擊串連時,id為a的對象的display變為none。

show() 顯示匹配對象

hide(speed) 以一定的速度隱藏匹配對象，其大小（長寬）和透明度都逐漸層化到0，speed有3級("slow", "normal", "fast")，也可以是自訂的速度。

show(speed) 以一定的速度顯示匹配對象，其大小（長寬）和透明度都由0逐漸層化到正常

hide(speed, callback) show(speed, callback) 當顯示和隱藏變化結束後執行函數callback

toggle() toggle(speed) 如果當前匹配對象隱藏，則顯示他們，如果當前是顯示的，就隱藏，toggle(speed),其大小（長寬）和透明度都隨之逐漸層化。

<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>

fadeIn(speeds) fadeOut(speeds) 根據速度調整透明度來顯示或隱藏匹配對象，注意有別於hide(speed)和show(speed)，fadeIn和fadeOut都只調整透明度，不調整大小

<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>

點擊串連後可以看到圖片逐漸顯示。

fadeIn(speed, callback) fadeOut(speed, callback) callback為函數，先通過調整透明度來顯示或隱藏匹配對象，當調整結束後執行callback函數

<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>

點擊串連後可以看到圖片逐漸顯示,顯示完全後彈出對話方塊

fadeTo(speed, opacity, callback) 將匹配對象以speed速度調整倒透明度opacity，然後執行函數callback。Opacity為最終顯示的透明度(0-1).

<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>

大家可以看一下自己看看效果，如果不用jQuery，編寫原始javascript指令碼可能很多代碼！

slideDown(speeds) 將匹配對象的高度由0以指定速率平滑的變化到正常！

<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

slideDown(speeds,callback) 將匹配對象的高度由0變化到正常！變化結束後執行函數callback

slideUp("slow") slideUp(speed, callback) 匹配對象的高度由正常變化到0

slideToggle("slow") 如果匹配對象的高度正常則逐漸層化到0，若為0，則逐漸層化到正常