如何使用 jQuery 查找文本区域并添加边框?

jqueryweb developmentfront end technology更新于 2026/2/9 13:52:17

概述

为了查找任何元素，JQuery 提供了最佳的选择器语法，它只需一行代码即可从 HTML 文档中选择任何元素。因此，为了查找 HTML 中的所有文本区域，我们将使用 JQuery 选择器来选择文本区域，然后使用 JQuery CSS(层叠样式表)操作在文本区域周围添加边框。边框使用户界面更具吸引力。

语法

在 JQuery 中选择和设置任何元素样式的语法如下

$(selector).css();

$(selector) − .要选择任何元素，可以使用美元符号加上选择器名称来获取类名或 ID 名称。
css() − css() 是一个 Jquery 方法，用于设置 DOM 元素的样式。我们可以将值作为键值对传递，也可以将参数作为包含元素不同样式的对象传递。

算法

步骤 1 − 在文本编辑器中创建一个 index.html 文件，并向其中添加 HTML 样板代码。
步骤 2 − 现在将 Jquery CDN(内容分发网络)链接添加到 HTML 文件的 head 标签。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>

步骤 3 - 现在使用标签标签创建一些文本区域。

<label>Skills</label><br>
<textarea cols="30" placeholder="Write your technical skills here..."></textarea><br><br>

<label>Cover Letter</label><br>
<textarea cols="30" placeholder="Cover here..."></textarea><br><br>

<label>About yourself</label><br>
<textarea cols="30" rows="5" placeholder="Write about yourself..."></textarea><br><br>

<label>Give your feedback below</label><br>
<textarea cols="30" rows="5" placeholder="Write here..."></textarea><br>

步骤 4 − 现在创建一个 HTML 按钮，查找所有文本区域并设置其样式。

<button>Border TextArea</button>

步骤 5 − 现在添加 script 标签。

<script></script>

步骤 6 − 现在创建一个 Jquery 选择器，并添加一个 click() 函数来触发该函数。

$("button").click(() => {)})

步骤 7 − 现在使用 Jquery 选择器语法来选择文本区域。

$("textarea")

步骤 8 − 现在使用 Jquery css() 方法设置文本区域的样式。

$("textarea").css("border", "2px dashed red");

步骤 9 - 文本区域周围的边框已成功应用。

示例

在本例中，我们将创建一个简单的布局，其中包含一些可在文本区域内输入的条目，以及一个用于触发查找文本区域的按钮。我们将使用上面提到的 Jquery 选择器语法和 css() 方法。

<html>
<head>
   <title> find textarea and make border using jquery </title>
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
   <label>Skills</label><br>
   <textarea cols="30" placeholder="Write your technical skills here..."></textarea><br><br>

   <label>Cover Letter</label><br>
   <textarea cols="30" placeholder="Cover here..."></textarea><br><br>

   <label>About yourself</label><br>
   <textarea cols="30" rows="5" placeholder="Write about yourself..."></textarea><br><br>

   <label>Give your feedback below</label><br>
   <textarea cols="30" rows="5" placeholder="Write here..."></textarea><br>
   <button style="margin-top: 1rem;">Border TextArea</button>

   <script>
      $("button").click(() => {
         $("textarea").css("border", "2px dashed red");
      })
   </script>
</body>
</html>

下图展示了上述功能的输出。当用户将其加载到浏览器时，它会显示文本区域，例如技能、求职信、自我介绍和反馈，并带有一个触发该功能的按钮。当用户点击"立即添加边框"按钮时，它会触发 JQuery 函数，查找页面上的所有文本区域。获取所有文本区域后，会触发 css() 方法，并将所有文本区域的边框设置为红色，如下图所示。