jQuery語法

1. 基礎(chǔ)語法：$(selector).action(),美元符號定義jQuery,選擇符selector查詢和查找HTML元素,jQuery的action（）執(zhí)行對元素的操作
2. 引入jQuery

<script src="jquery-3.3.1.min.js"></script>

3. 文檔加載完畢

$(document).ready(function () {
    alert("文檔加載完畢");
});

4. 點(diǎn)擊某個(gè)p元素即會(huì)隱藏其顯示的內(nèi)容

$(document).ready(function () {
       $("p").click(function () {
        $(this).hide();
    })
});

jQuery選擇器

1. 元素選擇器，指定元素進(jìn)行修改，點(diǎn)擊按鈕修改p中的內(nèi)容

$(document).ready(function () {
    $("button").click(function () {
    $("p").text("修改");
});
});

2. id選擇器

$("#pid").text("修改");

3. 類選擇器

$(".pclass").text("修改");

4. 選擇器的變動(dòng)類似于css中的變動(dòng)

jQuery事件

1. 事件常用方法:點(diǎn)擊事件，雙擊取消按鈕，鼠標(biāo)移上mouseenter，鼠標(biāo)移開mouseleave其他事件方法可以查看API

$(document).ready(function () {
    $("button").dblclick(function () {
        $(this).hide();
    });
});

2. on事件綁定，或者使用bind

$(document).ready(function () {
    $ ("#btn").on("click",clickHander1);
});
function clickHander1() {
    console.log("clickHander1")
}

3. off解除綁定或者unbind

$(document).ready(function () {
    $ ("#btn").on("click",clickHander1);
    $ ("#btn").on("click",clickHander2);
    $ ("#btn").off("click",clickHander2);
});

4. 事件目標(biāo)

$(document).ready(function () {
    $("body").on("click",bh);
    $("div").on("click",dh);
});
function bh(event) {
    console.log(event)
}

5. 事件冒泡,阻止父級事件冒泡，使本次事件停止執(zhí)行

event.stopPropagation()  

6. 阻止所有事件冒泡,使用后自此以下事件均停止執(zhí)行

function dh(event) {
    console.log(event)
    event.stopImmediatePropagation()
    
}

7. 自定義事件，通過jQuery添加一個(gè)自定義事件btn，通過trigger（）方法觸發(fā)自定義事件

var btn;
$(document).ready(function () {
    btn=$("#btn");
    btn.click(function () {
        var e=jQuery.Event("MyEvent");
      btn.trigger(e);
    });
    btn.on("MyEvent",function (event) {
   console.log(event);
    });
});

捕獲HTML內(nèi)容

1. text（）方法,獲得id為pid的標(biāo)簽中的內(nèi)容

$(document).ready(function () {
    $("#btn").click(function () {
        alert("text:"+$("#pid").text());
    });
});

2. 若使用html（）方法可以得到元素里的所有內(nèi)容，包括標(biāo)簽顯示

alert("text:"+$("#pid").html());

3. val（）方法可以獲取輸入字段的值，比如文本框中的內(nèi)容

$(document).ready(function () {
    $("#btn").click(function () {
        alert("text:"+$("#iid").val());});
});

4. attr（）獲取元素的屬性,獲取a標(biāo)簽的鏈接屬性

alert("text:"+$("#aid").attr("href"));