思考:

布局:

1,flex元素上下左右居中,内部元素横向排列;

div{
/* 100vh = viewport height*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}

2,input输入框与input type=“button”按钮对齐,给属性值vertical-align:top;

3,input输入框去除默认样式 {border:none;outline:none;}

js原理解析,理解注释

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟360搜索</title>
<style>
body{padding:0;margin:0;overflow:hidden;}
ul,li{margin:0;padding:0;}
ul{border:1px solid #ccc;border-top:0;width:522px;margin-left:-110px;}
li{list-style:none;padding:5px;text-align:left;text-indent:10px;cursor:pointer;}
.main{
/* 100vh = viewport height*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.skin-search-input{
width:500px;
background: #fff;
height: 34px;
padding: 4px 10px 4px 12px;
vertical-align: top;
border: 1px solid #ccc;
}
.keyword{
background: #fff;
border: none;
color: #333;
font-size: 16px;
height: 30px;
line-height: 30px\9;
margin-top: 3px;
outline: none;
width:100%;
}
input[type=button]{
-webkit-appearance: none;
border: 0;
cursor: pointer;
font-size: 18px;
height: 44px;
outline: none;
vertical-align: top;
width: 110px;
background: #19b955;
color: #fff;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>
<body> <div class="main">
<div class="skin-search-input">
<input type="text" class="keyword">
</div>
<input type="button" value="搜一下">
</div>
<div align="center" class="message" style="display:none;">
<ul>
</ul>
</div> <script>
//如果页面加载直接给li元素绑定事件,你是获取不到li元素的。
//解决方案,可以用jq给我们提供的事件委托
$(".message>ul").on("mouseover","li",function () {
this.style.background = "#efefef";
});
$(".message>ul").on("mouseout","li",function () {
this.style.background = "white";
}); function getInfo(data) {//回调函数
//解析数据,然后把message里面的ul里面的li元素的数据替换
var results = data.result;
var i;
document.querySelector(".message>ul").innerHTML = "";
for(i=0;i<results.length;i++){
var li = document.createElement("li");
li.innerHTML = results[i].word;
console.log(li);
document.querySelector(".message>ul").appendChild(li);
}
} //添加键盘事件
document.querySelector(".keyword").onkeyup = function () {
var keyword = this.value; //如果在输入的时候有空格的话,这里需要做判断
if(keyword.length>0){
//我根据这个关键字去获取数据,获取到数据之后
//加载到列表里
//显示
document.querySelector(".message").style.display = "block";
//把关键字给360的这个搜索接口,让它来给我结果 //使用script标签去发送请求
var tag = document.createElement("script");
tag.src = "https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word="+keyword;
document.body.appendChild(tag);
}else{
document.querySelector(".message").style.display = "none";
}
}
</script>
</body>
</html>

script跨域之360搜索的更多相关文章

  1. jsonp跨域请求360数据乱码解决办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. vue中的跨域问题

    https://segmentfault.com/a/1190000011072725(原文)   使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 注(api很重 ...

  3. ajax 跨域的问题 用js绕过跨域

    之前遇到一个ajax跨域的问题,搜索了很多方法才找到解决方案,也怪自己  菜鸟一个 这些经验还是要慢慢来的 尤其是最近来回顾一下 竟然发现自己忘记了  所以还是把它记下来啊 免得到时候忘记 这个方法原 ...

  4. JS跨域

    //2011-7-25 (function(){ //闭包 function load_script(xyUrl, callback){ var head = document.getElements ...

  5. ajax跨域jsonp

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  6. jQuery的jsonp跨域是这么回事.

    实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...

  7. jsonp跨域请求学习笔记

    前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.( ...

  8. ajax跨域请求学习笔记

    原文:ajax跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可 ...

  9. sonp跨域请求

    sonp跨域请求学习笔记   前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以 ...

随机推荐

  1. TimesTen 应用层数据库缓存学习:4. 仅仅读缓存

    在运行本文样例前.首先先运行TimesTen 应用层数据库缓存学习:2. 环境准备中的操作. Read-only Cache Group的概念 仅仅读缓存组例如以下图: 仅仅读缓存组(Read-Onl ...

  2. SQL语句创建相同结构的表

    --Oracle的语句create table sa_salaryRecord as select * from sa_salary where 1=2; --MSSQL的语句select * int ...

  3. OSI7层网络模型

    物理层在OSI参考模型中,物理层(Physical Layer)是参考模型的最低层,也是OSI模型的第一层.物理层的主要功能是:利用传输介质为数据链路层提供物理连接,实现比特流的透明传输.物理层的作用 ...

  4. makefile之目录搜索&自动依赖

    目录搜索 在一个大工程中,一般会将源文件和中间生成文件放在不同的目录,而且不会污染源码所在的目录.当需要编译不同目录下的源文件时,就需要指定路径,那么怎样让路径的表示以及源文件的引用更加灵活.就要用到 ...

  5. Java中模拟POST上传文件

    /** * * @param url 请求URL * @param filePath 本地文件地址 * @return */ public static String upload(String ur ...

  6. hdu6053 TrickGCD 容斥原理

    /** 题目:hdu6053 TrickGCD 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6053 题意:You are given an array ...

  7. ios-A+B经典问题

    // // main.m // a+b // #import <Foundation/Foundation.h> #import "Calcultor.h" int m ...

  8. 如何移植.NET Framework项目至.NET Core?

    公司的项目一直采用.NET框架来开发Web项目.目前基础类库均为.NET Framework 4.6.2版本.Caching, Logging,DependencyInjection,Configur ...

  9. Colored Sticks - poj2513(trie + 并查集)

    问题便转化为:给定一个图,是否存在“一笔画”经过涂中每一点,以及经过每一边一次.这样就是求图中是否存在欧拉路Euler-Path.由图论知识可以知道,无向图存在欧拉路的充要条件为:① 图是连通的:② ...

  10. HIBERNATE与 MYBATIS的对比,在这里做一下总结

    我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践中也应用过,现在对hibernate和mybatis做一下对比,便于大家更好的理解和 ...