博客

如何使用jQuery找到所有的文本区域并制作一个边框

  • Post category:jquery

要使用jQuery找到所有文本区域并制作边框，需要以下步骤：

  1. 首先，需要使用jQuery选择器找到所有的文本区域。这可以使用以下代码:
$("textarea")

这会找到文档中的所有textarea元素。

  1. 接下来，需要为这些元素添加边框。这可以完成以下代码：
$("textarea").css("border", "1px solid black");

这会将每个文本区域的边框设置为黑色，宽度为1像素。

以下是一个完整的示例，它找到每个文本区域并将其边框设置为红色，宽度为2像素：

<!DOCTYPE html>
<html>
<head>
    <title>使用jQuery添加文本框边框</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("textarea").css("border", "2px solid red");
        });
    </script>
</head>
<body>
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
</body>
</html>

此示例使用文档就绪事件来确保页面加载完成后执行jQuery代码。当文档准备就绪后，jQuery选择器将找到所有的textarea元素，并为它们添加2像素的红色边框。

另一个示例是找到特定Class的文本区域，并为其添加自定义样式的边框：

<!DOCTYPE html>
<html>
<head>
    <title>使用jQuery添加文本框边框</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .custom-border {
            border: 2px dashed blue;
            padding: 5px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("textarea.custom-border").addClass("custom-border");
        });
    </script>
</head>
<body>
    <textarea class="custom-border"></textarea>
    <textarea></textarea>
    <textarea class="custom-border"></textarea>
</body>
</html>

在本例中，我们定义了一个名为“custom-border”的Class，并将其应用于某些textarea元素。添加此Class后，我们在jQuery代码中使用addClass()方法来确保所有这些元素都获得我们定义的自定义样式边框。

Tags: