jQuery1

jQuery 选择器
1. jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素
$(this)当前 HTML 元素
$("p")所有<p>元素
$("p.intro")所有 class=”intro” 的<p>元素
$(".intro")所有 class=”intro” 的元素
$("#intro")id=”intro” 的元素
$("ul li:first")每个<ul> 的第一个<li>元素

jQuery选择器手册: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
2. jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素
$("[href='#']")选取所有带有 href 值等于 “#” 的元素。
$("[href!='#']")选取所有带有 href 值不等于 “#” 的元素。
$("[href$='.jpg']")所有带有以”.jpg”结尾的属性值的 href 属性
$("div#intro .head")id=”intro” 的<div> 元素中的所有 class=”head”的元素

jQuery 事件
$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 事件参考手册:http://www.w3school.com.cn/jquery/jquery_ref_events.asp

jQuery 效果
1. 隐藏/显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
callback:

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

2.淡入淡出

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
3. 滑动

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

4.动画

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

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$("button").click(function(){
  $("div").animate({
    left:'250px',
     height:'toggle',  //动画值设置为 "show"、"hide" 或 "toggle"
    width:'+=150px'//相对值（该值相对于元素的当前值）
  });
});

//在彼此之后执行不同的动画，利用队列功能
$("button").click(function(){
  var div=$("div");
  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");
});

5.停止动画

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

6.Callback
当动画 100% 完成后，即调用 Callback 函数。

//$(selector).hide(speed,callback);
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

7.Chaining

//允许在相同的元素上运行多条 jQuery 命令，一条接着另一条
$("#p1").css("color","red").slideUp(2000).slideDown(2000);