jQuery实现淘宝搜索框样式

在前端开发中，搜索框是一个非常重要的组件，而淘宝作为一个大型电商网站，其搜索框样式非常独特。本文将介绍如何使用jQuery实现类似淘宝网站搜索框样式。

HTML结构

首先，我们需要定义HTML结构。搜索框通常由一个输入框和一个按钮组成。以下是一个基本的HTML结构：

---- -------------------------
    ------ ----------- ---------------------
    -------------------
------

CSS样式

接下来，我们需要对搜索框进行CSS样式的设计。这里我们使用了Bootstrap框架来进行样式设计。以下是基本的CSS样式：

----------------- -
  -------- -----
  ------------ -------
-

----------------- ------------------ -
  ------- -----
  ------- -----
  -------- -----
  -------- - -----
  ----------------- --------
  ---------- -----
  ------ -----
  -------------- -----
-

----------------- ------ -
  ------- -----
  ------------ ------
  -------- - -----
  ------- -----
  ----------------- --------
  ------ -----
  ---------- -----
  -------------- - ---- ---- --
-

上述代码中，我们使用flex布局，使输入框和按钮水平居中。对于输入框，我们设置了一些基本的样式，例如高度、背景色、边框等。对于按钮，我们使用了负边距将其移动到输入框左侧，并设置了一些其他样式。

jQuery实现

在HTML和CSS完成之后，我们需要使用jQuery来实现淘宝搜索框的效果。以下是完整的jQuery代码：

------------ -
  --- ------------ - -------------------- ---------------------
  --- ---------- - -------------------- ---------

  -- ------------
  ------------------------ ---------- -
    ------------------------- -- - --- ----------
  ---

  -- ------------
  ----------------------- ---------- -
    ------------------------- --------
  ---

  -- ------
  ---------------------- ---------- -
    -- -------
    --- ------- - ---------------------------

    -- -----------
    -- ---------- -
      ------ ------
    -

    -- ----- ------
    ------------- - ---------
    ------ ------
  ---
---

上述代码中，我们首先获取了输入框和按钮的jQuery对象。然后，我们使用on方法来绑定输入框获取焦点和失去焦点时的事件。在获取焦点时，我们添加了一个box-shadow样式，使输入框有一个淡黄色的边框。在失去焦点时，我们移除了这个样式。

对于按钮点击事件，我们首先获取输入框的内容，并使用trim方法去除字符串两端的空格。如果输入框为空，则不进行搜索。否则，我们可以执行实际的搜索操作。

总结

本文介绍了如何使用jQuery实现类似淘宝网站搜索框样式。通过对HTML、CSS和jQuery的分析，我们可以看到如何构建一个完整的搜索框组件，以及如何使用jQuery来添加交互效果。希望读者可以从中学习到一些实用的技术，加强自己的前端开发能力。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/4122