360浏览器jqueryhtml零基本打造一款属于本身的网页搜刮引擎

编辑器：Sublime Text 3

插件：Jquery-3.2.1.Min.Js

【二、项目实现】

由于是要实现一个网页搜索引擎，以是我们须要借用网页三剑客（Html+Css+Javascript）,然后实现这一功能。

360浏览器jqueryhtml零基本打造一款属于本身的网页搜刮引擎 PHP

1.打开百度剖析网页构造

我们可以先看看百度的搜索引擎：

可以看到，这个搜索框的部分设置，比如关闭自动完成功能。
然后我们在随便搜索内容来查看它的变革：

image

可以看到某些我们查询的关键字，于是我们便创造了要求规律：

https://www.baidu.com/s?+查询字符参数

这就构成了我们的一个完全的get要求，而且这里面有很多关键字参数可以省略掉，只须要保留主要的一部分就好了。
于是，经试验，得出如下结论：

https://www.baidu.com/s?wd=keyword

这个才是要求的接口地址，只需将keyword参数更换为任意搜索关键字即可实现查询并跳转到相应结果页面。

2.编写Html输入框，搜索按钮

看过之前写的Html系列的文章，你将不再对此感到困惑。

<html><head> <title></title> <style type="text/css"> { 内外边距初始时为0 margin:0; padding:0 } input{ width:300px; height:30px } span{ position:absolute; 绝对定位 background-color:red; 背景颜色 border:1px solid gray; 边框设置 width:60px; height:32px; text-align:center 笔墨位置 } span:hover{ 鼠标悬停时的样式 background-color:blue } </style></head><body><input type="text" name="" placeholder="请输入要搜索的内容"> 文本框<span>search</span> 搜索按钮</body></html>

编写完成后进入浏览器查看，即可看到：

可以看到，已经有点浏览器搜索框的意思了。

3.导入Jquery插件

<script src='jquery-3.2.1.min.js'></script>4.编写js脚本

这个是重中之重，打开浏览器，network,连续剖析：

可以看到搜索结果就在里面。
然后打开这个要求的url地址，经由多次实验，创造就只有图中标记的参数有变革：

image.png

以是我们可以得出结论，我们只须要改变这两个值即可。

1).创建删除脚本

于是我先创建一个脚本标签，不用它的时候随时可以打消，避免占用内存，导致页面打开迟缓，性能降落：

var script=document.createElement('script'); 创建script的标签script.id='jsonp'; 设置id为jsonpscript.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 设置它的地址document.body.appendChild(script); 添加script元素到body中

然后等它不用了，随时将它删除：

我们在浏览器可以看到，只要一输入文本，它就会弹出对应的选项让我们选择，那么这是如何办到的了？

可以看到，搜索结果已经出来了，而且有序列表下的"li"标签也都对应的天生了。

3).给选项标记序列

我们可以看到，结果终于出来，但是我想给它个序列号，这样就可以知道搜索结果有多少个了。
要设置的标记办法有很多种，可以以数字开头，也可以是大小写字母或者罗马韶光。
在这里我选择数字，很大略。

终于非常完美的实现了这一功能，是不是很惊艳了，赶紧去试下吧。

4).搜索刷新

看到这里相信大家该当都知道这个功能已经算是完成了，我们只须要随便点击哪个li标签都可以访问到相应的页面。
于是，我决定添加一个刷新的功能，属于重连做事器的那种刷新：

<span onclick='window.location.reload()'>search</span> 点击后立即刷新【三、项目总结】

总的来说，对付初学者小白是个很不错的练手项目，希望大家能从中有所收成。

须要源码的小伙伴，后台回答“搜索引擎”四个字即可获取。

看完本文有收成？请转发分享给更多的人