jQuery初體驗

jQuery

jQuery就像一個大的功能庫，給咱們返回一個有不少方法、屬性的對象，而後咱們調用它的方法、屬性就好了。

和Javascript同樣，使用鏈式代碼。一旦找到新的元素，以後的鏈就操做在新元素上，而不是一開始的元素。

通常的javascript變量沒法使用jquery方法，使用$("")封裝，使其能夠使用jquery方法。

var fish = document.getElementById("fish");
$("fish").remove();

獲取一個元素

jQuery選擇器$("jQuery選擇器")和css選擇器同樣，能夠是.能夠是#能夠是標籤

$("div")
$(".color")
$("#mylove")
$("div ul .yellow")
$("#color.yellow")
$("#blur > .pic")

頁面準備就緒時

jQuery:
$(document).ready(function(){
    //your code
});

JavaScript:
window.onload=function(){
    //your code
};

監聽事件

• 綁定事件

  jQuery:
  $("#button").on("事件名稱",function(){    //事件名稱：click/mousemove/keypress...
      //your code
  })
  
  Javascript:
  var button=document.getElementById("button1");
  button.事件名稱=function(){            //事件名稱：onclick/onmousemove/onkeypress...
      //your code
  }

• 綁定多個事件

  jQuery:
  $("#click").bind("click",function(){             //jQuery自動判斷瀏覽器類型並作調整
      //your code
  });
  
  JavaScript:
  var click=document.getElementById("click");
  if(window.attachEvent){        
      click.attachEvent("click",function(){          //IE8或以前
          //your code
      });
  }else{                         
      click.addEventListener("click",function(){    //除了IE8或以前
          //your code
      });
  }

• 解綁事件

  jQuery: 
  //jQuery自動判斷瀏覽器類型並作調整
  
  $("#click").unbind("click");     刪除 click 事件
  $("#click").unbind();            刪除全部事件
  
  JavaScript:
  var click=document.getElementById("click");
  click.removeEventListener("click");    //除了IE8或以前
  click.detachEvent("click");            //IE8或以前

• 單擊

  jQuery:
  $("#click").click(function(){
      //your code
  });
  
  JavaScript:
  document.getElementById("click").onclick=function(){
      //your code
  };

• 觸發事件trigger()

  jQuery:
  $("#click").click(function(){
      //your code
  });
  
  $("#click").trigger("click");

• 綁定並只執行一次事件

  jQuery:
  $("#button").one("事件名稱",function(){    //事件名稱：click/mousemove/keypress...
      //your code
  })

遍歷

• each()

  jQuery:
  $("p").each(function(){
      //your code
  });
  
  JavaScript:
  var p=documentElementsByTagName("p");
  for(var i in p){
      p[i] = //yourcode;
  };

jQuery集成了不少效果，很好用

slideUP()              向上收起
slideDown()            向下展開
slideToggle()   
fadeIn(速度/ms)         漸入

$.contains(xxx,yyy);    判斷 元素xxx 中是否是有 元素yyy

對元素的操做

• 添加元素

  jQuery:
  $("div").append("<p>hello!</p>");    直接在 div 後面添加元素 p ，p 的內容爲 hello！
  $("div").append($("#color"));         在 div 後面添加本代碼中 id="color" 的元素
  
  JavaScript:
  var div=document.getElementById("div");
  var p=doucment.createElement("p");
  div.appendChild(p);

  $("div").before("<p>hello!</p>");     //在 div 上(前)面插入 "<p>hello!</p>"
   $("div").after("<p>hello!</p>");      //在 div 下(後)面插入 "<p>hello!</p>"

  $("div").wrap("<a>i`m yellow!</a>");    // <div> 下添加子元素 <a>

• 刪除元素

  $("div#color").empty();      //empty 方法將元素內容清除，但不刪除元素
  $("div#color").remove();      //remove 方法直接將元素刪除
  $("div#color").detach();     //detach 方法將元素刪除後暫存在瀏覽器的內存裏，
  var $L=$("div#color").detach();  //能夠將detach賦給一個變量，刪除的元素將能夠像數組同樣存在變量裏

• 獲取元素

  $("#fish").eq(n);    //找到 $("#fish") 下面第 n 個子元素，並封裝成jquery對象

  $("#fish").parent();        //id=fish 的元素的父元素
  $("#fish").children();      //id=fish 的元素的子元素
  $("#fish").prev();          //id=fish 的元素的上（前）一個元素
  $("#fish").next();          //id=fish 的元素的下（後）一個元素
  
  $("#fish").parents();       //id=fish 的元素的全部父元素
  $("#fish").siblings();      //id=fish 的元素的全部同級元素
  $("#fish").closest("ul");   //離 id=fish 最近的 ul
  
  $(".fish").first();      //取全部 class=fish 元素中第一個元素
  $(".fish").eq(n);        //取全部 class=fish 元素中第 n 個元素
  $(".fish").last();       //取全部 class=fish 元素中最後一個元素
  $(".fish").slice(a,b);   //取 class=fish 中 a 和 b 之間的全部元素，不包括 a 和 b
  $(".fish").filter();     //取 class=fish 裏面符合 括號裏規則 的全部元素
  $(".fish").not();        //取 class=fish 裏面不符合 括號裏規則 的全部元素
  
  $("#fish").parent().parent().next().remove();    //隨意組合
  $("#fish").closest("ul").parents();              //隨意組合
  $(".fish").parents().filter(".yellow");          //隨意組合
  $(".fish ul").children().not("#yellow");         //隨意組合

• 替換元素

  $("#fish").replaceWith("<p>hello!</p>");   //把 id=fish 的元素替換成 <p>hello!</p>

• 查找元素index()

  <ul>
    <li id="yellow">yellow</li>
    <li id="blue">blue</li>
    <li id="purple">purple</li>
  </ul>
  
  jQuery:
  var index = $("ul > li").index($("#yellow"));    //查找ul下li裏#yellow的元素的索引號

this

jQuery:
$(this).click(function(){});

JavaScript:
this.click=function(){};

對CSS的操做

jQuery中有addClass、removeClass這樣的命令來直接對單個CSS類進行操做
JavaScript有className、classList這樣的命令，只能對所有CSS類進行操做

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");

JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");