JQuery基礎

入口函數

$(document).ready(function(){
    // 事件不帶on
    $("#btn").click(function(){;} 
})  // 效率大於JS的window.onload事件

1 效果

隱藏/顯示

• hide()
• show()
• toggle() 切換

淡入淡出

• fadeIn() 淡入已隱藏的元素

$(selector).fadeIn([speed][,callback]);

• fadeOut() 淡出
• fadeToggle() 切換
• fadeTo() 允許漸變爲給定的不透明度（值介於 0 與 1 之間）

$(selector).fadeTo(speed,opacity,callback);

滑動

• slideDown()
• slideUp()
• slideToggle()

動畫

• animate()

$(selector).animate({params}[,speed][,callback]);

stop()

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

• stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行
• goToEnd 參數規定是否立即完成當前動畫。默認是 false

Callback

Chaining 執行多個動作、方法

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

2 HTML

獲取

• text() 設置或返回所選元素的文本內容
• html() 設置或返回所選元素的內容（包括 HTML 標記）
• val() 設置或返回表單字段的值
• attr() 獲取屬性值

設置

// 設置文本
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});

// 設置指定屬性
$("button").click(function(){
  $("#test2").attr("href","http://www.zhanghyingji.cn/");
});

添加

• append() 結尾插入
• prepend() 開頭插入
• after() 之後插入
• before() 之前插入

刪除

• remove() 迭代刪除元素
• empty() 刪除子元素

// 刪除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");

CSS

• addClass()
• removeClass()
• toggleClass()
• css()

$("p").css("background-color","yellow");

尺寸

• width() 設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
• heigth()
• innerWidth() 返回元素的寬度（包括內邊距）
• innerHeight()
• outerWidth() 返回元素的寬度（包括內邊距和邊框）
• outerHeight()

3 遍歷

父元素

• parent() 返回父元素
• parents() 返回所有祖先
• parentsUntil()

// 返回介於 <span> 與 <div> 元素之間的所有祖先元素
$(document).ready(function(){
  $("span").parentsUntil("div");
});

子元素

• children() 返回所有直接子元素
• find() 迭代返回子元素

兄弟元素

• siblings() 返回被選元素的所有兄弟元素
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

過濾

• first()
• last()
• eq()
• filter()
• not()

4 AJAX

load()加載

$(selector).load(URL[,data][,callback])

get() && post()

• $.get(URL[,callback]);

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

• $.post(URL[,data][,callback])

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});