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);
  });
});