jquery ul 点击事件写法

原创

mob649e81540090 2023-08-23 14:28:37 ©著作权

文章标签 点击事件 jQuery 甘特图 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81540090的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery UL 点击事件写法

简介

jQuery 是一款流行的 JavaScript 库，它简化了 JavaScript 的编写，使得开发者能够更轻松地操作 HTML 元素和处理事件。在 jQuery 中，我们可以使用选择器和方法来选择和操作 DOM 元素。本文将重点介绍如何使用 jQuery 处理 UL 元素的点击事件，同时提供代码示例进行演示。

点击事件

点击事件是指当用户点击某个元素时所触发的事件。在 jQuery 中，我们可以使用 click() 方法来绑定点击事件处理函数。该方法接受一个函数作为参数，当元素被点击时，该函数将被执行。

示例

假设我们有一个 UL 元素，其中包含多个 LI 元素，我们希望当用户点击某个 LI 元素时，在控制台输出该元素的文本内容。

HTML 代码如下：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

我们可以使用以下代码来实现这个功能：

$(document).ready(function() {
  $('#myList li').click(function() {
    var text = $(this).text();
    console.log(text);
  });
});

让我们逐行来解释上面的代码。

$(document).ready(function() { ... })：这是 jQuery 的约定用法，确保代码在文档加载完成后再执行。在这个函数中，我们将绑定点击事件处理函数。
$('#myList li')：使用选择器 #myList li 获取所有的 LI 元素，在这些元素上绑定点击事件。
.click(function() { ... })：使用 click() 方法绑定点击事件处理函数。当某个 LI 元素被点击时，该函数将被执行。
$(this).text()：在点击事件处理函数中，使用 $(this) 来引用当前被点击的元素。然后使用 text() 方法获取该元素的文本内容。
console.log(text)：最后，我们将获取到的文本内容输出到控制台。

现在，当用户点击任意一个 LI 元素时，该元素的文本内容将会被打印到控制台中。

甘特图

下面是一个使用 Mermaid 语法绘制的甘特图，展示了上述代码的执行过程：

gantt
    title jQuery UL 点击事件写法示例

    section 页面加载
    文档加载完成: 2022-01-01, 1d
    绑定点击事件处理函数: 2022-01-02, 1d

    section 点击事件处理
    用户点击 LI 元素 1: 2022-01-03, 1d
    输出 LI 元素 1 的文本内容: 2022-01-04, 1d

    用户点击 LI 元素 2: 2022-01-05, 1d
    输出 LI 元素 2 的文本内容: 2022-01-06, 1d

    用户点击 LI 元素 3: 2022-01-07, 1d
    输出 LI 元素 3 的文本内容: 2022-01-08, 1d

以上甘特图展示了整个代码的执行过程，从页面加载到绑定点击事件处理函数，再到用户点击不同的 LI 元素并输出其文本内容。