搜索效果和搜索動畫效果

開發工具與關鍵技術：DW 搜索效果 作者：周歡 撰寫時間：2019/2/20

在生活中我們不難發現，往往大的軟件都會有便捷的獲取方式。因為軟件越大功能也會相對的多一些，功能的繁多時也會偶爾的很難找到自己真正需要的某一功能，當我們偶爾只想用一個功能的時候那么我們該怎么辦？

此時我們會發現不管是手機還是電腦都會有一個功能，這就是搜索功能，手機電腦都擁有在本機上搜索相關的軟件而在軟件內部也有很多都是擁有搜索功能的，就說阿里巴巴旗下的淘寶，可謂是一個大型的軟件也是我們所熟知的一款搜索功能較強的軟件之一了。接下來讓我們來看看用代碼如何實現這強大的搜索功能。

我今天想給大家講一講搜索功能的兩種不同的效果
第一種：基本的搜索功能

Input標簽的使用：
基本是由type=“”，class=“”，placeholder=“”組成。
Type ：input標簽的類型。
Class ：input標簽的類名。
Placeholder ：input標簽的占位符。
Type的類型可分為：
text（普通文本）、select（下拉框）、textarea（文本域）、button（按鈕類型）、CheckBox（復選框）、hidden（隱藏 輸入域）、image（圖像）、password（密碼）、radio（單選按鈕）、reset（重置）、submit（提交按鈕）、file（文件上傳）

第二種：帶有動畫效果的搜索功能

部分代碼解析：
href = "javascrpit:;"為了防止a標簽跳轉導致頁面跳轉失誤。
<form action="" class="w-100"> form表單

標簽用于為用戶輸入創建HTML表單。 表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。 表單還可以包含`menus、textarea、fieldset、legend 和 label`元素。 表單用于向服務器傳輸數據。

Action：規定當提交表單時向何處發送表單數據。
w-100：這是采用了bootstrap-4.1.3-dist/css/bootstrap.min.css插件中的css樣式。
Row ：同樣是采用了bootstrap-4.1.3-dist/css/bootstrap.min.css插件中的css樣式。

帶有動畫效果的的搜索功能的關鍵其實是slideToggle
slideToggle這是jquery-3.2.1.min.js插件中自帶的功能

$(function(){ 代碼塊；}這是jQuery中的頁面加載事件。
$("#search").click(function(){ 代碼塊；});jQuery基本的點擊事件。
$(".list-group-item").hover(function(){ 代碼塊；}這是jQuery中的hover事件。

Find（）方法獲取當前元素集合中每個元素的后代，通過選擇器、jQuery對象或元素來篩選。
語法：$(selector).find(filter)

Attr（）方法設置或被選元素的屬性值。
語法：$(selector).attr(attribute)

總結

以上是生活随笔為你收集整理的搜索效果和搜索动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。