jQuery 學習筆記(二)

jQuery Effects

隱藏和顯示

1. hide / show 句法：
   $(selector).hide(speed,callback);
$(selector).show(speed,callback);
   例子：

$(document).ready(function(){ 
    $("button").click(function(){ 
      $("p").hide(1000); 
    });
});

2. toggle 句法：
   $(selector).toggle(speed,callback);
   通過一個button，可以在隱藏和顯示之間切換例子：

$(document).ready(function(){ 
    $("button").click(function(){ 
      $("p").toggle(2000); 
    });
});

淡入淡出

fade 相關句法：
淡入 $(selector).fadeIn(speed,callback);
淡出 $(selector).fadeOut(speed,callback);
切換 $(selector).fadeToggle(speed,callback);
漸變到 $(selector).fadeTo(speed,callback);
例子：

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

滑動

slide 相關句法：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
例子：

$(document).ready(function(){ 
  $("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
  });
});

動效

animation 句法：
$(selector).animate({params},speed,callback);
在{params}中可以同時設定多個引數，同時也可以使用相對值或預先定義過的屬性詞例子：

$(document).ready(function(){ 
  $("button").click(function(){ 
    $("div").animate({ 
      left: '250px', opacity: '0.5', height: '150px', width: '150px' 
    }); 
  });
});//同時設定多個引數

$(document).ready(function(){ 
  $("button").click(function(){ 
    $("div").animate({ 
      left: '250px', height: '+=150px', width: '+=150px' 
    }); 
  }); 
});//使用相對值

返回值

通過返回值，可以在動效觸發時同時加上其他的事件：例子：

$("button").click(function(){ 
$("p").hide("slow", function(){ 
alert("The paragraph is now hidden"); 
});
});

jQuery 方法鏈

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
//or
$("#p1").css("color", "red") .slideUp(2000) .slideDown(2000);

其他問題

1. 在網頁原始碼首頁經常會看見這樣一段： <link rel="dns-prefetch" href="//code.jquery.com" /> <link rel="dns-prefetch" href="//fonts.googleapis.com" /> DNS Prefetch（預獲取），是前端優化的一部分。 在前端優化中關於DNS主要是兩部分： - 減小DNS請求次數 - 進行DNS預先獲取> 預設情況下瀏覽器會對頁面中和當前域名（正在瀏覽網頁的域名）不在同一個域的域名進行預獲取，並且快取結果，這就是隱式的DNS Prefetch。如果想對頁面中沒有出現的域進行預獲取，那麼就要使用顯示的DNS　Prefetch了，也就是使用link標籤： <link rel=”dns-prefetch” href=”http://api.twitter.com”/> > DNS Prefetch應該儘量的放在網頁的前面，推薦放在<meta charset=”/>後面。同時，也可以通過下面的標籤禁止隱式的DNS Prefetch：<meta http-equiv=”x-dns-prefetch-control” content=”off”>