JQuery简介（一）

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

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

 选择器：

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

元素选择器：

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

事件：

 ①常用的事件方法：

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

②事件的绑定和移除

$(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");
}

③事件的目标和冒泡

$(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");
}

 ④自定义事件

$(function () {
    var clickmeBtn = $("#Btn1");//使用变量接收Element
    clickmeBtn.click(function () {
        var e = jQuery.Event("MyEvent");
        clickmeBtn.trigger(e);
    });
    clickmeBtn.on("MyEvent", function (event) {
        console.log(event)
    });
});

JQuery中的回调：

$(function () {
    $("div").on("click", function () {
        $("div").hide(1000, function () {//后面的参数是回调函数
            $("div").slideDown(1000);
        });
    });
});

End