jQuery选择ul li下的所有输入

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery，你可以轻松地选择页面上的元素，并对它们进行操作。

类型与应用场景

类型：jQuery 主要用于前端开发，特别是在需要处理复杂的 DOM 操作和事件绑定时。
应用场景：网站的前端交互设计、动态内容加载、表单验证、动画效果实现等。

示例代码

假设我们有以下的 HTML 结构：

<ul id="myList">
  <li><input type="text" value="Item 1"></li>
  <li><input type="text" value="Item 2"></li>
  <li><input type="text" value="Item 3"></li>
</ul>

使用 jQuery 选择 ul 下的所有 li 元素内的输入框，并为它们添加一个点击事件：

$(document).ready(function() {
  $('#myList li input').on('click', function() {
    alert($(this).val());
  });
});

遇到的问题及解决方法

问题：为什么选择器没有生效？

原因：

可能是因为 jQuery 库没有被正确引入。
HTML 结构可能与选择器不匹配。
JavaScript 代码可能在 DOM 完全加载之前执行。

解决方法：

确保 jQuery 库已正确引入到页面中。
检查 HTML 结构是否与选择器一致。
使用 $(document).ready() 确保 DOM 完全加载后再执行 jQuery 代码。

示例代码修正

确保 jQuery 库已正确引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

修正后的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="myList">
    <li><input type="text" value="Item 1"></li>
    <li><input type="text" value="Item 2"></li>
    <li><input type="text" value="Item 3"></li>
  </ul>

  <script>
    $(document).ready(function() {
      $('#myList li input').on('click', function() {
        alert($(this).val());
      });
    });
  </script>
</body>
</html>

通过以上步骤，可以确保 jQuery 选择器正常工作，并且能够处理 ul 下所有 li 元素内的输入框的点击事件。