jQuery选择器和事件

最新推荐文章于 2024-06-08 19:06:47 发布

MissZhou要努力

最新推荐文章于 2024-06-08 19:06:47 发布

阅读量354

点赞数

本文链接：https://blog.csdn.net/zhou_yujia/article/details/49907553

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

选择器：

根据元素类型选择

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <p class="pclass"<span style="font-family: Arial, Helvetica, sans-serif;">>p1</p></span>
    <p id="pid">p2</p>
    <button>click me</button>
</body>
</html>

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

执行结果两个p元素都变了

根据元素id选择器：

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

根据元素class选择：

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

事件：

单击、双击、移动消失：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button>click me</button>
</body>
</html>

$(document).ready(function(){
   $("button").click(function(){
        $(this).hide();
   }) ;
    $("button").dblclick(function(){
        $(this).hide();
    }) ;
    /*$("button").mouseenter(function(){
        $(this).hide();
    });*/
    $("button").mouseleave(function(){
        $(this).hide();
    });
});

事件绑定、解除绑定：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button id="click">click me</button>
</body>
</html>

$(document).ready(function(){
    $("#click").bind("click",clickHandler1);
    $("#click").bind("click",clickHandler2);
    $("#click").unbind("click");//所有的都解除绑定
    $("#click").unbind("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}

由于bind unbind实际上是调用了底层的on off所以代码还可以这么写：

$(document).ready(function(){
    $("#click").on("click",clickHandler1);
    $("#click").on("click",clickHandler2);
   // $("#click").off("click");//所有的都解除绑定
    $("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}$(document).ready(function(){
    $("#click").on("click",clickHandler1);
    $("#click").on("click",clickHandler2);
   // $("#click").off("click");//所有的都解除绑定
    $("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}

事件之事件目标与冒泡

目标：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <div style="width:300px;height:300px;background-color: chartreuse">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>
</body>
</html>

$(document).ready(function(){
    $("body").bind("click",bodyHander);
    $("div").bind("click",divHander);
});
function bodyHander(event){
    console.log(event);
}
function divHander(event){
    console.log(event);
}

效果：

事件冒泡：

阻止事件冒泡：

event.stopImmediatePropagation()阻止所有事件冒泡

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

Also in: Events > Event Object

event.stopPropagation()阻止父级事件冒泡

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(document).ready(function(){
    $("body").bind("click",bodyHander);
    $("div").bind("click",divHander1);
    $("div").bind("click",divHander2);
});
function bodyHander(event){
    conlog(event);
}
function divHander1(event){
    conlog(event);
  //  event.stopPropagation();
    event.stopImmediatePropagation();
}
function divHander2(event){
    conlog(event);
}
function conlog(event){
    console.log(event);
}//防止console编译出错

事件之自定义事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button id="Click">click me</button>
</body>
</html>

$(document).ready(function(){
    $("#Click").click(function(){
        var e=jQuery.Event("myEvent");
        $("#Click").trigger(e);
    });
    $("#Click").bind("myEvent",function(event){
        console.log(event);
    });
});

可以精简为：

var ClickMeBtn;
$(document).ready(function(){
    ClickMeBtn=$("#Click");
    ClickMeBtn.click(function(){
        var e=jQuery.Event("myEvent");
        $("#Click").trigger(e);
    });
    ClickMeBtn.bind("myEvent",function(event){
        console.log(event);
    });
});

也说明了var是多么的强大==