1.選擇器獲取元素
$("")//里面放字符串--選擇器

//1.基本
$(".item");//類名
$("div");//標(biāo)簽選擇
$("#item")//id名
$("*")//所有標(biāo)簽

//2.層級(jí)
$(".item p")//后代選擇器
$("label+input");//緊跟label的input
$("label~input");//兄弟//與label同輩的input
$(".item>p");//子代//(類名為item的所有是p標(biāo)簽的子級(jí)）

//3.基本篩選
$("p:first");//所有匹配標(biāo)簽的第一個(gè)
$("p:last");//所有匹配元素的最后一個(gè)
console.log($("p:not(':nth-child(1)')"));//不是所選的p
$(":root").css("color","red");//選擇該文檔的根元素

$("p:even");//索引值為偶數(shù)的元素
$("p:odd");//索引值為奇數(shù)的元素
$("p:gt(0)");//索引值大于所給的下標(biāo)的
$("p:lt(10)");//索引值小于所給的下標(biāo)值的

$(":header");//匹配所有h標(biāo)簽
// $(":header:nth-child(1)").css("color","green");

// $(":animation");//匹配所有正在執(zhí)行動(dòng)畫的
//結(jié)合回調(diào)
// $(".btn").click(function(){
//  $(".item:not(:animation)").animation({ left: "+=20"},100)
// })


//4.內(nèi)容
$("div:contains('文本')").css("color","green");//選擇文本內(nèi)容是“文本”的標(biāo)簽
$("div:empty");//匹配空元素(不包含文本和標(biāo)簽)
$("div:has(p)");//所有包含p的div
$("div:parent");//查找所有含有子元素或文本的div

// 5.可見(jiàn)性
$("div:hidden");//匹配所有隱藏的div
$("div:visible");//匹配所有可見(jiàn)的div


// 6.屬性 
$("div[class]");//找所有含有class屬性的div
$("div[type='text']")//找所有typem的元素（用于找特定元素）
$("div[class!='item']")//找所有類名不是item的div
$("div[class^='tit']")//找所有屬性是以tit開(kāi)頭的
$("div[class$='tle']")//找所有類名以tle結(jié)尾的元素
$("div[class*='it']")//所有包含 類名it的
$("div[class][id='item']")//有多個(gè)屬性的（還可以規(guī)定特定屬性名）

// 7.子元素
$("span:first-child").css("color","lightblue");//找子級(jí)span是第一個(gè)的(查詢包含其他標(biāo)簽)
$("p:last-child").css("color","lightgreen");//找是最后一個(gè)子元素的p(查詢包含其他標(biāo)簽)
$(".item:first-of-type")//??


// 8.表單
$(":input");//所有input--text,button image/submit/reset/radio/checkbox/file
$(":text");

// 表單對(duì)象屬性
$("input:enabled");//所有禁用的表單
$("input:disabled");//沒(méi)有被禁用
$("input:checked");//所有選中的
$("select option:selected");//所有選擇的復(fù)選框

2.原生對(duì)象與jq對(duì)象之間的轉(zhuǎn)化

注意：
（1）通過(guò)jq獲取的是jq對(duì)象，通過(guò)元素的document.getElement獲取的是原生對(duì)象
（2）原生對(duì)象不能調(diào)用jq對(duì)象的方法，同理Jq也對(duì)象不能調(diào)用原生的方法和屬性

// 1.jq對(duì)象與原生對(duì)象的轉(zhuǎn)化

// 原生轉(zhuǎn)jq
var content =document.getElementsByClassName("content");
$(content).css("color","pink");

// jq轉(zhuǎn)原生
$(".content")[0].innerHTML="jq轉(zhuǎn)原生1";
$(".content").get(1).innerHTML="jq轉(zhuǎn)原生2";


// 2.創(chuàng)建元素
$("<div style='color:gray'>我是創(chuàng)建的div</div>").append("</br><span>我是創(chuàng)建div中的span</span>").appendTo("body")

3.css樣式

（1）獲取css樣式:  .css（）    
 var color = $(".content").css("backgroundColor");
 console.log(color);

（2）設(shè)置css樣式
  $("p").css("color","blue");   // (單個(gè)樣式)
  $("p").css({
    color:"gold",
    border:"1px solid red"
})（多個(gè)樣式）

 (3):結(jié)合回掉函數(shù)，獲取的元素有幾個(gè)，函數(shù)就會(huì)執(zhí)行幾次,傳入下標(biāo)和老的值

    var Arr =["red","green","blue","yellow"];
    $("p").css("color",function(index,oldValue){
          return Arr[index];
    })
    $("p").css({
          width:function(index,oldValue){
                return 100*(index+1);
          },
          height:function(index,oldValue){
               return 50;
          },
         fontSize:function(index,oldValue){
              return 35;
         }
    });

  (4)位置:offet/position/scrollTop
    // offset:在當(dāng)前視口的相對(duì)偏移
       console.log($(".offset").position());//{top: 100, left: 250}
     
    // position():相對(duì)于父元素的top,left值
       console.log($(".offset").position());//{top: 100, left: 250}

    // scrollTop() 獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移。
       $(".offset").scrollTop(300)
       $(".offset").scrollTop()

  (5)尺寸（全純數(shù)字） 

    // 尺寸hieght/width/innerHeight/innerWidth/outHeight/outWidth
    // 獲取樣式 $(".offset").height();
    // 設(shè)置樣式：$(".offset").height(加參數(shù))
    $(".div").height();
    $(".div").width();
    $(".div").innerWidth();//獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框）
    $(".div").innerHeight();//獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度（包括補(bǔ)白、不包括邊框）
    $(".div").outerHeight();//獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度（包括補(bǔ)白邊框）
    $(".div").outerWidth();//獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白邊框）

4.文檔處理

// 創(chuàng)建元素、添加元素
// 1.內(nèi)部插入
// a.append(b) :把b插入a的最后面
// a.appendTo(b):把a(bǔ)插入b的最后
// a.prepend(b)：把b插入a的前面
// a.prependTo(b)：把a(bǔ)插入到b的最前

$("<p class='item2' style='color:lightgreen'></p>").append("<span>spqn</span>").appendTo("body");


// 2.外部插入 after/insertAfter
// a.after(b)//把b插入到a的后面
// a.insertAfter(b);//把a(bǔ)插入到b后
// a.before(b);//把b插入到a的前面
// a.insertBefore(b);//把a(bǔ)插入到b的前面

$(".content").after($("p"));//content后面插入所有的p
$(".fool").insertAfter(".content");//把fool插入到.content之后


3.包裹 

 （1）wrap();在集合中匹配的每個(gè)元素周圍包裹一個(gè)HTML結(jié)構(gòu)。
$("form").wrap("<div class='BG'></div>");//用div包裹form

// wrap回調(diào)函數(shù)返回值, 當(dāng)參數(shù)是函數(shù)的時(shí)候，jq會(huì)把函數(shù)的返回值作為包裹form的父級(jí)來(lái)使用
// 需求：用內(nèi)容為顯示的div包裹form
    $("form").wrap(function(){
    var divs = document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        if(divs[i].innerHTML=="顯示"){
            return divs[i];
         }
      }
    });

 （2）unwrap:去掉父級(jí) ，
   $(".content").unwrap();

 （3）wrapAll: 把所有的匹配元素用一個(gè)父級(jí)包裹，第一個(gè)匹配元素在哪，加的父級(jí)就在哪
    $("p").wrapAll(".item2");

 （4）wrapInner： 給匹配元素的內(nèi)容（整個(gè)內(nèi)容，包括文本）加
$("p").wrapInner("<b></b>");


4.刪除remove() / deatch（）
//empty()：就是把子節(jié)點(diǎn)全部刪除為空（包括文本和標(biāo)簽）
// a.remove()  刪除所有，刪除后再添加回去，不能使用前面所綁定的事件或?qū)傩?// a.deatch()  刪除所有，刪除后再添加回去，能使用前面所綁定的事件或?qū)傩裕〞?huì)保留）
// $(".content").remove();//刪除
// $(".content").remove("#con")//參數(shù)代表選擇器篩選的元素


  5.替換
// a.replaceWith(b)：把a(bǔ)元素替換成b
//a.replaceAll(b):用所有的a替換掉b
$("p").replaceWith("<b>我是b標(biāo)簽</b>");//把所有的p替換成b
$("p").replaceAll(".content");//用所有的p替換掉.content

6.事件

（1）ready：當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行。
// 文檔加載完畢和window.onload類似，都是文檔加載完畢之后執(zhí)行，
   不同點(diǎn)在于document.ready可以綁定多個(gè)事件

 $(document).ready(function(){
    console.log("文檔加載完畢1");
 });
 $(document).ready(function(){
    console.log("文檔加載完畢2");
 });
 //簡(jiǎn)化版，最常用
 $(function(){
    console.log("文檔加載完畢3");
 });
  
（2）事件綁定
 1. on綁定事件，四個(gè)參數(shù)
    // div.on(type,"selector",obj,fn)
    // type:字符串類型 ，放的是事件類型入:clcik
    // selector:字符串類型。是選擇器，代表過(guò)濾，只有這個(gè)選擇器內(nèi)的元素才能觸發(fā)事件
    // obj：對(duì)象類型
    // fn函數(shù)，事件觸發(fā)之后執(zhí)行的函數(shù)

    //綁定寫法：
    $(".p")on("click",function(){})
    $("div p:first-child:first").on("click","span",{name:"明月",age:17},function(ev){
                // console.log("點(diǎn)擊了p標(biāo)簽");//第二個(gè)參數(shù)給類選擇器
                console.log(ev.data);//{name: "明月", age: 17}
    });

2.解綁off
    // div.off()所有時(shí)間都移出
    // div.off("click")移除所有點(diǎn)擊事件
    // div.off("click",fn)//移除指定的點(diǎn)擊事件
    // $("div p:first-child:first").off("click",fn)

3..one()：綁定一次事件執(zhí)行后就不會(huì)執(zhí)行了,只能點(diǎn)一次

4. bind():方法為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。
    $("input[type=text]").click(function(){
          $("p").slideToggle();
    })

5.unbind():移除事件
    $("#btn").click(function(){
        $("input[type=text]").unbind();//input的點(diǎn)擊事件被取消
    })

6. blur():輸入框失焦時(shí)觸發(fā)
    $("input").blur(function(){
        $(this).css("backgroundColor","red");
    })

7.focus:獲得焦點(diǎn)
    $("input[type=text]").focus(function(){
        console.log("輸入框獲得焦點(diǎn)")
    })

8.change():當(dāng)輸入域發(fā)生變化時(shí)：
    $("input[type=text]").change(function(){
     // input值改變，觸發(fā)change事件
        $(this).css("backgroundColor","lightgreen")
})

9. dblclick雙擊
     $(".item").click(function(){
        $(this).css("color","lightgreen")
      })

10.delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
     $(".item").delegate("p","click",function(){
        $("img").slideToggle();
});

11.undelegate():從匹配元素移除一個(gè)被添加的事件處理器，現(xiàn)在或?qū)?lái) 
    // 取消.item的事件
    $(".p4").click(function(){
         console.log(1)
         $(".item").undelegate();
    })


12. resize():窗口改變大小時(shí)觸發(fā)
     $(window).resize(function(){
          console.log("窗口發(fā)生變化")
      })

13. scroll():窗口滑動(dòng)時(shí)觸發(fā)事件
    $(window).scroll(function(){
          console.log("滾動(dòng)");
     })
  
14. trigger():方法觸發(fā)被選元素的指定事件類型。事件觸發(fā)后文本會(huì)被選中
    $(".p3").select(function(){
          $(".p3").after("文本被選中！");
    });
    $("#btn").click(function(){
          $(".p3").trigger("select");
    });


15. triggerHandler()第一個(gè)被匹配元素的指定事件:與tigger的區(qū)別，事件觸發(fā)后文本不會(huì)被選中

7.事件對(duì)象

1. 鼠標(biāo)位置：pageX(相對(duì)于文檔的左邊緣),pageY 包含滑動(dòng)距離
$(document).mousemove(function(e){
    $("span").text("X:"+e.pageX+","+"Y:"+e.pageY)
})

2. 阻止默認(rèn)事件
event.preventDefault();

3. event.result() 包含由被指定事件觸發(fā)的事件處理器返回的最后一個(gè)值。
$("#btn").click(function(e) {
    return ("最后一次點(diǎn)擊的鼠標(biāo)位置是： X" +e.pageX + ", Y" + e.pageY);
});
$("#btn").click(function(e) {
     $(".p3").html(e.result);
});  

4. event.target:指哪個(gè)元素觸發(fā)了事件
$("p, #btn").click(function(event){
    $(".p3").html("Triggered by a " + event.target.nodeName + " element.");
});

5. event.timeStamp 該屬性返回從 1970 年 1 月 1 日到事件發(fā)生時(shí)的毫秒數(shù)。

6. event.type：表示事件的類型

7. 鍵盤事件對(duì)象 keydown/keypress/keyup
.event.which：顯示按下了哪個(gè)鍵

7.移交$的使用權(quán)
正常情況下$代表jQuery。如果和其他變量名有沖突，JQ可以把$的使用權(quán)交出去。

// console.log(jQuery(".content")) // jqery=$
// 移交$的使用權(quán)，
// 調(diào)用此方法后，不能繼續(xù)使用$來(lái)代表JQ。
// 用變量接接收返回值之后。這個(gè)變量就代表JQ
// var $$=$.noConflict();
// $$(".content").css("color","red");

8.常用工具
數(shù)組和對(duì)象操作

.each()：遍歷對(duì)象,回調(diào)函數(shù)返回index,obj

  $.each(["hello","world"]，function(index,el){
        console.log(index,el);
        //打印 0 hello /1 world
  })

  $("p").each(function(index,obj){
         $(this).click(function(){
                console.log(index,obj);//點(diǎn)擊打印各p標(biāo)簽的下標(biāo)和點(diǎn)擊的p標(biāo)簽
         })
   })

$(each)的回調(diào)函數(shù)每次返回?cái)?shù)組的下標(biāo)index,和數(shù)組的值obj