jquery簡介之改變樣式和動畫效果
改變樣式
css(name|pro|[,val|fn]) 返回值:String
訪問匹配元素的樣式屬性。
引數
name String 要訪問的屬性名稱
properties Map 要設定為樣式屬性的名/值對
name,value String, Number 屬性名,屬性值
name,function(index, value)String,Function 1:屬性名 2:此函式返回要設定的屬性值。接受兩個引數，index為元素在物件集合中的索引位置，value是原先的屬性值。
示例
引數name 描述:
取得第一個段落的color樣式屬性的值。
jQuery 程式碼:
$("p").css("color");
引數properties 描述:
將所有段落的字型顏色設為紅色並且背景為藍色。
jQuery 程式碼:
$("p").css({ color: "#ff0011", background: "blue" });
引數name,value 描述:
將所有段落字型設為紅色
jQuery 程式碼:
$("p").css("color","red");
引數name,回撥函式 描述:
逐漸增加div的大小
jQuery 程式碼:
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
CSS 類
1.addClass(class|fn)
為每個匹配的元素新增指定的類名。
引數
class String 一個或多個要新增到元素中的CSS類名，請用空格分開
function(index, class) Function 此函式必須返回一個或多個空格分隔的class名。接受兩個引數，index引數為物件在這個集合中的索引值，class引數為這個物件原先的class屬性值。
示例
引數class 描述:
為匹配的元素加上 'selected' 類
jQuery 程式碼:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
回撥函式 描述:
給li加上不同的class
HTML 程式碼:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
jQuery 程式碼:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
2.removeClass([class|fn]) 概述 從所有匹配的元素中刪除全部或者指定的類。引數class String 一個或多個要刪除的CSS類名，請用空格分開
function(index, class) 此函式必須返回一個或多個空格分隔的class名。接受兩個引數，index引數為物件在這個集合中的索引值，class引數為這個物件原先的class屬性值。
示例
引數class 描述:
從匹配的元素中刪除 'selected' 類
jQuery 程式碼:
$("p").removeClass("selected");
引數class 描述:
刪除匹配元素的所有類
jQuery 程式碼:
$("p").removeClass();
回撥函式描述:
刪除最後一個元素上與前面重複的class
jQuery 程式碼:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
3.toggleClass(class|fn[,sw]) 返回值:jQuery 如果存在（不存在）就刪除（新增）一個類。
引數
class String CSS類名
class,switchString,Boolean 1:要切換的CSS類名. 2:用於決定元素是否包含class的布林值。
switchBoolean 用於決定元素是否包含class的布林值。
function(index, class,switch)[, switch] Function,Boolean 1:用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函式。接收元素的索引位置和元素舊的樣式類作為引數。2: 一個用來判斷樣式類新增還是移除的 boolean 值。
示例
引數class 描述:
為匹配的元素切換 'selected' 類
jQuery 程式碼:
$("p").toggleClass("selected");
引數class,switch 描述:
每點選三下加上一次 'highlight' 類
HTML 程式碼:
<strong>jQuery 程式碼:</strong>
jQuery 程式碼:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
回撥函式 描述:
根據父元素來設定class屬性
jQuery 程式碼:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
動畫效果
基本
show([speed,[easing],[fn]])
顯示隱藏的匹配元素。
這個就是 'show( speed, [callback] )' 無動畫的版本。如果選擇的元素是可見的，這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS裡設定了display:none;，這個方法都將有效。
引數
speed[,fn]Number/String,FunctionV1.0speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函式，每個元素執行一次。
[speed],[easing],[fn]Number/String,String,FunctionV1.4.3speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例
1.描述:顯示所有段落
HTML 程式碼:
<p style="display: none">Hello</p>
jQuery 程式碼:
$("p").show()
2.描述:用緩慢的動畫將隱藏的段落顯示出來，歷時600毫秒。
HTML 程式碼:
<p style="display: none">Hello</p>
jQuery 程式碼:
$("p").show("slow");
3.描述:用迅速的動畫將隱藏的段落顯示出來，歷時200毫秒。並在之後執行反饋！
HTML 程式碼:
<p style="display: none">Hello</p>
jQuery 程式碼:
$("p").show("fast",function(){
$(this).text("Animation Done!");
});
描述:
將隱藏的段落用將近4秒的時間顯示出來。。。並在之後執行一個反饋。。。
HTML 程式碼:
<p style="display: none">Hello</p>
jQuery 程式碼:
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
hide([speed,[easing],[fn]])
隱藏顯示的元素
這個就是 'hide( speed, [callback] )' 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變任何東西。
引數
speed[,fn]Number/String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000) fn:在動畫完成時執行的函式，每個元素執行一次。
[speed],[easing],[fn]Number/String,String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000) easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear" fn:在動畫完成時執行的函式，每個元素執行一次。
示例描述:隱藏所有段落
jQuery 程式碼:
$("p").hide()
描述:用600毫秒的時間將段落緩慢的隱藏
jQuery 程式碼:
$("p").hide("slow");
描述:用200毫秒將段落迅速隱藏，之後彈出一個對話方塊。
jQuery 程式碼:
$("p").hide("fast",function(){
alert("Animation Done.");
});
toggle([speed],[easing],[fn])
返回值:jQuery
用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
引數
fn,fn2,[fn3,fn4,...]Function,.... fn:第一數次點選時要執行的函式。fn2:第二數次點選時要執行的函式。fn3,fn4,...:更多次點選時要執行的函式。
[speed] [,fn]String,Function speed: 隱藏/顯示 效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。" fn:在動畫完成時執行的函式，每個元素執行一次。
[speed], [easing ], [fn ] String,String,Function speed: 隱藏/顯示 效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。"easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"fn:在動畫完成時執行的函式，每個元素執行一次。
switch Boolean 用於確定顯示/隱藏的開關。如：true - 顯示元素，false - 隱藏元素
示例無引數描述:對錶格切換顯示/隱藏
jQuery 程式碼:
$('td).toggle();
fn,fn2描述:對錶格的切換一個類
jQuery 程式碼:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
speed 描述:
用600毫秒的時間將段落緩慢的切換顯示狀態
jQuery 程式碼:
$("p").toggle("slow");
speed,fn 描述:用200毫秒將段落迅速切換顯示狀態，之後彈出一個對話方塊。
jQuery 程式碼:
$("p").toggle("fast",function(){
alert("Animation Done.");
});
switch引數描述:如果這個引數為true ，那麼匹配的元素將顯示;如果false ，元素是隱藏的
jQuery 程式碼:
$('#foo').toggle(showOrHide);
//相當於
if (showOrHide) {
$('#foo').show();
} else {
$('#foo').hide();
}
滑動
1.slideDown([spe],[eas],[fn])
返回值:jQueryslideDown([speed],[easing],[fn])
通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回撥函式。
這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
引數
speed[,fn]Number/String,FunctionV1.0speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函式，每個元素執行一次。
[speed],[easing],[fn]Number/String,String,FunctionV1.4.3speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn在動畫完成時執行的函式，每個元素執行一次。
示例描述:以滑動方式顯示隱藏的 <p> 元素：
jQuery 程式碼:
$(".btn2").click(function(){
$("p").slideDown();
});
描述:用600毫秒緩慢的將段落滑下
jQuery 程式碼:
$("p").slideDown("slow");
描述:用200毫秒快速將段落滑下，之後彈出一個對話方塊
jQuery 程式碼:
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
2.slideUp([speed,[easing],[fn]])
通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回撥函式。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
引數
speed[,fn]Number/String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函式，每個元素執行一次。
[speed],[easing],[fn]Number/String,String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例
描述:用600毫秒緩慢的將段落滑上
jQuery 程式碼:
$("p").slideUp("slow");描述:
用200毫秒快速將段落滑上，之後彈出一個對話方塊
jQuery 程式碼:
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
3.slideToggle([speed],[easing],[fn])
通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回撥函式。這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。
引數
speed[,fn]Number/String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
fn:在動畫完成時執行的函式，每個元素執行一次。
[speed],[easing],[fn]Number/String,String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例
描述:用600毫秒緩慢的將段落滑上或滑下
jQuery 程式碼:
$("p").slideToggle("slow"); 描述:用200毫秒快速將段落滑上或滑下，之後彈出一個對話方塊
jQuery 程式碼:
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
淡入淡出
1.fadeIn([speed],[eas],[fn])
通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回撥函式。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。引數
[speed],[easing],[fn]Number/String,String,Function speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例
描述:用600毫秒緩慢的將段落淡入
jQuery 程式碼:
$("p").fadeIn("slow"); 描述:用200毫秒快速將段落淡入，之後彈出一個對話方塊
jQuery 程式碼:
("p").fadeIn("fast",function(){
alert("Animation Done.");
});
2.fadeOut([speed],[eas],[fn])
通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回撥函式。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
引數
[speed],[easing],[fn]Number/String,String,Function
speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例描述:用600毫秒緩慢的將段落淡出
jQuery 程式碼:
$("p").fadeOut("slow");描述:
用200毫秒快速將段落淡出，之後彈出一個對話方塊
jQuery 程式碼:
$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
3.fadeTo([[spe],opa,[eas],[fn]])
把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回撥函式。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
引數
[speed],opacity,[easing],[fn]Number/String,String,Function
speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
opacity:一個0至1之間表示透明度的數字。
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例:使用淡入效果來顯示一個隱藏的 <p> 元素：
jQuery 程式碼:
$(".btn2").click(function(){
$("p").fadeIn();
});
描述:用600毫秒緩慢的將段落的透明度調整到0.66，大約2/3的可見度
jQuery 程式碼:
$("p").fadeTo("slow", 0.66);
描述:用200毫秒快速將段落的透明度調整到0.25，大約1/4的可見度，之後彈出一個對話方塊
jQuery 程式碼:
$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});
4.fadeToggle([speed,[eas],[fn]])
通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回撥函式。
這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
引數
[speed],[easing],[fn]Number/String,String,FunctionV1.4.4speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"
fn:在動畫完成時執行的函式，每個元素執行一次。
示例描述:用600毫秒緩慢的將段落淡入
jQuery 程式碼:
$("p").fadeToggle("slow","linear");
描述:用200毫秒快速將段落淡入，之後彈出一個對話方塊
jQuery 程式碼:
$("p").fadeToggle("fast",function(){
alert("Animation Done.");
});