jquery div 部分能点击|极客教程

jquery div 部分能点击

在网页开发中，经常需要对页面上的元素进行交互操作，其中对于div等块级元素的点击事件处理是非常常见的需求。本文将详细介绍如何利用jQuery来实现对div元素的点击事件处理，并使其在点击时能够执行相应的操作。

jQuery 简介

jQuery是一个快速、简洁的JavaScript库，可以简化HTML文档的遍历、事件处理、动画和Ajax操作。通过jQuery，我们可以轻松地操作页面上的元素，并使页面具有更好的交互性。

要在页面中使用jQuery，首先需要在HTML文档中引入jQuery库，可以通过CDN链接或者下载本地文件的方式来引入。例如：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

引入jQuery库后，就可以在页面内使用jQuery提供的方法和功能来操作页面元素了。

点击事件处理

在jQuery中，可以通过click()方法来为页面元素绑定点击事件处理程序，实现在元素被点击时执行相应的操作。

简单点击事件

首先来看一个简单的示例，实现对div元素的点击事件处理。

<!DOCTYPE html>
<html>

<head>
    <title>jQuery div 点击事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="myDiv" style="width:200px;height:200px;background-color:lightblue;text-align:center;line-height:200px;">
        点击我
    </div>

    <script>
        // 为div元素绑定点击事件处理
        $("#myDiv").click(function () {
            alert("你点击了这个div");
        });
    </script>
</body>

</html>

在上面的示例中，通过jQuery选择器$("#myDiv")选中ID为myDiv的div元素，并为其绑定点击事件处理程序，在点击该div元素时弹出一个提示框。

动态生成的div元素点击事件

有时候，页面上的div元素是动态生成的，即在页面加载完成后通过JavaScript动态创建的。这种情况下，需要使用jQuery的事件委托机制来实现对这些动态生成的div元素的点击事件处理。

<!DOCTYPE html>
<html>

<head>
    <title>jQuery 动态生成div 元素点击事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="container">
        <!-- 动态生成的div元素将添加到这里 -->
    </div>

    <button id="addDiv">添加div元素</button>

    <script>
        // 点击按钮添加一个新的div元素
         $("#addDiv").click(function () {$ ("#container").append("<div class='dynamicDiv' style='width:100px;height:100px;background-color:pink;'>动态生成的div</div>");
        });

        // 为动态生成的div元素绑定点击事件处理
        $("#container").on("click", ".dynamicDiv", function () {
            alert("你点击了动态生成的div");
        });
    </script>
</body>

</html>

在上面的示例中，首先在页面中准备了一个容器div元素container，然后通过点击按钮addDiv来动态生成一个新的div元素，并为这些动态生成的div元素使用事件委托机制实现点击事件的处理。

点击事件的操作

除了简单的弹出提示框，点击事件处理还可以实现更加复杂的操作，例如修改元素的样式、内容，或者向服务器发送请求等。下面是几个常见的点击事件操作示例。

修改元素样式

<!DOCTYPE html>
<html>

<head>
    <title>jQuery 修改div元素样式</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="myDiv" style="width:200px;height:200px;background-color:lightblue;text-align:center;line-height:200px;">
        点击我
    </div>

    <script>
         $("#myDiv").click(function () {$ (this).css("background-color", "lightgreen");
        });
    </script>
</body>

</html>

在上面的示例中，点击div元素后，会将其背景色修改为绿色。通过$(this)获取当前被点击的元素。

修改元素内容

<!DOCTYPE html>
<html>

<head>
    <title>jQuery 修改div元素内容</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="myDiv" style="width:200px;height:200px;background-color:lightblue;text-align:center;line-height:200px;">
        点击我
    </div>

    <script>
         $("#myDiv").click(function () {$ (this).text("你点击了我");
        });
    </script>
</body>

</html>

在上面的示例中，点击div元素后，会将其文本内容修改为”你点击了我”。

发送Ajax请求

<!DOCTYPE html>
<html>

<head>
    <title>jQuery 发送Ajax请求</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="myDiv" style="width:200px;height:200px;background-color:lightblue;text-align:center;line-height:200px;">
        点击我发送请求
    </div>

    <script>
         $("#myDiv").click(function () {$ .ajax({
                url: "https://jsonplaceholder.typicode.com/posts/1",
                type: "GET",
                success: function (data) {
                    console.log(data);
                }
            });
        });
    </script>
</body>

</html>

在上面的示例中，点击div元素后会向服务器发送一个GET请求，获取数据后通过控制台输出。