jQuery是javascript的庫

一、初識jQuery

jquery是由很多程式設計師編寫的簡寫函式庫

1、選擇器

var div=document.getElementByTagname("div")[0];//原生JS
var div=$("div");//jquery

2、事件機制

div.addEventListener("div",clickhandler);
function clickHandler(e){
}//原生JS的點選事件
div.on("click",{a:1},function(e){
});//jquery的點選事件

3、AJAX

var xhr=new XMLHTTPRequest
 
();
xhr.addEventListener("load",loadHandler);
xhr.open("POST","URl");
xhr.send("a=1")//原生JS
$.post("url","a=1",function(){
});//jquery

二、基礎選擇符

jQuery物件是一個類陣列,不能使用陣列的方法,不能使用DOM的方法和屬性

$()===jQuery();  //$===jQuery 都是函式，它也是建構函式，也是類，物件

$("div").text("a");
console.log($("div"));//這是一個類陣列

//jQuery物件.eq(index)獲取到jQuery中某一個jQuery物件
 

$("div").eq(0).text("a");
console.log($("div").eq(0));

//這個就是jQuery物件轉換成DOM物件的方法
//通過jQuery[index]這種方法呼叫的結果就是DOM元素
console.log($("div")[0]);
$("div")[0].textContent="a";

//DOM物件的所有屬性和方法不能在jQuery物件上使用,
//同理jQuery的所有屬性和方法,DOM中同樣也不可以使用;
//$(#id名)
console.log($("#div0"));
//$(.class名)
$(".div").text("名字")

//放入文字
$("#div0"
 
).text("內容");
//放入HTML標籤
$("#div0").html("<div></div>");
//設定多個樣式
$("#div0").css({
     color:"red",
     width:"100px"
});

//偵聽事件
$("#div0").on("click",function(e){
      console.log(e);
});
$("#div0").on("click",clickHandler);
     //這種比較好,就一個函式
     //上面在迴圈的過程中會出現多個函式
function clickHandler(e){

}

三、進階選擇器

<div>1
    <div class="div0">2</div>
    <div>3
        <div class="div0">4
             <div>5</div>
        </div>
        <div>6</div>
    </div>
    <div>7</div>
</div>

<div>8
    <span class="div0">9</span>
</div>  

<nav>11
     <div class="div0">12</div>
</nav>

<script>
    //群組選擇器    使用逗號分隔
    $("div,span").text("內容");

    //後代選擇器
    $("div div").text("a");
    $(".div0"); //所有class名為div0的元素,4個
    $("div.div0").css("position","absolute");//所有div並且class名為div0的元素,三個
    $(div .div0).css("color","green");//class名為div0並且父元素是div的元素;
    
    萬用字元
    $("*")
    $("div *");//div下所有後代元素,不包含當前div;
    $("ul *,div *")
</script>           

四、高階選擇符

<div>1
    <div class="div0">2</div>
    <div>3
        <div class="div0">4
            <div>5</div>
        </div>
        <div>6</div>
    </div>
    <div>7</div>
</div>
<div>8
    <span class="div0">9</span>
</div>
<span>10</span>
<nav>11
    <div class="div0">12</div>
    <span>13</span>
</nav>
<ul>
    <li></li>
    <li></li>
    <li class="li0"></li>
    <li></li>
    <li class="li1"></li>
    <li></li>
</ul>
<script>
    //子代選擇器
    $("div>.div0")
    //相鄰兄弟選擇器
    $(".div0+div")
    console.log($(".div0+*"));
    //多個兄弟選擇器
    console.log($(".div0~div"));
    
     $(".div0>div");
     $(".div0").find("div");//速度遠快於上面,等同於$(".div0 div");
     $(".div0").children("div");//等同於$(".div0>div");
     console.log($("div").find(".div0"));
 //連綴
     //如果方法前是一個jQuery物件,我們這個方法就是對這個前面的物件起作用,
     //如果前面的不是jQuery物件,就會再向前找到第一個jQuery物件起作用;
     $(".div0").find("div").css("backgroundColor","red").text("abc").on("click",function(){
        console.log($(".div"))
     })

$(".div0").next("div");//等同於$(".div+div");
$(".div0").next().text("a");//等同於$(".div0+*");
$(".li0").next().text("a");
$(".li0").nextAll().text("a");//等同於$(".li0~*");
$(".li0").nextAll(".li1").text("a");//等同於$(".li0~.li1");
$(".li0").nextUntil(".li1").text("a");//從.li0標籤向下找到.li1標籤之間的內容,不包含.li1
$(".li0").prev();//.li0向上一個元素;
$(".li0").prev(".li1");//.li0向上一個元素是.li1的元素,如果沒有就沒有選中的;
$(".li0").prevAll();//.li0向上所有的選擇器;
$(".li0").prevAll("div");//.li0向上所有哥哥是div的元素;
$(".li0").prevUntil(".li1");//從.li0向上到.li1的所有元素,不包含li1;
$(".li0").siblings().text("a");//從.li0的所有兄弟元素,也就是除了.li0以外的所有元素;
$(".li0").siblings(".li1");//搜尋.li0的兄弟元素中是.li1的元素;
</script>

純手工敲寫
如有錯誤
請多多提醒,評論
謝謝