搜索效果和搜索动画效果

搜索效果和搜索动画效果

开发工具与关键技术：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)

总结

以上是生活随笔为你收集整理的搜索效果和搜索动画效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。