前端----基础知识_前端里面{{}}-CSDN博客

本文链接：https://blog.csdn.net/R418520/article/details/119333261

HTML+CSS基础

html的定义

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等，标签大多数都是成对出现的。

所谓超文本，有两层含义:

因为网页中还可以图片、视频、音频等内容(超越文本限制)
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

html的作用

html是用来开发网页的，它是开发网页的语言。

小结

html是开发网页的语言
html中的标签大多数都是成对出现的, 格式: <标签名></标签名>

html 的基本结构

1. 结构代码

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>Copy

第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到</html>结束,也就是html文档的开始和结束标签。
<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
<body>...</body>标签是编写网页上显示的内容。

2. 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

初始常用的 html 标签

1. 常用的 html 标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>Copy

提示:

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容，比如: img标签

2. 小结

学习 html 语言就是学习标签的用法，常用的标签有20多个。
编写 html 标签建议使用小写
根据书写形式，html 标签分为双标签和单标签
单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">
Copy

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">Copy

2. 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">Copy

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
相对路径是从当前操作的 html 文档所在目录算起的路径
绝对路径是从根目录算起的路径

列表标签

1. 列表标签的种类

无序列表标签(ul标签)
有序列表标签(ol标签)

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>Copy

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>Copy

4. 小结

列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)
列表项目对顺序有要求的时候使用ol标签
列表项目对顺序无要求的时候使用ul标签

css 的介绍

1. css 的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

2. css 的作用

美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
控制页面布局, 比如: 设置浮动、定位等样式。

3. css 的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

选择器:是用来选择标签的，选出来以后给标签加样式。

代码示例:

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}Copy

说明

css 是由两个主要的部分构成：选择器和一条或多条样式规则，注意:样式规则需要放到大括号里面。

4. 引入方式

将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。

示例代码:

<link rel="stylesheet" type="text/css" href="css/main.css">
Copy

5. 小结

css 是层叠样式表，它是用来美化网页和控制页面布局的。
定义 css 的语法格式是: 选择器{样式规则}

css 选择器

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

标签选择器
类选择器
id选择器

3. 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

<style type="text/css">
    p{
        color: red;
    }
</style>

<div>hello</div>
<p>hello</p>Copy

4. 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>

<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>Copy

5. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

<style type="text/css">
    #box{color:red} 
</style>

<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->Copy

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

6. 小结

css 选择器就是用来选择标签设置样式的
常用的 css 选择器有以下几种:
1. 标签选择器
2. 类选择器
3. 层级选择器(后代选择器)
4. id选择器

css 属性

我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。

1. 布局常用样式属性

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。

2. 文本常用样式属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

3. 布局常用样式属性示例代码

<style>

    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
    }

    .box2{
        /* 这里是注释内容 */
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背景色 */
        background: red;
    }

    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
    }

</style>

<div class="box1">
    <div class="box2">
        padding 设置元素包含的内容和元素边框的距离
    </div>
    <div class="box3">
    </div>
</div>Copy

4. 文本常用样式属性示例

<style>
    p{
       /* 设置字体大小  浏览器默认是 16px */
       font-size:20px;
       /* 设置字体颜色 */
       color: red;
       /* 设置背景色 */
       background: green;
       /* 设置文字居中 */
       text-align: center;
    }
</style>

<p>
    你好，世界!
</p>Copy

5. 小结

设置不同的样式属性会呈现不同网页的显示效果
样式属性的表现形式是: 属性名:属性值;

JavaScript的介绍

1. JavaScript的定义

JavaScript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称js.

它能够让网页和用户有交互功能, 增加良好的用户体验效果。

前端开发三大块

1、HTML：负责网页结构

2、CSS：负责网页样式

3、JavaScript：负责网页行为，比如:网页与用户的交互效果

2. 使用方式

将js代码写在一个单独的.js文件中，在<head>标签中使用<script>标签直接引入该文件到页面中。

<script type="text/javascript" src="js/index.js"></script>
Copy

3. 小结

JavaScript是运行在浏览器端的脚本语言，它的作用就是负责网页和用户的交互效果。

变量和数据类型

1. 定义变量

JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript的变量类型由它的值来决定，定义变量需要用关键字 'var', 一条JavaScript语句应该以“;”结尾

定义变量的语法格式:

var 变量名 = 值;

 var iNum = 123;
 var sTr = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';Copy

2. JavaScript注释

JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)

<script type="text/javascript">    

// 单行注释
var iNum = 123;
/*  
    多行注释
    1、...
    2、...
*/
var sTr = 'abc123';
</script>Copy

3. 数据类型

js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
1、object 后面学习的JavaScript对象属于复合类型

//1.1 数字 number
var iOne = 10.1;

//1.2 字符串 string
var sStr = '1234';

//1.3 布尔 boolean; 
var bIsTrue = false;

//1.4 未定义 undefined
var unData;

//1.5 null 表示空对象
var nullData = null;

//1.6 object 表示对象类型
var oObj = {
   name:"隔壁老王",
   age:88
}
// 1.7 数组
var oArr = ['a','b','c','d']
// 获取变量的类型
var type = typeof(oObj);
alert(type);
// 获取对象的name属性
alert(oObj.name);
// 获取数组数据
alert(oArr[0]);Copy

4. 变量命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

5. 小结

js中有六种数据类型，分别是:
- number
- string
- boolean
- undefined
- null
- object

函数定义和调用

1. 函数定义

函数就是可以重复使用的代码块, 使用关键字 function 定义函数。

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
</script>Copy

2. 函数调用

函数调用就是函数名加小括号，比如:函数名(参数[参数可选])

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数调用
    fnAlert();
</script>Copy

3. 定义有参数有返回值的函数

定义函数时，函数如果有参数，参数放到小括号里面，函数如果有返回值，返回值通过 return 关键字来返回

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>Copy

函数中'return'关键字的作用:
1、返回函数中的值
2、执行完return函数执行结束

4. 小结

函数的定义

  function 函数名(参数[参数可选]){  
      // 函数的代码实现  
      ...  
  }Copy

函数的调用
```
  函数名(参数[参数可选])
```

条件语句

1. 条件语句的介绍

条件语句就是通过条件来控制程序的走向

2. 条件语句语法

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来判断多条件，执行条件成立的语句

3. 比较运算符

假如 x = 5, 查看比较后的结果:

比较运算符	描述	例子
==	等于	x == 8 为 false
===	全等(值和类型)	x === 5 为 true; x === "5" 为 false
!=	不等于	x != 8 为 true
>	大于	x > 8 为 false
<	小于	x < 8 为 true
>=	大于或等于	x >= 8 为 false
<=	小于或等于	x <= 8 为 true

比较运算符示例代码:

var iNum01 = 12;
var sNum01 = '12';

if(iNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "==" 符号默认会将符号两边的变量转换成数字再进行对比，这个叫做隐式转换
if(sNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "===" 符号不会转换符号两边的数据类型
if(sNum01===12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// 多条件判断
var sFruit = "苹果";
if (sFruit == "苹果") {
    alert("您选择的水果是苹果");
} else if (sFruit == "鸭梨") {
    alert("您选择的水果是鸭梨");
} else {
    alert("对不起，您选择的水果不存在!")
}Copy

4. 小结

条件语句三种写法
- if 语句适用于单条件判断
- if else 语句适用于两种条件的判断(成立和不成立条件判断)。
- if else if else 语句适用于多条件判断

循环语句

1. 循环语句的介绍

循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:

for
while

2. for循环

var array = [1, 4, 5];

for(var index = 0; index < array.length; index++){
    var result = array[index];
    alert(result);
}Copy

3. while循环

var array = [1, 4, 5];        
var index = 0;

while (index < array.length) {
    var result = array[index];
    alert(result);
    index++;
}Copy

说明:

当条件成立的时候, while语句会循环执行

5. 小结

js中循环语句有:
- for
- while

字符串拼接

1、字符串拼接

字符串拼接使用: "+" 运算符

var iNum1 = 10;
var fNum2 = 11.1;
var sStr = 'abc';

result = iNum1 + fNum2;
alert(result); // 弹出21.1

result = fNum2 + sStr;
alert(result); // 弹出11.1abcCopy

说明

数字和字符串拼接会自动进行类型转换(隐式类型转换)，把数字类型转成字符串类型进行拼接

小结

"+" 运算符能够实现字符串的拼接操作

jQuery的介绍

1. jQuery的定义

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

2. jQuery的作用

jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

3. jQuery的优点

jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
jQuery简化了 JavaScript 编程，代码编写更加简单。

4. 小结

jQuery是一个免费、开源的JavaScript函数库
jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
jQuery的优点就是兼容主流浏览器，代码编写更加简单。

jQuery的用法

1. jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script> # 本地引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> # 线上引入Copy

2. jQuery的入口函数

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，

入口函数示例代码:


<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    }); 
</script>

<div id="div01">这是一个div</div>Copy

3. 小结

引入jQuery

jQuery入口函数

  // 简化写法
  $(function(){
       ...
  });

jQuery选择器

1. jQuery选择器的介绍

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

2. jQuery选择器的种类

标签选择器
类选择器
id选择器

示例代码:

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签Copy

说明:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

$(function(){
    result = $("div").length;
    alert(result);
});Copy

3. 小结

jQuery选择器就是选择标签的
标签选择器是根据标签名来选择标签
类选择器是根据类名来选择标签
id选择器是根据id来选择标签

获取和设置元素内容

1. html方法的使用

jquery中的html方法可以获取和设置标签的html内容

示例代码:

<script>
    $(function(){

        var $div = $("#div1");
        //  获取标签的html内容
        var result = $div.html();
        alert(result);
        //  设置标签的html内容，之前的内容会清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html内容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>

<div id="div1">
    <p>hello</p>
</div>Copy

说明:

给指定标签追加html内容使用append方法

2. 小结

获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法

获取和设置元素属性

1. prop方法的使用

之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

示例代码:

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 获取元素属性
        var sId = $a.prop("id");
        alert(sId);

        // 设置元素属性
        $a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});

        //  获取value属性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 获取value属性使用val()方法的简写方式
        var sValue = $input.val();
        alert(sValue);
        // 设置value值
        $input.val("222222");
    })
</script>

<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">Copy

说明: 获取value属性和设置value属性还可以通过val方法来完成。

2. 小结

获取和设置元素属性的操作可以通过prop方法来完成
获取和设置元素的value属性可以通过val方法来完成，更加简单和方便

jQuery事件

1. 常用事件

click() 鼠标单击
blur() 元素失去焦点

示例代码:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

        //  鼠标点击
        $li.click(function(){            
            // $(this) 指的是当前发生事件的jquery对象
            $(this).css({'background':'gold'});
        });

        //  一般和按钮配合使用
        $button.click(function(){
            alert($text.val());
        });


        //  失去焦点
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

    });
</script>

<div id="div1">
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="点击">
</div>Copy

说明:

this指的是当前发生事件的对象，但是它是一个原生js对象
$(this) 指的是当前发生事件的jquery对象

2. 小结

jQuery常用事件:

click() 鼠标单击
blur() 元素失去焦点

json

1. json的介绍

json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

2. json的格式

json有两种格式：

对象格式
数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

{
    "name":"tom",
    "age":18
}Copy

格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

["tom",18,"programmer"]
Copy

实际开发的json格式比较复杂,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}Copy

3. json数据转换成JavaScript对象

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

示例代码:

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);

// 操作属性
alert(oPerson.name);
alert(oPerson.age);Copy

4. 小结

json就是一个javascript对象表示法，json本质上是一个字符串。
json有两种格式：1. 对象格式, 2. 数组格式

ajax

1. ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

2. ajax的使用

$(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
         */
        $.get("https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area=北京", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("网络异常");
        });

    });Copy

参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)

url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: "success"
- xhr 底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式
- "xml"
- "html"
- "text"
- "json"
error 表示错误异常处理
- func 错误异常回调函数

3. 小结

ajax 是发送http请求获取后台服务器数据的技术

Ajax 综合练习

学习目标

能够结合所学知识,通过Ajax请求天气数据接口,实现天气页面的动态刷新

数据接口 https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area=北京
请求数据格式效果

关键字说明

{
 "statusCode":"000000",
 "desc":"请求成功",
 "result":{
     "area":"广州",//地区名称
     "areaid":"101280101", //地区ID
     "dayList":[
         {
             "area":"广州",//地区名称
             "areaid":"101280101",//地区ID
              "day_air_temperature":"32", //日平均温度
             "day_weather":"雷阵雨",//天气状况
             "day_weather_code":"04",//天气状况编码
             "day_weather_pic":"http://app1.showapi.com/weather/icon/day/04.png", //天气状况示例图片
             "day_wind_direction":"无持续风向",//风向
             "day_wind_power":"微风",//风力
             "daytime":"20170712",//日期
             "night_air_temperature":"26",//晚间温度
             "night_weather":"雷阵雨",//晚间天气状况
             "night_weather_code":"04", //晚间天气状态编码
             "night_weather_pic":"http://app1.showapi.com/weather/icon/night/04.png",//晚间天气状况示例图
             "night_wind_direction":"无持续风向"//晚间风向
         }
     ],
     "ret_code":0
 }
}Copy

4、页面效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <title>天气查询</title>
</head>
<body>
  <input type="text" id="text1"> 
  <input type="button"  id="button1" value="获取">
  <div id="res">

  </div>

  <script>
    // 获取按钮和输入框元素
    var $button = $('#button1')
    var $text = $('#text1')

    $(function(){
      // 定义按钮点击事件的执行逻辑
      $button.click(function(){

        // 获取用户输入值
        var inputData = $text.val()
        // 发送请求
        $.get('https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=3bHuMQ58fc3165eac0273bb4ab3925d90e9a37700099738&area='+inputData,function(data,status){
          // 获取返回的数据内容
          var dayList = data.result.dayList
          console.log(dayList)
          // 将返回的数据内容写入页面
          for(var index = 0;index < dayList.length;index++){
            $('#res').append('<div> <ol> <li>日期：'+dayList[index].daytime+'</li> <li>天气：'+dayList[index].day_weather +'</li><li>气温：'+dayList[index].day_air_temperature+'</li></ol></div>')
          }
        },'json').error(function(data){

        })


      })
     })
   </script>
</body>
</html>