JQuery 查找输入并选择

在 Web 开发中，经常需要查找用户输入，并对选择的结果进行操作。JQuery 提供了多种方法来实现这一功能。本篇文章将介绍 JQuery 查找输入的方法，以及如何操作选择结果。

查找输入

JQuery 提供了三个主要的方法来查找输入：

1. .val()

.val() 方法可以获取或设置表单中指定元素的值。例如，以下代码将获取一个输入框中的值：

var inputValue = $('input[type="text"]').val();

2. .text()

.text() 方法可以设置或获取元素之间的文本内容。例如，以下代码将获取一个 <div> 元素中的文本内容：

var divText = $('div').text();

3. .html()

.html() 方法可以获取或设置元素的 HTML 内容。例如，以下代码将获取一个 <div> 元素的 HTML 内容：

var divHtml = $('div').html();

选择结果

一旦获取了用户的输入，就可以使用 JQuery 的选择器来操作所选元素。以下是几个常用的选择器：

1. .addClass()

.addClass() 方法可以向一个或多个元素添加一个或多个类。例如，以下代码将向一个 <div> 元素添加一个名为 "selected" 的类：

$('div').addClass('selected');

2. .show()

.show() 方法可以显示一个或多个被隐藏的元素。例如，以下代码将显示一个 <div> 元素：

$('div').show();

3. .hide()

.hide() 方法可以隐藏一个或多个元素。例如，以下代码将隐藏一个 <div> 元素：

$('div').hide();

示例代码

以下代码演示了如何查找用户输入并选择元素：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="text" id="input" placeholder="请输入...">
<button id="btn">查找</button>
<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>

<script>
  $(document).ready(function() {
    $('#btn').click(function() {
      var userInput = $('#input').val();
      
      $('.item').hide();
      $('.item:contains(' + userInput + ')').show();
    });
  });
</script>

上述代码将会隐藏所有的 item 类元素，然后根据用户输入显示匹配的元素。

注意：以上代码需要在 HTML 文件中引入 jQuery 库。

参考资料：

1. JQuery 文档：https://api.jquery.com/
2. jQuery选择器：https://www.runoob.com/jquery/jquery-selectors.html