jQuery选择器和事件

最新推荐文章于 2021-06-17 08:45:51 发布

bboyjoe

最新推荐文章于 2021-06-17 08:45:51 发布

阅读量761

点赞数

分类专栏： jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/bboyjoe/article/details/47150397

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1）选择器

$(".className")——类选择器；

$("#IDName")——ID选择器；

$("ElementTagName")——元素名选择器；

更多选择器点击打开链接

2）事件

click()——点击事件；

dblclick()——双击事件；

mouseenter()——鼠标进入事件；

mouseleave()——鼠标离开事件；

更多事件点击打开链接

3）事件的绑定和解绑

bind()、on()——事件绑定;

unbind()、off()——事件解绑；

注意on()、off()需要在jQuery1.7版本以上；

<button id="btn1">事件绑定</button>

<pre name="code" class="javascript">$(document).ready(function(){
    $("#btn1").bind("click",clickHandler);
    $("#btn1").bind("click",clickHandler2);
    $("#btn1").unbind("click",clickHandler2);
});

function clickHandler(e){
    console.log(e.target.innerHTML);

}function clickHandler2(e){
    console.log(e.target.id);
}

4)事件的目标

currentTarget与target的区别:

1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）;
2、只有当目标流处于目标阶段的时候才相同;
3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。

5）事件的冒泡

event.stopImmediatePropagation()——阻止所有元素的事件冒泡；

event.stopPropagation()——阻止父级元素的事件冒泡；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Dom元素的设置</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="eventTarget.js"></script>
    <style type="text/css">
        #div1{
            width:200px;
            height: 200px;
            background-color: #0088bb;
        }
        #div1 ul{
            list-style-type: none;
        }
    </style>
</head>
<body>
<div id="div1">
    <ul>
        <li>广州恒大</li>
        <li>山东鲁能</li>
        <li>上海上港</li>
        <li>北京国安</li>
        <li>上海申花</li>
    </ul>
</div>

</body>
</html>

eventTarget.js的代码：

$(document).ready(function(){
    $("body").bind("click",bodyHandler);
    $("div").bind("click",divHandler);
    $("div").bind("click",divHandler2);
});

function bodyHandler(e){
    //currentTarget:body; target:div
    console.log(e);
}

function divHandler(e){
    //currentTarget:div; target:div
    console.log(e);
    //阻止父级元素的冒泡
    //e.stopPropagation();
    //阻止所有元素的冒泡
    e.stopImmediatePropagation();
}
function divHandler2(e){
    console.log(e);
}

6）自定义事件：

jQuery.Event("myEvent")——指定自定义事件的类型为myEvent;

$(selector).trigger(event,[param1,param2])——规定被选元素触发的事件；

第一种书写方式：

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});
       
//触发hello事件
element.trigger("hello");

第二种书写方式：

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>trigger demo</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="myEvent.js"></script>
</head>
<body>
<button id="btn">click me</button>

</body>
</html>

myEvent.js代码：

    //自定义事件
var btn;
$(document).ready(function(){
    btn=$("#btn");
    btn.click(function(){
        //自定义事件类型
        var e=jQuery.Event("myEvent");
        //触发自定义事件
        btn.trigger(e);
    });
    //绑定自定义事件
    btn.on("myEvent",function(e){
        console.log(e);
    });
});

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器和事件

1）选择器 $(".className")——类选择器； $("#IDName")——ID选择器； $("ElementTagName")——元素名选择器；更多选择器点击打开链接2）事件 click()——点击事件； dblclick()——双击事件； mouseenter()——鼠标进入事件； mouseleave()——鼠标
复制链接

扫一扫