jQuery语法

1. 基础语法：$(selector).action(),美元符号定义jQuery,选择符selector查询和查找HTML元素,jQuery的action（）执行对元素的操作
2. 引入jQuery

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

3. 文档加载完毕

$(document).ready(function () {
    alert("文档加载完毕");
});

4. 点击某个p元素即会隐藏其显示的内容

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

---

jQuery选择器

1. 元素选择器，指定元素进行修改，点击按钮修改p中的内容

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

2. id选择器

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

3. 类选择器

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

4. 选择器的变动类似于css中的变动

---

jQuery事件

1. 事件常用方法:点击事件，双击取消按钮，鼠标移上mouseenter，鼠标移开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. 事件目标

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

5. 事件冒泡,阻止父级事件冒泡，使本次事件停止执行

event.stopPropagation()  

6. 阻止所有事件冒泡,使用后自此以下事件均停止执行

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

7. 自定义事件，通过jQuery添加一个自定义事件btn，通过trigger（）方法触发自定义事件

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内容

1. text（）方法,获得id为pid的标签中的内容

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

2. 若使用html（）方法可以得到元素里的所有内容，包括标签显示

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

3. val（）方法可以获取输入字段的值，比如文本框中的内容

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

4. attr（）获取元素的属性,获取a标签的链接属性

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

---