JQuery简介（一）

1.认识JQuery（说明：使用JQuery的ready函数建议写法，直接$(hander);即可，参考：链接）

 重点说明下AJAX是什么：是在不刷新页面的情况下，能够请求到服务器的数据，并用来更新页面上的部分内容，能够给用户带来很好的使用体验；

 选择器：

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

View Code

元素选择器：

$(document).ready(function () {
    $("button").click(function () {
        $("p").text("P元素被修改了");
    });
});

View Code

事件：

扫描二维码关注公众号，回复： 9062941 查看本文章

 ①常用的事件方法：

$(document).ready(function () {
    $("#btn1").click(function () {
        $(this).hide();
    });
    $("#btn2").dblclick(function () {
        $(this).hide();
    });
    $("#btn3").mouseenter(function () {
        $(this).hide();
    });
    $("#btn4").mouseleave(function () {
        $(this).hide();
    });
});

View Code

②事件的绑定和移除

$(function () {
    $("#btn1").on("click", handler1);
    $("#btn1").on("click", handler2);
    //$("#btn1").off();//移除所有绑定事件
    $("#btn1").off("click", handler1);
});
function handler1(e) {
    console.log("handler1");
}
function handler2(e) {
    console.log("handler2");
}

View Code

③事件的目标和冒泡

$(function () {
    $("div").on("click", divhandler1);  
    $("div").on("click", divhandler2);
    
    $("body").on("click", bodyhandler1);
});
function divhandler1(event) {
    console.log("div1");
    //event.stopPropagation();//阻止向父控件事件冒泡
}
function divhandler2(event) {
    console.log("div2");
    event.stopImmediatePropagation();//这个和绑定顺序（注意divhandler1和divhandler2的绑定顺序，如果1在前，stopImmediatePropagation()无法阻止1的执行，只有在后面绑定才能阻止执行）有关系，绑定顺序之后的所有事件都不会冒泡执行
}
function bodyhandler1(event) {
    console.log("body");
}

View Code

End