<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #search{
            color: #BBBBBB;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单事件
            //.focus 和 .blur
           var txt = $("#search").val();
            //获取焦点
           $("#search").focus(function () {
               if($(this).val() == txt)
               {
                   $(this).val("");
               }
           });
            //失去焦点
           $("#search").blur(function () {
               if($(this).val() == "")
               {
                   $(this).val(txt)
               }
           });

        });

        /*
        在jQuery中，常用的表单事件有3种。
        .focus 和 .blur
        .select
        .change

        具有获取焦点和失去焦点的元素只有两种，
        一种是表单元素（单选，多选，文本框，下拉列表），
        一种是超链接。

        实际开发中，焦点事件一般用于单行文本框和多行文本框，其他地方
        少见。
         */
    </script>
</head>
<body>
    <input type="text" id="search" value="度娘一下，你就知道">
    <input type="button" value="搜索">
</body>
</html>