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("
  hello!
  ");    直接在 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("
  hello!
  ");     //在 div 上(前)面插入 "
  hello!
  " $("div").after("
  hello!
  ");      //在 div 下(后)面插入 "
  hello!
  "

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

• 删除元素

  $("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("
  hello!
  ");   //把 id=fish 的元素替换成 
  hello!

• 查找元素index()

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

this

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

对CSS的操作

jQuery中有addClass、removeClass这样的命令来直接对单个CSS类进行操作

jQuery:$("p").addClass("yellow");$("p").removeClass("yellow");JavaScript:p.className= //your code;p.classList.add("");p.classList.remove("");