jQuery -- 选择器和事件

最新推荐文章于 2022-07-20 17:12:55 发布

RedGuy_anluo

最新推荐文章于 2022-07-20 17:12:55 发布

阅读量3.1k

点赞数

分类专栏： HTML5 jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/RedGuy_anluo/article/details/51367190

版权

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

第一部分：选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="jquery-2.2.3.min.js"></script>
    <script src="Selector.js"></script>
</head>
<body>
    <P>P1</P>
    <P id="pid">P2</P>
    <P class="pclass">P3</P>

    <button>click me</button>
</body>
</html>

选择器js文件：


$(document).ready(function(){
   $("button").click(function(){
       // 此时,修改的是所有的P标签元素
        $("p").text("p元素被修改了");

       // 此时,修改id是pid的元素内容
       // 注意：使用id的需要加“#”来标示
        $("#pid").text("id是pid的元素被修改了");

       // 此时,修改类名为pclass的元素内容
        $(".pclass").text("类名是pclass的元素被修改了");
   }) ;
});

第二部分：简单事件

<body>
    <!--添加一个按钮-->
    <button>按钮</button>
</body>

js文件中：

$(document).ready(function(){

   // 单次点击事件
   // $("button").click(function(){
   //     $(this).hide();
   // })

    // 双击事件
    //$("button").dblclick(function(){
    //    $(this).hide();
    //})

    // 当鼠标移动到按钮上
    //$("button").mouseenter(function(){
    //    $(this).hide();
    //})

    // 当鼠标移开
    $("button").mouseleave(function(){
        $(this).hide();
    })
});

第三部分：事件的响应、冒泡与阻止冒泡

主要表现在网页内容的打印上：

<body>
    <div id="div" style="width: 300px;height: 300px;background-color: aqua">
        <ul>
            <li>A</li>
            <li>B</li>
        </ul>
    </div>
</body>

JS文件：


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

function bodyHandler(event){
    console(event);
}

function divHandler1(event){
    console(event);

    // 阻止了父级的事件的冒泡,使事件不在往下一级运行
    //event.stopPropagation();

    event.stopImmediatePropagation(); // 如果这里使用了这个,那么下面的将不在执行,而且body的也不再执行
}

function divHandler2(event){
    console(event);

    vent.stopPropagation();

    // 阻止了之后所有事件的冒泡
    //event.stopImmediatePropagation();
}

// 这么写的作用,是为了当程序以为打印而出错的时候,可以快速检查程序
function conlog(event){
    console.log(event);
}

第四部分：事件的绑定与解绑：

在html5文件中创建一个按钮：

    <button id="clickMeButton">click me</button>

然后在js文件中对其进行操作：

$(document).ready(function(){
   //$("#clickMeButton").click(function(){
   //     alert("hello")
   //});

    // 在官方文档上有说明,在1.7版本以后,可以使用on/off来代替bind/unbind来进行事件的绑定和解绑,而且推荐如此使用
    $("#clickMeButton").on("click",clickHandler1);
    $("#clickMeButton").on("click",clickHandler2);

    // 这样会解除所有的绑定事件,如果想要解除某个已知的事件,就像上面一样,将事件名传进来
    $("#clickMeButton").off("click");
});

function clickHandler1(e){
    console.log("clickHandler1");
}
function clickHandler2(e){
    console.log("clickHandler2");
}

第五部分：自定义事件

同上，先创建一个按钮，然后在js文件中：




$(document).ready(function(){

    // 自定义事件
    $("#clickMeBtn").click(function(){
        var e = jQuery.Event("MyEvent");
        $("#clickMeBtn").trigger(e);
    });

    $("#clickMeBtn").on("MyEvent",function(event){
        console.log(event);
    });
});

//  可以发现,这样写的时候,每次都要写$("#clickMeBtn"),会显得很麻烦,这时候可以定义一个对象将其替换:
//     var clickMeBtn = $("#clickMeBtn");

RedGuy_anluo

关注

0
点赞
踩
0

收藏

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

第一部分：选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <script src="jquery-2.2.3.min.js"></script> <script src="Selector.js"></script></head><body>
复制链接

扫一扫