JQuery 效果語法

Jquery中$(document).ready()
Jquery中$(document).ready()的作用類似於傳統JavaScript中的window.onload方法，兩者區別在於。
1.執行時間 

        window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。 
        $(document).ready()是DOM結構繪製完畢後就執行，不必等到加載完畢。 
2.編寫個數不同 

         window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 
         $(document).ready()可以同時編寫多個，並且都可以得到執行
3.簡化寫法 

         window.onload沒有簡化寫法 
         $(document).ready(function(){})可以簡寫成$(function(){});

【顯示/隱藏】

點擊隱藏
$("#hideButtonId").click(function(){
  $("#hideContent").hide();
});

點擊顯示
$("#showId").click(function(){
  $("#hideContent").show();
});

點擊隱藏變顯示，或者顯示變隱藏

$("#toggleId").click(function(){
  $("#toggleContent").toggle();
});

【淡入/淡出】

點擊淡入

$("#fadeInId").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

parameter:
null normal speed
slow
fast
3000 3000ms

點擊淡出

$("#fadeOutId").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

same as the upper one

點擊顯示的淡入隱藏，隱藏的淡出顯示

$("#fadeToggleId").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

點擊逐漸變爲透明，透明參數介於0和1之間

$("#fadeToId").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("fast",0.4);
  $("#div3").fadeTo(3000,0.7);
});

【滑動】

向下滑動

$("#slideDownButtonId").click(function(){
  $("#slideDownContentId").slideDown();
});

向上滑動

$("#slideUpButtonId").click(function(){
  $("#slideUpContentId").slideUp();
});

隱藏的向下滑動，顯示的向上滑動

$("#slideToggleButtonId").click(function(){
  $("#slideToggleContentId").slideToggle();
});

【動畫】

移動位置

$("#moveButtonId").click(function(){
  $("#moveButtonContentId").animate({left:'250px'});

  $("#moveButtonContentId").animate({left:'0px'});

 });

提示：默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。
如需對位置進行操作，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。

它把 <div> 元素移動到左邊，直到 left 屬性等於 250 像素爲止，然後把left屬性改爲0。

改變屬性

$("#modifyPropertyButtonId").click(function(){
  $("#modifyPropertyContentId").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

屬性增加，變大

$("#enhanceButtonId").click(function(){
  $("#enhanceContentId").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

顯示或隱藏

$("#toggleButtonId").click(function(){
  $("#toggleContentId").animate({
    height:'toggle'
  });
});

執行隊列

$("#queueButtonId").click(function(){
  var div=$("#queueContentId");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

字體變大

$("#fontEnhanceId").click(function(){
  var div=$("#fontEnhanceContentId");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

【停止】

$(selector).stop(stopAll,goToEnd);

$("#stopButtonId").click(function(){
  $("#stopContentId").stop();
});

停止活動的：可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。

立即完成動畫：可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

【CallBack】

$(selector).hide(speed,callback)

正確：會在hide結束後，alert();
$("#callBackButtonId").hide(1000,function(){
alert("The paragraph is now hidden");
});
錯誤：先alert()，後hide；

$("#callBackButtonId").hide(1000,function(){
alert("The paragraph is now hidden");
});

【Chaining】
相當於一個連續執行。
$("#ChainingbuttonId").click(function(){
    $("#ChainingContentId").css("color","red").slideUp(2000).slideDown(2000);
  });
或者

$("#ChainingbuttonId").click(function(){
    $("#ChainingContentId")
   .css("color","red")
   .slideUp(2000)
   .slideDown(2000);
  });