jQuery 语法+动画--2016.6.18

1.语法
$(selector).action()$(this).hide()–隐藏当前元素
$(“p”).hide()–隐藏所有段落$(“.test”).hide()–隐藏所有class=”test”的元素
$(“#test”).hide()–隐藏所有id=”test”的元素$(“ul li:first”)–每个ul的第一个li元素
2.文档就绪函数
为了防止在文档完全加载之前运行jQuery代码，导致操作失败。

$(docunment).ready(function(){
//执行的代码
});

3.jQuery选择器
选择器允许对DOM元素或单个DOM节点进行操作
元素选择器

$("p") 选取 <p> 元素。
$("p.intro") 选取所有class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

属性选择器

$("[href]") 选取所有带有href属性的元素
$("[href='#']")选取所有带有href值等于"#"的元素
$("href!='#'") 选取所有href值不等于"#"的元素
$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素

css选择器

$("p").css("background-color","red")

4.jQuery 事件

$(document).ready(function)--将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)--触发或将函数绑定到被选元素的点击事件
$(selector).dbclick(function)--触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)--触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)--触发或将函数绑定到被选元素的鼠标悬停事件

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
5.效果
隐藏和显示

$(selector).hide(speed,callback);//speed规定隐藏的速度，callback隐藏完成后所执行的函数名称
$(selector).show(speed,callback)

toggle()方法来切换hide()和show()方法

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

淡入淡出
fade方法fadeIn(),fadeOut(),fadeToggle(),fadeTo()

$(selector).fadeIn(speed,callback); //淡入已隐藏的元素
$(selector).fadeOut(speed,callback);//淡出可见的元素

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo()方法允许渐变为给定的不透明度opacity（值介于0与1之间）

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

滑动

$(selector).slideDown(speed,callback);//用于向下滑动显示隐藏的元素，元素之前是display：none

slideUp()方法：用于向上滑动元素
slideToggle()可以在slideDown()和slideUp()方法之间切换
动画
animate()方法用于创建自定义动画
如果为元素创建动画，元素不能是默认的静态的，元素的 CSS position 属性设置为 relative、fixed 或 absolute。

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

例子：

//设置一个属性
$("div").animate({left:'250px'});//元素移动到left值为250px停止

//同时操作多个属性
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
animate使用相对值
相对值是该值相对于元素的当前值，需要在值的前面加上+=或-=

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

animate使用预定义值

$("button").click(function(){
 $("div").animate({
height:'toggle'
});
});

animate使用队列功能
编写多个animate()调用，jQuery会创建包含这些方法调用的内部队列，然后逐一运行这些animate调用

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

停止动画
stop()方法用于停止动画，适合所有的jQuery效果函数，包括滑动，淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
第一个参数规定是否应该清楚动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
第二个参数规定是否立即完成当前动画，默认值是false。
所以默认情况下，stop()会清除在被选元素上指定的当前动画。
Callback 函数
当前动画100%完成之后执行。

$(selector).hide(speed,callback) //callback是一个在hide操作完成后被执行的函数。

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

Chaining
通过jQuery，可以把动作/方法连接起来。允许在相同的元素上运行多条jQuery命令，一条接着一条。

//首先字体变成红色，然后向上滑动然后在向下滑动
 $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);