jQuery学习

    华恩 2014/3/20

一、jQuery 是一个 JavaScript 函数库

jQuery 库包含以下特性：HTML 元素选取，HTML 元素操作，CSS 操作，HTML 事件函数，JavaScript 特效和动画HTML DOM 遍历和修改，AJAX，Utilities

二、jQuery 语法

基础语法是：$(selector).action()，比如$(this).hide()，表示 jQuery hide() 函数，隐藏当前的 HTML 元素。

三、jQuery常见的效果

1）隐藏和显示

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});

2）滚动

slideDown()，slideUp()，slideToggle()都是jQuery的滚动方法，滚动的形式看单词意思就能理解

下滚

$("#flip").click(function(){
  $("#panel").slideDown();
});

上滚

$("#flip").click(function(){
  $("#panel").slideUp();
});

 而slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

3）动画效果

jQuery animate() 方法用于创建自定义动画。它的语法是$(selector).animate({params},speed,callback);其中params 参数定义形成动画的 CSS 属性

speed 参数规定效果的时长，callback 参数是动画完成后所执行的函数名称。

比如一个基本的动画多样变化效果

$("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });

动画的效果是图片从左往右移动，过程中均匀变高变宽，然后颜色变浅。

4）当然动画在移动过程中有时需要我们能控制最好了，所以这里可以有一个jQuery stop() 方法用于在动画或效果完成前对它们进行停止。语法是$(selector).stop(stopAll,goToEnd);

$("#stop").click(function(){
  $("#panel").stop();
});