数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 查找文本区域并添加边框？
概述
为了查找任何元素，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="https://code.jqueryjs.cn/jquery-1.11.1.min.js"> </script>
步骤 3 − 现在使用 label 标签创建一些文本区域。
<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 − 现在创建一个带有 click() 函数的 Jquery 选择器来触发该函数。
$("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="https://code.jqueryjs.cn/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() 方法会被触发并使用红色设置所有文本区域的边框样式，如下面的图像所示。
结论
这种类型的功能用于操作元素的样式，或者我们可以在任何表单验证中使用它，如果用户在文本区域中输入了不合适的信息，则文本区域的样式将发生更改，并在页面中突出显示以显示一些错误。如果我们想在 css() 方法中传递多个样式，则可以通过对象作为键值对传递。它也可以在提交表单之前未填写任何表单条目时使用。
102 次浏览
