Python基础 3.5 HTML CSS JS 和 JQuery

最新推荐文章于 2024-02-17 18:46:21 发布

TokiOnjouji

最新推荐文章于 2024-02-17 18:46:21 发布

阅读量456

点赞数

分类专栏： Python基础文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/TokiOnjouji/article/details/112790283

版权

Python基础专栏收录该内容

22 篇文章

订阅专栏

3.5 Html 和 CSS基础

3.5.1 html

1.介绍

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

所谓超文本，有2个意义

网页中包含除了文本以外的数据内容，超越文本
它还可以从一个网页跳转到其他网页

2.作用

开发网页的语言

3.代码结构

<!DocType html5>
<html>
  <head>
  	<meta charset = "utf-8">
    <title>网页标题</title>
  </head>
  <body>
    网页内容
  </body>
</html>

4.VScode的使用（了解）

在空html里！加tab键会快速生成模板

5.初见html标签

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

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

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


<!-- 2、单个出现的标签： -->
<!--空换行，html里所有空格换行缩进是不会被识别的，必须使用标签来换行-->
<br>
<!--图片标签-->
<img src="images/pic.jpg" alt="图片">
<img src="images/picxxx.jpg" alt="图片加载失败">
<!--行分割线-->
<hr>


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

<!-- 4、标签的嵌套 -->
<!--div是块标签，作为容器使用，可以嵌套容纳其他标签-->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

6.资源路径

当我们使用img标签的时候需要指定图片路径，同样的也有相对路径和绝对路径使用之分

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

7.列表标签

7.1无序列表标签(ul)

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

快捷

ul>li*需要的列表数

7.2有序列表标签(ol)

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

快捷

ol>li*需要的列表数

8.表格标签

8.1表格标签结构

<table> </table>表格标签标记一个表格

<tr> </tr>标记表格中的一行

<th> </th>标记当前行的表头

<td> </td>标记当前行的内容

8.2 示例

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td> 
    </tr>
</table>

默认样式是没有表格线的，如果要有边线得加入属性，每个表格内容都可以加上线，但是全部表格加线会出现重线，这时候需要合并边线border-collapse

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6M38zjyY-1610963737056)(/Volumes/Data/SynologyDrive/MD/ProgramLanguage/Python/asset/QQ20201123-105648.png)]

9.表单标签

1.介绍

用于搜集不同的用户输入，然后把用户输入内容发送到web服务器

2.表单相关标签使用

<form>标签表示表单标签，定义整体的表单区域
<label>标签表示表单元素的文字标注标签，定义文字标注
<input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
- type属性
  - type=“text” 定义单行文本输入框
  - type=“password” 定义密码输入框
  - type=“radio” 定义单选框
  - type=“checkbox” 定义复选框
  - type=“file” 定义上传文件
  - type=“submit” 定义提交按钮
  - type=“reset” 定义重置按钮
  - type=“button” 定义一个普通按钮
<textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框
<select>标签表示表单元素的下拉列表标签定义下拉列表
- <option>标签与<select>标签配合，定义下拉列表中的选项

3.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <p>
            <label>
                账户
            </label>
            <input type="text">
        </p>
        <p>
            <label>
                密码
            </label>
            <input type="password">
        </p>
        <p>
            <label>sex</label>
            <input type="radio">male
            <input type="radio">female
        </p>
        <p>
            <label>
                safe problem
            </label>
            <input type="checkbox">Your Mom 
            <input type="checkbox">Your Farther
        </p>
        <p>
            <label>file</label>
            <input type="file">
        </p>
        <p>
            <label>简介</label>
            <textarea></textarea>
        </p>
        <p>
            <label>籍贯</label>
            <select name="省份" id="1">
                <option>广东</option>
                <option>北京</option>
                <option>广西</option>
            </select>
        </p>
      	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <p>
            <label>
                账户
            </label>
            <input type="text">
        </p>
        <p>
            <label>
                密码
            </label>
            <input type="password">
        </p>
        <p>
            <label>sex</label>
            <input type="radio">male
            <input type="radio">female
        </p>
        <p>
            <label>
                safe problem
            </label>
            <input type="checkbox">Your Mom 
            <input type="checkbox">Your Farther
        </p>
        <p>
            <label>file</label>
            <input type="file">
        </p>
        <p>
            <label>简介</label>
            <textarea></textarea>
        </p>
        <p>
            <label>籍贯</label>
            <select name="省份" id="1">
                <option>广东</option>
                <option>北京</option>
                <option>广西</option>
            </select>
        </p>
    </form>
</body>
</html>
    </form>
</body>
</html>

10.提交表单

1. 表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
- GET 会把表单提交的数据，以在URL的形式提交到服务器，明文传输留下记录且不安全，一般用于提交搜索数据。
- POST 会把表单提交的数据，以请求体的方式提交到服务器，不会被记录，较为安全，一般用于提交账户密码之类的内容。

2. 表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

3.应用制作一个跳转Baidu搜索的提交表单

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="GET">
        <p>
            <label>搜索内容</label>
            <input type="text" class="s_ipt" name="wd" id="kw">
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

3.5.2 CSS(了解)

1.css的定义

层叠样式表，是美化页面的语言

2.css的作用

美化页面，设置文字大小属性
控制页面布局

3.css的基本语法

选择器{

样式规则

属性名1:值1;

属性名2:值2;

}

选择器选择的标签均套上一样的样式

4.css的引入方式

1.行内式

直接在标签里面写样式规则填属性，方便直观但是可重复性低

2.内嵌式（内部样式）

在head标签里直接添加属性

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

在同一页面便于重复利用和维护，但是多个页面依旧可重复性不高

3.外链式

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

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

在多个页面可重复性高，便于整个页面规划维护，但是容易出现css代码过去集中，维护不当容易混淆出错。

5.css选择器种类

1.标签选择器

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

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

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

2.类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是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>

3.层选择器（选择器1 选择器2）继承属性

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>

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

<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

4.id选择器

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

示例代码

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

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

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

5.组选择器（选择器1，选择器2）共用

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

<style type="text/css">
    .box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
</style>

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

6.伪类选择器（选择器1:选择器2）改变

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">这是第一个div</div>

6.css常用属性

1. 布局常用样式属性

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;

2. 文本常用样式属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

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

<style>

    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
        border: 1px solid black;
    }

    .box2{
        /* 这里是注释内容 */
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背景色 */
        background: red;
        /* 设置四边边框 */
        /* border: 10px solid black; */
        border-top: 10px solid black;
        border-left: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        /* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 */
        /* padding: 10px;   */
        padding-left: 10px;
        padding-top: 10px;
        /* 设置外边距，设置元素边框到外界元素边框的距离 */
        margin: 10px;
        /* margin-top: 10px;
        margin-left: 10px; */
        float: left; /* 如果双方均设置浮动还可以改变排列 而且连外边距都会一块加上*/
    }

    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
        border: 1px solid black;
        float: left;
    }

</style>

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

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

<style>
    p{
       /* 设置字体大小  浏览器默认是 16px */
       font-size:20px;
       /* 设置字体 */
       font-family: "Microsoft YaHei"; 
       /* 设置字体加粗 */
       font-weight: bold;
       /* 设置字体颜色 */
       color: red;
       /* 增加掉下划线 */
       text-decoration: underline;
       /* 设置行高  */
       line-height: 100px;
       /* 设置背景色 */
       background: green;
       /* 设置文字居中 */
       /* text-align: center; */
       text-indent: 40px;
    }

    a{
        /* 去掉下划线 */
        text-decoration: none;
    }
</style>

<a href="#">连接标签</a>
<p>
    你好，世界!
</p>

3.5.3 JavaScript

1.JavaScript的介绍

1-JavaScript的定义

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

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

2-前端开发三大块

1、HTML：负责网页结构

2、CSS：负责网页样式

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

2.JavaScript的使用方式

1. 行内式（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2. 内嵌式

<script type="text/javascript">        
    alert('ok！');
</script>

3. 外链式

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

3.JavaScript的变量和数据类型

1.定义变量

var 变量名 = 值;

2.6种数据类型

js中有六种数据类型，分别是:

number
string
boolean
undefined
null(空对象类型)
object（对象类型）

3.命名规范

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

4.匈牙利命名法

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler

4.JavaScript的函数

1.定义和调用

<script type="text/javascript">
function fuSum(x,y){
	iRes = x + y;
  return iRes;
	}
alert(fuSum(5,7));
</script>

规范为

定义函数关键词为function，函数体在括号内。

调用函数也一样

2.变量作用域

和Python一样有全局变量和局部变量

稍有不同的是，如果函数调用后才定义的全局变量，不会报错，而是显示undefined，是因为js如果使用var做全局变量，会有个提前声明，但是没有值。

5.条件语句

1. 条件语句的介绍

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

if(条件){通过条件则执行的语句}

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

注意

===才是Python里的==,判断值和类型

==只判断值，可以跨类型判断值，比如’12’==12

4. 逻辑运算符

假如 x=6, y=3, 查看比较后的结果:

比较运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x5 \|\| y5) 为 false
!	not	!(x==y) 为 true

6.获取标签元素

可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>
<div id="div1">这是一个div元素</div>

上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。

解决方法有两种:

第一种方法：将javascript放到页面最下边

<div id="div1">这是一个div元素</div>

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>

第二种方法：设置页面加载完成执行的函数，在执行函数里面获取标签元素。

<script type="text/javascript">
        // var oDiv = document.getElementById('div1');
        // alert(oDiv);
        function oA(){
            var oDiv = document.getElementById('div1');
             alert(oDiv);
        }
        window.onload = oA
    </script>
    <div id="div1">这是一个div元素</div>

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

说明:
onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。

7.操作标签元素

7.1 属性操作

首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:

属性的读取
属性的设置

属性名在js中的写法

html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

<style>
    .sty01{
        font-size:20px;
        color:red;
    }
    .sty02{
        font-size:30px;
        color:pink;
        text-decoration:none;
    }

</style>

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;

        // 操作class属性,需要写成“className”
        oA.className = 'sty02';

        // 写(设置)属性 class里的属性如果不设置的话 我们直接读取是读取不到的
        // getElementById 只能获取到input里的属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>

7.2 读取或者设置标签包裹的内容

innerHTML可以读取或者设置标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>


<div id="div1">这是一个div元素</div>

8. 数组及操作方法

1. 数组的介绍

数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

2. 数组的定义

// 实例化对象方式创建
var aList = new Array(1,2,3);

// 字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

3. 多维数组

多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。(列表嵌套)

var aList = [[1,2,3],['a','b','c']];

4. 数组的操作

1、获取数组的长度

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、根据下标取值

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、从数组最后添加和删除数据

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

4、根据下标添加和删除元素

arr.splice(start,num,element1,…,elementN)

参数解析：

start：必需，开始删除的索引。
num：可选，删除数组元素的个数。
elementN：可选，在start索引位置要插入的新元素。

此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置。

var colors = ["red", "green", "blue"];
colors.splice(0,1);  //删除第一项
alert(colors);  //green,blue

colors.splice(1, 0, "yellow", "orange");  //从第一个索引位置插入两项数据
alert(colors);  //green,yellow,organge,blue

colors.splice(1, 1, "red", "purple");  //删除一项，插入两项数据
alert(colors);  //green,red,purple,orange,blue

9.循环语句

1. 循环语句的介绍

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

for
while
do-while

2. for循环

var array = [1, 4, 5];

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

3. while循环

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

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

说明:

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

4. do-while循环

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

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

说明:

当条件不成立的时候do语句也会执行一次

10.字符串操作

字符串拼接使用: “+” 运算符

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

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

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

说明

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

11.定时器

1. 定时器的介绍

定时器就是在一段特定的时间后执行某段程序代码。

2. 定时器的使用：

js 定时器有两种创建方式：

setTimeout(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
setInterval(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout函数的参数说明:

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello(){ 
        alert('hello'); 
    } 

    // 执行一次函数的定时器
    setTimeout(hello, 500);
</script>

setInterval函数的参数说明:

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    setInterval(hello, 1000);
</script>

3. 清除定时器

js 清除定时器分别是:

clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。

<script>
    function hello(){
        alert('hello');
        // 清除只执行一次的定时器
        clearTimeout(t1)
    }
    // 执行一次函数的定时器
    t1 = setTimeout(hello, 500);
</script>

clearInterval函数的参数说明:

timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    var t1 = setInterval(hello, 1000);

    function stop(){
        // 清除反复执行的定时器
        clearInterval(t1); 
    }  

</script> 

<input type="button" value="停止" onclick="stop();">

3.5.4 jQuery

1.jQuery的介绍

1. jQuery的定义

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

2. jQuery的作用

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

3. jQuery的优点

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

2.jQuery的使用

1.jQuery的引用

下载后本地引用

<script src="js/jquery-1.12.4.min.js"></script>

网络引用

2.jQuery库的使用简介

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

入口函数示例代码:

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是获取的div：' + oDiv);
    };
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    });
</script>

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

入口函数的简写示例代码:

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div01');
        alert('原生就是获取的div：' + oDiv);
    };

    /*
    $(document).ready(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    });
    */

    // 上面ready的写法可以简写成下面的形式：
    $(function(){
        var $div = $('#div01');
        alert('jquery获取的div：' + $div);
    }); 
</script>

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

总结：在jQuery引入的函数和变量最好都用$开头

3.jQuery选择器

1. jQuery选择器的介绍

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

2. jQuery选择器的种类

标签选择器
类选择器
id选择器
层级选择器
属性选择器

示例代码:

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        $(function(){
            
        
        // jquery选择器 选中标签 设置样式属性...; 选择规则和css的选择器规则一样;
            // 标签选择器
            var $div1 = $('div')
            console.log($div1.html())
            // 类选择
            var $div2 = $(".div1")
            console.log($div2.html())
            // id选择器
            var $div3 = $("#id1")
            console.log($div3.html())
            // 层级选择器
            var $div4 = $("div p")
            console.log($div4.html())
            // 属性选择器 : 选择属性name=‘username’的input标签;
            var $div5 = $('input[name=username]')
            console.log($div5)
        })

    </script>

</head>
<body>
    
    <div class="div1">这是一个div标签</div>
    <div id="id1">这是一个div标签</div>
    <div>这是一个div标签</div>

    <!-- 简写: div>p -->
    <div>
        这是第一层div标签
        <p>这是第二层的段落标签</p>
    </div>

    <input type="text" name="username">
    <input type="text" name="qq">
    <input type="text" name="phone">

</body>
</html>

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

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

4.选择集过滤

1. 选择集过滤的介绍

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

2. 选择集过滤的操作

has(选择器名称)方法，表示选取包含指定选择器的标签
eq(索引)方法，表示选取指定索引的标签
变量.css({属性名:属性名}) 是改变对应标签css的方法

has方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>

eq方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>

拓展

我们想测试自己代码写的正确与否可以不用alert方法

使用console.log(想知道的内容) 可以在浏览器的控制台里看到输出

5.选择集迁移

1. 选择集转移介绍

选择集转移就是以选择的标签为参照，然后获取转移后的标签

2. 选择集转移操作

$(’#box’).prev(); 表示选择id是box元素的上一个的同级元素
$(’#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
$(’#box’).next(); 表示选择id是box元素的下一个的同级元素
$(’#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
$(’#box’).parent(); 表示选择id是box元素的父元素
$(’#box’).children(); 表示选择id是box元素的所有子元素
$(’#box’).siblings(); 表示选择id是box元素的其它同级元素
$(’#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ge1NbcJs-1610963737067)(/Volumes/Data/SynologyDrive/MD/ProgramLanguage/Python/asset/Snipaste_2020-11-25_11-19-44.png)]

选择集转移的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        // 选择集转移: 以当前选中标签为参照,找其他标签;
        $(function(){
            var $div = $("#div01");
            console.log($div);

            // 1.上一个兄弟标签
            var $div1 = $div.prev();
            $div1.css({"color":"red"});
            // 2.下一个兄弟标签
            var $div2 =$div.next();
            $div2.css({"color":"blue"});

            // 3.上面所有兄弟标签
            $div.prevAll().css({"background":"green"});
            // 4.下面所有兄弟标签
            $div.nextAll().css({"background":"gold"});
            // 5.上下所有兄弟标签
            $div.siblings().css({"border":"1px solid black"})

            // 6.找父级标签
            $div.parent().css({"width":"200px"})

            // 7.找所有子标签
            $div.children().css({"font-size":"50px"})

            // 8.找满足选择器的子标签
            $div.find(".sp02").css({"font-weight":"bold"})
        })
    </script>

</head>
<body>
    <div>
        <h2>这是第一个h2标签</h2>
        <p>这是第一个段落</p>
        <div id="div01">这是一个<span>div</span>第二个<span class="sp02">span</span></div>
        <h2>这是第二个h2标签</h2>
        <p>这是第二个段落</p>
    </div>
</body>
</html>

6.获取和设置元素内容

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

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        // 获取标签对象的入口函数
        $(function(){
            var $div = $("#div1");

        
        // html方法:可以获取标签内容 和 设置标签内容
        // append方法:追加标签内容
 


            // 1. 获取标签内容
						var ret = $div.html();
            console.log(ret);
            
            console.log($div.html())
            
            // 2. 设置标签内容 : 删除原来内容
            $div.html("www.baidu.com")

            // 3. 追加标签内容 : 不会删除原来内容
            $div.append("<br><a href='www.baidu.com'>百度网</a>")
            console.log($div.html())

        })
    </script>

</head>
<body>
    
    <div id="div1">
        <p>hello</p>
    </div>


</body>
</html>

说明:

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

7.获取和设置元素属性

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

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        $(function(){

        
        // 获取标签对象的入口:
            var $a = $("#link01");
            var $input = $("#input01");
            // prop方法: 获取和设置标签属性
            console.log($a.prop("id"))
            // 1. 获取标签属性

            
            // 1.2 获取value属性 val() 
            console.log($input.prop("value"))
            // alert($input.prop("value"));
            console.log($input.val())


            // 2. 设置标签属性
            

            // 2.2 设置value属性 val("222222")
            $input.prop({"value":"123456"});
            console.log($input.val());
            $input.val("555555");
            console.log($input.val());
            // $input.prop({"value": "222222"});

 
                  
            // 3. 设置css属性
            $input.css({"color":"blue"})
            console.log($input.css("color"))
            // 3.2. 获取css属性
        })

    </script>

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

</body>
</html>

通过观察控制台输出可以看出

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScVstJST-1610963737071)(/Volumes/Data/SynologyDrive/MD/ProgramLanguage/Python/asset/Snipaste_2020-11-25_20-26-37.png)]

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

8.jQuery事件

jQuery常用事件:

click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <!-- 
        click() 鼠标单击
        blur() 元素失去焦点
        focus() 元素获得焦点
        mouseover() 鼠标进入（进入子元素也触发）
        mouseout() 鼠标离开（离开子元素也触发）

        this: 触发事件的原生的js对象
        $(this): 触发事件的jquery对象;
    -->
    <!-- 对象.事件(事件触发函数) -->

    <!-- 导入jquery文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        $(function foo(){
            // 先获取所有的元素
            var $div = $("#div1");
            var $li = $(".list li");
            var $input = $("#text1");
            var $button = $("#button1");
            // 设置鼠标点击时的 事件
            $button.click(function(){
                alert("点击了按钮，获取到内容text内容为："+ $input.val());
            });
            // 设置文本框获取焦点的时候 和 失去焦点时候 的事件
            $input.focus(function(){
                $input.css({"background":"red"})
            });
            $input.blur(function(){
                $input.css({"background":"white"});
            });
            // 设置 当我点击列表的时候 除了列表项以外的 全为黑 
            // 这里需要用this来指代特定的列表项目 除非去给特定li增加id或者value识别
            $li.click(function(){
                $(this).css({"color":"red"});
                $(this).siblings().css({"color":"black"});
            });
            // 当我把鼠标放在整块区域上 整块区域背景进行更改
            $div.mouseover(function(){
                $(this).css({"background":"gold"});
            });
            $div.mouseout(function(){
                $(this).css({"background":"white"})
            })
        })


    </script>

</head>
<body>

    <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>

</body>
</html>

说明:

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

9.事件冒泡和事件代理

1.事件冒泡

当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        $(function() {
            var $div1 = $("#div1");
            var $div2 = $("#div2");
            
        
        // 当点击子元素div，它的点击事件会向它父元素传递，
            $div1.click(function () {
                console.log("子标签事件触发");
            });
        // 也会触发了父元素的点击事件，这就是事件冒泡。
            $div2.click(function(){
                console.log("父标签事件触发")
            })
        // 获取标签的入口函数

        })
    </script>

</head>
<body>
    
    <div id="div1" style="width:200px; height:200px; background: red;">
        <div id="div2" style="width:100px; height:100px;background: yellow;">
            哈哈
        </div>
    </div>

</body>
</html>

注意

父标签必须有和子标签一样的触发事件才会发送冒泡
是向上传递不是向下传递

2.事件代理

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        // 获取标签对象的入口函数
        $(function(){

            var $ul = $("#list");
            var $ali = $("#list li");
            // 1.一般方式绑定事件 
            // 循环绑定 : 1)效率低下; 2)新增的子标签没有绑定事件;

            // $ali.click(function () {
            //     $(this).css({"color":"red"});
            // });
            // // 新增的子标签6并没有被绑定
            // $ul.append("<li>6</li>");
            // 2. 使用父标签代理 子标签完成 事件处理
            // 绑定父标签 : 1) 效率高; 2)新增的子标签触发事件也能执行;
                $ul.delegate("li", "click", function () {
                    $(this).css({"color":"red"});
                    
                });
                $ul.append("<li>6</li>");
            // delegate("子标签选择器", "事件名", 事件触发处理函数);
            
        })
    </script>

</head>
<body>
    
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

</body>
</html>

Ajax

1.JavaScript对象

1.介绍

js里万物皆对象，数组数值函数均为对象，也允许自定义对象

2.创建对象操作

创建自定义javascript对象有两种方式:

通过顶级Object类型来实例化一个对象
通过对象字面量创建一个对象，推荐使用对象字面量法

Object类创建对象的示例代码:

<script>
    var person = new Object();

    // 添加属性：
    person.name = 'tom';
    person.age = '25';

    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }

    // 调用属性和方法：
    alert(person.age);
    person.sayName();
</script>

对象字面量创建对象（推荐）的示例代码:

<script>
    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();
</script>

2.JSON

1. json的介绍

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

2. json的格式

json有两种格式：

对象格式
数组格式

对象格式:

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

对象格式的json数据:

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

格式说明:

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

数组格式:

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

数组格式的json数据:

["tom",18,"programmer"]

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

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

3. json数据转换成JavaScript对象

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

示例代码:

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
var sJson2 = '["python","java","html"]';
var oLan = JSON.parse(sjson2);
// 操作属性
alert(oPerson.name);
alert(oPerson.age);
alert(oLan[2])

3.ajax

1.ajax的介绍

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3uBMoHHW-1610963737080)(/Volumes/Data/SynologyDrive/MD/ProgramLanguage/Python/asset/Snipaste_2020-11-26_02-02-17.png)]

2.ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

ajax方法的参数说明:

url 请求地址
type 请求方式，默认是’GET’，常用的还有’POST’
dataType 设置返回的数据格式，常用的是’json’格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是’true’，表示异步，一般不用写
同步和异步说明
- 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
- 异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

3.简写

$. a j a x 按照请求方式可以简写成$ .get或者$.post方式

ajax简写方式的示例代码:

 <script>
    $(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(data,status){
            console.log(data);
            console.log(status);
            alert(dat);
        }).error(function
            alert("网络异常");
        });

        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("网络异常");
        }); 
    });


</script>

$. g e t 和$ .post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(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 错误异常回调函数

4.ajax的应用实例

1.应用1 像指定地址发送GET报文获取内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        // 搜索路径: http://ttapi.research.itcast.cn/app/v1_0/search?q=hello
        function search(){
            // alert("搜索函数被调用了");
            // 1.js对象：定义ajax需要的js参数
            var oParam={
                url: "http://ttapi.research.itcast.cn/app/v1_0/search?q=hello",
                type: "GET",
                dataType: "json",
                success: function(response){
                    console.log(response);
                },
                error: function(){
                    alert("请求失败，请重新尝试");
                },
                async: true

            }
            $.ajax(oParam)
            // 2.使用ajax实现前端代码向后端服务器发送异步HTTP请求
        }

    </script>

</head>
<body>
    
    <input type="text" id="input01">
    <input type="button" value="搜索" id="btn01" onclick="search();">

    <ul id="content">
        
    </ul>

</body>
</html>

可以在控制台看到相关的输出

我们把console.log(response)改成数据类型和数据（typeof(response),response)

可以看出返回的类型是obj，是个复核数据。

2 应用2 将获取的内容在页面内打印出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        function search(){
              // alert("搜索函数被调用了");
            // 1.js对象：定义ajax需要的js参数
            var oParam={
                url: "http://ttapi.research.itcast.cn/app/v1_0/search?q=hello",
                type: "GET",
                dataType: "json",
                success: function(response){
                    console.log(typeof(response), response);
                    // 想读取标题 发现在返回报文的data里
                    var results = response.data.results;
                    var $ul = $("#content");
                    for (var i =0; i<results.length;i++){
                        console.log(results[i].title);
                    // 但是这是在控制台的，我们希望它能在页面里真正的显示出来
                        $ul.append("<li>"+results[i].title+"</li>");
                    }
                },
                error: function(){
                    alert("请求失败，请重新尝试");
                },
                async: true

            }
            $.ajax(oParam)
            // 2.使用ajax实现前端代码向后端服务器发送异步HTTP请求
            
            // alert("搜索函数被调用了");

            // 1).向web服务器发送搜索请求
            // js对象：定义ajax需要的js参数
            
            // 2).使用ajax实现前端代码向后端服务器发送异步HTTP请求
            // $.ajax(js对象)
        }

    </script>

</head>
<body>
    
    <input type="text" id="input01">
    <input type="button" value="搜索" id="btn01" onclick="search();">

    <ul id="content">
        
    </ul>

</body>
</html>

3.应用3 将文本框内的内容当成要搜索的内容并且清空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        function search(){
            // alert("搜索函数被调用了");
            // 1).获取需要查询的内容
            var $input = $("#input01");
            // 将输入框内的内容转化成字符串
            qstr = $input.val()
            // 增强报错体验，如果输入为空则不允许请求
            if (qstr === ""){
                alert("搜索内容不能为空，请重新输入");
                return;
            }
            var oParam={
                url: "http://ttapi.research.itcast.cn/app/v1_0/search?q="+qstr,
                type: "GET",
                dataType: "json",
                success: function(response){
                    console.log(typeof(response), response);
                    // 想读取标题 发现在返回报文的data里
                    var results = response.data.results;
                    var $ul = $("#content");
                    // 搜索成功的时候 首先清空一下已经有的列表
                    $ul.html("")
                    for (var i =0; i<results.length;i++){
                        console.log(results[i].title);
                    // 但是这是在控制台的，我们希望它能在页面里真正的显示出来
                        $ul.append("<li>"+results[i].title+"</li>");
                    }
                },
                error: function(){
                    alert("请求失败，请重新尝试");
                },
                async: true

            }
            $.ajax(oParam)
        }

    </script>

</head>
<body>
    <!-- html：定义页面结构 -->
    <input type="text" id="input01">
    <input type="button" value="搜索" id="btn01" onclick="search();">

    <ul id="content">
        
    </ul>

</body>
</html>