jquery 美化文本框

jQuery 是一种流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery 可以轻松地美化文本框，提升用户体验。以下是一些基础概念和相关信息：

基础概念

选择器：jQuery 使用 CSS 选择器来选取 HTML 元素。
事件处理：可以绑定各种事件（如点击、输入等）到元素上。
样式操作：可以直接修改元素的 CSS 样式。
动画效果：提供了一系列简单的动画效果。

类型与应用场景

输入框美化：改变边框颜色、背景色、字体样式等。
实时搜索提示：结合 Ajax 实现实时搜索建议。
表单验证：在用户输入时即时验证数据有效性。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 来美化一个文本框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 文本框美化</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .styled-input {
            border: 2px solid #ccc;
            padding: 10px;
            width: 300px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        .styled-input:focus {
            border-color: #007BFF;
            outline: none;
        }
    </style>
</head>
<body>

<input type="text" id="myInput" class="styled-input">

<script>
$(document).ready(function(){
    $('#myInput').on('focus', function() {
        $(this).addClass('focused');
    }).on('blur', function() {
        $(this).removeClass('focused');
    });
});
</script>

</body>
</html>