使用jQuery制作简易搜索页面

最新推荐文章于 2022-06-23 20:58:59 发布

小小小青台

最新推荐文章于 2022-06-23 20:58:59 发布

阅读量629

点赞数 6

分类专栏：课堂重现文章标签： jquery js javascript html

本文链接：https://blog.csdn.net/m0_48355416/article/details/115288096

版权

本文介绍了如何使用jQuery创建一个简单的搜索页面。虽然课程进度难以追赶，代码理解困难，但通过学习jQuery的基本用法，可以实现基本的搜索功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述
iframe

实现代码：

<html>
<head>
    <title>自定义搜索</title>
   <script src="jquery-1.9.1.min.js"></script>
   <script>
       function mycli(type){
   
           var baidu_url = "https://www.baidu.com";
           var sogou_url =

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小小青台

关注关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

jQuery实现页面搜索

macanfa的博客

07-18

1576

jQuery实现页面搜索，搜索筛选用户输入的内容！主要用到filter()进行内容筛选！

基于jQuery实现页面搜索功能

10-21

主要为大家详细介绍了基于jQuery实现页面搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

6 条评论您还未登录，请先登录后发表或查看评论

JQuery功能查询页

weixin_34190136的博客

03-09

136

JQuery在前端开发中已经是常用的不能再常用的库了。最近的项目中使用到了JQuery，我第一次接触它的时候为了学习，把常用的操作指令用比较小的字体写在一页word上，打印出来贴在桌子上，用来让自己时时刻刻想用都能看到相关的API调用方法。这种方式非常有利于记忆，国外也经常会有一些Pocket Book，即简易查询字典，书中每一个功能都用很简单的一两句话描述，让自己想用的时候随时都能查到。在此，将...

jquery实现页面的搜索功能

weixin_30763397的博客

05-16

220

1 $(function(){ 2 $("input[type=button]").click(function(){ 3 var txt=$("input[type=text]").val(); 4 if($.trim(txt)!=""){ 5 6 $("table tr:not('#theader')").hide(...

jquery页面内容查找

lihaofeifei的博客

03-29

1688

思路：利用RegExp正则表达式进行匹配；在搜索框下方显示搜索提示；对匹配性进行高亮显示；对多个匹配性进行逐个区别显示；再次搜索时清除上次匹配结果；固定搜索框。代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...

jQuery实现的简单前端搜索功能示例

12-29

本文实例讲述了jQuery实现的简单前端搜索功能。分享给大家供大家参考，具体如下： html代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <input type=text><input type=submit value=搜索> 应用流体学 <li

Jquery练习1：制作简易的当当购物车页面.zip

08-27

在本实践项目中，我们将利用jQuery库来创建一个简单的当当购物车页面。jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。通过这个练习，我们可以深入理解jQuery的基本用法...

使用JQuery制作简易论坛发布

qq_45607259的博客

08-14

2164

要求实现论坛的发布点击发布后输入div隐藏清空标题下拉列表文本内容思路因为要求输入的标题和下拉列表要显示到论文发布后的ul当中，我们可以先在ul构造出一个大的li，此li是每次论文发布后的大的整体，可以看成是个“div”，在li中，我们需要创建显示头像的div，里面存放img元素标签，创建显示标题的<h1元素标签，创建获取下拉列表选项的版块和时间的元素标签p。此JQuery和之前JavaScript思路一致，先获取到输入div“.post”的各项属性值，通过工厂函数进行创建对应的元素

使用jQuery实现简易商城系统

weixin_45539338的博客

06-23

538

使用jQuery实现简易商城系统

jQuery编写QQ简易聊天框

10-14

这段代码使用了jQuery库，当页面加载完成(`$(document).ready`)时，它会执行以下操作： 1. 绑定发送按钮(`#send`)的点击事件，调用`qqQend`函数来处理消息发送。 2. 监听键盘事件，当用户按下回车键时，也会触发`...

html页面内检索,jQuery实现页内查找相关内容

weixin_42312392的博客

06-03

1178

当需要在页面中查找某个关键字时，一是可以通过浏览器的查找功能实现，二是可以通过前端脚本准确查找定位，本文介绍通过jQuery实现的页面内容查找定位的功能，并可扩展显示查找后的相关信息。本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息HTML页...

利用JQ写一个百度导航条

个人笔记

04-10

334

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度导航栏</title> <style type="text/css"> *{ margin: 0; padding: 0; } .root{ width: 100%; height: 40px; background-color:

JQ仿百度提示页面

cuterabbitbaby的博客

11-29

312

代码实现 <% String path = request.getContextPath(); %> My JSP 'search.jsp' starting page  $(function() { $("#word").keyup(function() { /* 获得文本框的值 */ var word = $("#

jQuery 实现页面搜索功能----项目实战

愿你走过半生，归来任是少年。

07-10

2750

因为前端设计页面需要实现一个页面内搜索实现“Search Suggestion”效果的功能。本功能不适用于检索数据集过大的检索。实现思路是通过JQuery的获取div节点，对关键字匹配成功之后调后台接口，跳到对应的页面，很实用的功能，能帮助后台开发解决很大的问题。页面布局最规范的写法如下—-php后台 ...

用jq实现仿百度搜索框

最新发布

06-27

jQuery是一个轻量级的JavaScript库，常用于简化HTML文档的遍历、事件处理和动画创建等。要使用jQuery制作一个简易计算器，你可以按照以下步骤进行： 1. 引入jQuery：在HTML文件的`<head>`部分添加`<script>`标签引入jQuery库。 ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 2. 创建HTML结构：为计算器设计一个基本的UI，包括输入框、数字按钮、运算符按钮以及一个结果显示区域。 ```html <div id="calculator"> <input type="text" id="display" disabled> <div id="buttons">  <button>7</button> <button>8</button> <button>9</button>   <button>*</button> <button>/</button> <button>=</button>  </div> </div> ``` 3. 编写JavaScript代码：利用jQuery选择器和事件监听器来处理用户操作。 ```javascript $(document).ready(function () { // 选中所有的数字和运算符按钮 const buttons = $('#buttons button'); buttons.click(function (event) { const clickedButton = $(event.target); const value = clickedButton.text(); // 数字按钮处理 if (/\d/.test(value)) { $('#display').val(value + $('#display').val()); // 运算符按钮处理 } else if (value === '+' || value === '-' || value === '*' || value === '/') { // 清除输入框前面的空格 $('#display').val($('#display').val().trim()); // 储存上一个运算符 let prevOperator = ''; if ($('#display').val()) { prevOperator = $('#display').val()[-1]; // 获取最后一个字符 } if (prevOperator && ['+', '-', '*', '/'].includes(prevOperator)) { $('#display').val(eval($('#display').val() + ' ' + value)); } else { $('#display').val(value); } } // 处理等于号，执行计算 if (value === '=') { try { $('#display').val(eval($('#display').val())); } catch (error) { $('#display').val('Error'); } } }); }); ```