JQuery适用于id但不适用于类

Question

我在搜索栏中使用jQuery。写＆＃34;搜索...＆＃34;什么时候没有选中我遇到的问题是，当我使用＆＃34; class＆＃34;时，jQuery没有工作。但是当我使用＆＃34; id＆＃34;时它确实有效。我想知道问题是什么。

以下是我的代码：

HTML

<form class="search-form" action="search.php" method="GET" accept-charset="utf-8">
  <label class="search-form_label">
    <input class="search-form_input" id="search" type="text" name="s" autocomplete="off" placeholder=""/>
    <span class="search-form_liveout"></span>
  </label>
  <button class="search-form_submit fa-search" type="submit">search</button>
</form> 

有效的脚本代码：

<script>
    $(document).ready(function(){ 

    // Add the value of "Search..." to the input field and a class of .empty
    $("#search").val("Search...").addClass("empty");

    // When you click on #search
    $("#search").focus(function(){

        // If the value is equal to "Search..."
        if($(this).val() == "Search...") {
            // remove all the text and the class of .empty
            $(this).val("").removeClass("empty");;
        }

    });

    // When the focus on #search is lost
    $("#search").blur(function(){

        // If the input field is empty
        if($(this).val() == "") {
            // Add the text "Search..." and a class of .empty
            $(this).val("Search...").addClass("empty"); 
        }

    });

});
    </script>

无效的脚本代码：

<script>
    $(document).ready(function(){ 

    // Add the value of "Search..." to the input field and a class of .empty
    $(".search-form_input").val("Search...").addClass("empty");

    // When you click on #search
    $(".search-form_input").focus(function(){

        // If the value is equal to "Search..."
        if($(this).val() == "Search...") {
            // remove all the text and the class of .empty
            $(this).val("").removeClass("empty");;
        }

    });

    // When the focus on #search is lost
    $(".search-form_input").blur(function(){

        // If the input field is empty
        if($(this).val() == "") {
            // Add the text "Search..." and a class of .empty
            $(this).val("Search...").addClass("empty"); 
        }

    });

});
    </script>

＆＃13;

＆＃13;

$(document).ready(function() {

  // Add the value of "Search..." to the input field and a class of .empty
  $(".search-form_input").val("Search...").addClass("empty");

  // When you click on #search
  $(".search-form_input").focus(function() {

    // If the value is equal to "Search..."
    if ($(this).val() == "Search...") {
      // remove all the text and the class of .empty
      $(this).val("").removeClass("empty");;
    }

  });

  // When the focus on #search is lost
  $(".search-form_input").blur(function() {

    // If the input field is empty
    if ($(this).val() == "") {
      // Add the text "Search..." and a class of .empty
      $(this).val("Search...").addClass("empty");
    }

  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search-form" action="search.php" method="GET" accept-charset="utf-8">
  <label class="search-form_label">
            <input class="search-form_input" id="search" type="text" name="s" autocomplete="off" placeholder=""/>
            <span class="search-form_liveout"></span>
          </label>
  <button class="search-form_submit fa-search" type="submit">search</button>
</form>

＆＃13;

＆＃13;

＆＃13;