MissZhou要努力

路漫漫其修远兮,吾将上下而求索

jQuery选择器和事件

选择器:

根据元素类型选择

<!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.

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是多么的强大==










阅读更多
版权声明:⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄hiahiahia 欢迎斧正 https://blog.csdn.net/zhou_yujia/article/details/49907553
个人分类: 前端
上一篇jQuery简介及语法
下一篇poj3177Redundant Paths【构造双连通分量:并查集缩点 模板】
想对作者说点什么? 我来说一句

jQuery API

2012年11月20日 234KB 下载

jQuery学习笔记

2013年03月26日 15KB 下载

没有更多推荐了,返回首页

关闭
关闭