jQ事件

jQuery中的鼠标事件

    1.0 click单击事件
    $(".box").click(function () {
        alert("这是一个click鼠标JQ单击事件")
    });
    2.dblclick鼠标双击事件
    $(".box").dblclick(function () {
        alert("这是一个dblclick鼠标JQ双击事件")
    })
     3.mousedown鼠标移动到某个元素上被按下的时候触发的事件
    $(".box").mousedown(function () {
        alert("这是一个mousedown鼠标被按下的时候触发的事件")
   })

    4. mouseup当在元素上松开鼠标按钮时触发的事件
    $(".box").mouseup(function () {
       alert("这是一个mouseup鼠标被松开的时候触发的事件")
    })

    5.mouseenter事件   在移入时触发的事件 子元素不触发
    $(".box").mouseenter(function () {
       console.log("mouseenter")
    })
    
    6. mouseleave事件   在移入和移出都会触发  子元素不触发
    $(".box").mouseleave(function () {
        console.log("mouseleave")
    })
    

    7. mouseover事件  移入时会触发的事件 里面的子元素也会触发
   $(".box").mouseover(function () {
       console.log("mouseover");
   })
    
    8.  mouseout事件  鼠标离开时触发的事件 子元素也会触发
   $(".box").mouseout(function () {
        console.log("mouseout");
   })

jQuery鼠标事件之hover事件：伪类
$(".box").hover(function () {
//进入box触发的函数
$(this).addClass(“bgpink”);
}, function () {
$(this).removeClass(“bgpink”);
})

        */
        jQuery中添加点击事件
        $(".box").click(function () {
            // alert("box的点击事件");
            // 1.获取匹配元素集合中的第一个元素的样式属性
            var width = $(".box").css("width");
            var width1 = $(this).css("width");
            console.log(width);
            console.log(width1);//this


            //console.log（width）
            //2.传一个数组，返回一个对象结果
            var styleObj = $(this).css(["width", "height"]);
            console.log(styleObj);
            console.log(styleObj.width);


   JQuery中的focus()获取焦点事件与blur（）失去焦点事件（鼠标事件）
    $('input').focus(function () {//检测当前元素获取焦点
        console.log("input获取到了焦点")
    })

    $('input').blur(function () {//检测当前元素失去焦点
        console.log("input失去到了焦点")
    })

    jQuery中的focusin（）事件与focusout
    $(".wrap").focusin(function () {//focusin跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
        $(this).addClass("bgPink")
    })

    $(".wrap").focusout(function () {//focusout跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
        $(this).removeClass("bgPink")
    })


    jQuery中的表单事件 change()事件

    $("form input").change(function (event) {//event代表事件对象
        console.log(event.target.value );//获取到input的值了
    })
    $("form select").change(function () {
        var value = $(this).val();
        console.log(value)
    })
    $("form textarea").change(function () {
        console.log(event.target.value);//获取到了textarea的文本值
    })

    jQuery中的表单事件 select（）事件
    $("form input").select(function () {
        console.log(123)
    })

    jQuery表单事件中的submit（）事件  
    $("fomr").submit(function () {
        //写验证表单的代码。。。
        return false;      //表单的自动提交
    })

//1.1 jQuery键盘事件 keydown（）与keyup（）事件

    $(".target1").keydown(function (e) {//键盘按下发生的事件
       // console.log(e.target.value);
        $("em").first().text(e.target.value);//选择匹配元素的第一个
    })


    $(".target2").keyup(function (e) {//键盘松开发生的事件
        // console.log(e.target.value);
        $("em").last().text(e.target.value);//last选择匹配元素的最后一个
    })

事件的绑定和解绑 on（）的多事件绑定
//给元素绑定一个单击事件 on方式
$("#div1").on(“click”, function (e) {//on给元素绑定上事件
$(this).text(“触发了:”+e.type)
})

    //多个事件绑定同一个函数
    $("#div2").on("mousedown mouseup", function (e) {
        $(this).text("触发了:" + e.type)
    })

    //多个事件绑定不同函数

    $("#div3").on({
        mousedown: function () {
            $(this).addClass("bgGreen");
        },
        mouseup: function () {
            $(this).removeClass("bgGreen");
        }
    })


    1.2 卸载事件off（）方法

    $("#div2").off("mousedown");  //off消除事件方法
  $("#div3").off("mouseup")    //去除了mouseup这个方法的效果