jQuery高級選擇器，屬性選擇器，過濾器

建立元素

<div>1</div>
<div>2</div>
<div>3</div>

// jQuery的寫法

$("div").text("你好");

// 普通js寫法

var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
    divs[i].textContent="你好";
}

**$("div").text("你好");//等同於給每個div裏面增長textContent值爲你好**

console.log($("div"));
選擇器獲取的是全部標籤是div的列表,這個列表就叫作jQuery對象，jQuery對象不能使用任何DOM的方法
$("div").addEventListener()//錯誤的
若是但願使用DOM的方法，必須將jQuery轉換爲DOM對象

將jQuery列表中某個一個DOM獲取出來
console.log($("div")[0]);
console.log($("div").get(0));

console.log(Array.from($("div")));//將jQuery對象轉換爲DOM數組

將DOM元素轉換爲jQuery

var div=document.createElement("div");
$(DOM) 就能夠將DOM元素轉換爲jQuery對象
console.log($(div))

選擇器：

$("div");       // 標籤名選擇器
    $("#div1");     // id選擇器
    $(".div0");     //class選擇器
    $("*");         //通配符選擇器
    $("div .div1"); //後代選擇器
    $("div>.div1"); //子代選擇器
    $(".div1+div"); //下一個兄弟選擇器
    $(".div1~div"); //下面全部的兄弟選擇器
    $("div.div1");  //div中類名是div1的div 
    $(".div1>*");   //類名是div1全部的子元素
    $(".div1>*").length;//div1子元素的數量
    $(".div1>").length; //div1子元素的數量
    $(".div1+*")//div1下一個任意兄弟元素

$(".div1").next();      // 等同於$(".div1+");
    $(".div1").nextAll();   // 等同於$(".div1~");
    $(".div1").nextUntil(".div2").css("color","red");//div1到div2之間的兄弟元素

    $(".div1").prev();      //向上的一個兄弟元素
    $(".div1").prevAll();   //向上的全部兄弟元素
    $(".div1").prevUntil(".div2");//向上到div2直接兄弟元素

    查找div1中的span標籤
    $(".div1").find("span");//$(".div1 span");
    $(".div1").children();//$(".div>");

屬性選擇器：

$("div[a]");   //[a] 表示是否具有標籤屬性a
    $("[a]");      //[a] 表示是否具有標籤屬性a
    $("[a=1]");    //標籤必須有a屬性，而且屬性值是1
    $("[a^=1]");   //屬性值的開頭是1的元素
    $("[b|=ab]").css("color", "red");//值是ab或者以ab起頭後面使用—來鏈接的

    $("[b~=ab]").css("color", "red");
//值是ab或者值是以空格區分，而且中間包含ab的，通常用於class中的多個樣式選擇
    $("[b$=b]");   // 以b結尾的值
    $("[b!=ab]");  // 值不是ab的
    $("[b*=c]");   // 值中包含有c這個字符的
    $("[a][b]");   // 有a屬性和b屬性的元素

過濾器：

$("li:first");// 獲取頁面中的第一個li 
    $("li").first();// 將全部li放在一個列表中，篩選出第一個元素
    $("li:first-child")//將每一個li父元素中的第一個子元素,若是是li的篩選出來
    $("li:first-of-type") // 將每一個li父元素中第一個li類型的子元素篩選出來
    
    $("li:last")    // 獲取頁面中的最後一個li 
    $("li").last(); // 將全部li放在一個列表中，篩選出最後一個元素
   $("li:last-child")//將每一個li父元素中的最後一個子元素,若是是li的篩選出來
    $("li:last-of-type")  // 將每一個li父元素中第一個li類型的子元素篩選出來
    
    $("li:even") //偶數  列表是從0開始計數
    $("li:odd")  //奇數  列表是從0開始計數
    
    $("li:nth-child(even)")    //偶數，列表是從1開始計數
    $("li:nth-child(odd)")     //奇數，列表是從1開始計數

    $("li:nth-of-type(even)") //偶數，列表是從1開始計數
    $("li:nth-of-type(odd)")  //奇數，列表是從1開始計數
    
    $("li").eq(2)  //列表中下標爲 2 的元素 
    $("li:gt(2)")  //列表中下標大於2的全部元素 
    $("li:lt(2)")  //列表中下標小於2的全部元素
    $(":header")   //全部h1-h6的元素 
    $(":animated") //全部使用aniamte動畫的元素 
    $(":focus")    //聚焦元素   
    $(":empty"))   //沒有內容或者子元素的元素 
    $(".div1:has(.div2)"))  //含有div2的內容的div1元素 
    $(".div2:parent")       //判斷div2有子元素的或者有內容的 
    $(".div2").parent()     //獲取div2的父元素
    $(".div2").parents()    //獲取div2的全部父元素
    $(".div2").parentsUntil("html") //獲取div2的全部父元素中到什麼以前的 
    $(".div1:contains(1)")  //判斷元素的後代中有1這個內容的元素 
    $(".div4:hidden")       //隱藏元素，針對display:none或者是不顯示的元素
    $(":hidden")        //visibility: hidden;不是隱藏，由於它佔位了
    $(":visible")       //顯示元素 
    $(":only-child")    //只有一個子元素的元素 
    $("div").is(".div1") //這個方法獲得一個布爾值，是否在div中有類名是div1的元素
    $("div").hasClass("div1") //這個方法獲得一個布爾值，是否在div中類名是div1的元素
    $("li").slice(2,4)   //div列表中選擇第2個到第4個之間的元素
    
    $(":input")
    $(":text");//type=text的input
    $(":password");

    $(":disabled");//不可用
    $(":enabled");//可用
    $(":checked");用於input中checkbox和radio
    $(":selected");//用於下拉菜單的元素