動畫

• 基本

  • show([s,[e],[fn]])

  • hide([s,[e],[fn]])

隱藏一個元素
無參數(shù)時，隱藏元素
speed："slow","normal", "fast，表示從顯示過渡到隱藏的速度，也可以直接寫數(shù)字，1000代表1s。
function參數(shù)：在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。
easing參數(shù)：用來指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"

• toggle([s],[e],[fn])

綜合應(yīng)用，寫一個點(diǎn)擊顯示/隱藏的小功能

  <div class="container">
    牛牛牛牛牛牛
  </div>
  <input type="button" value="點(diǎn)擊">
......
  var flag = true;
  $("input").click(function(){
    if(flag){
      $(".container").hide(function(){
        console.log("隱藏了");
        flag = false;
      });
    } else {
      $(".container").show(function(){
        console.log("顯示了");
        flag = true;
      });
    }
  });
//更簡單的寫法
  $("input").click(function(){
    $(".container").toggle();
  });

• 滑動

  • slideDown([s],[e],[fn])
    向下滑動
  • slideUp([s,[e],[fn]])
    向上滑動
  • slideToggle([s],[e],[fn])

• 淡入淡出

  • fadeIn([s],[e],[fn])
  • fadeOut([s],[e],[fn])
  • fadeTo([[s],o,[e],[fn]])
  • fadeToggle([s,[e],[fn]])

• 自定義

  • animate(params,[speed],[easing],[fn])^1.8*
    params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
    speed:三種預(yù)定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
    easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
    fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

  $(".container").animate({
    width:500,
    height:"300px",
    marginLeft: "20%"
  },2000);

• stop([c],[j])^1.7*

• delay(d,[q])

• finish([queue])^1.9+

• 設(shè)置

  • jQuery.fx.off

核心

• jQuery 核心函數(shù)

  • jQuery([sel,[context]])
  • jQuery(html,[ownerDoc])^1.8*
  • jQuery(callback)
  • jQuery.holdReady(hold)^3.2-
  • jQuery.readyException( error )^3.1+

• jQuery 對象訪問

  • each(callback)
  • size()^1.8-
  • length
  • selector
  • context
  • get([index])
  • index([selector|element])

• 數(shù)據(jù)緩存

  • data([key],[value])
  • removeData([name|list])^1.7*
  • $.data(ele,[key],[val])^1.8-

• 隊(duì)列控制

  • queue(e,[q])
  • dequeue([queueName])
  • clearQueue([queueName])

• 插件機(jī)制

小例子

一div里面現(xiàn)有內(nèi)容"您好"，我們需要改為"您好，中國。"請問怎么做？

  function test(){
    var div = $(".container");
    div.text(div.text() + ",中國！")
  }
  test();

這樣就可以了。這樣是直接定義了一個函數(shù)，而jQuery的插件機(jī)制是在原有的jQuery里邊添加一些屬于jQuery的函數(shù)，讓jQuery對象可以直接調(diào)用它。那我們?nèi)绾涡薷纳厦娴暮瘮?shù)呢？

  $.fn.extend({
    add:function(value){
      //有點(diǎn)類似于給對象里面的原型添加一個方法，因?yàn)槭莏Query調(diào)用函數(shù)
      this.text(this.text() + value)
    }
  });
  $(".container").add(",中國！");

這里的this指向jQuery對象，注意this指向標(biāo)簽只存在于事件中
改成這樣就可以了?？梢詫⑦@種函數(shù)封裝在一個js文件里邊，在需要用到的時候引入（注意引入必須寫在jQuery的引入后邊）

• jQuery.fn.extend(object)

• jQuery.extend(object)

• 多庫共存

  • jQuery.noConflict([ex])