Web前端开发基础笔记（6）

一、Html基础

html的介绍

html的定义

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

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

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

html的作用

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

html的基本结构

结构代码

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

vscode的基本使用

vscode的基本介绍

全屏是Visual Studio Code （简称VS Code)是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端（网页）开发使用最多的一款软件开发工具

初始常用的html标签

常用的html标签

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

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

<!-- 2.单个出现的标签: -->
<br>
<img src="">
<hr>

<!-- 3.带属性的标签，如src、alt和href等都是属性 -->

<img src=" ">
<a href=" ">链接</a>

<!-- 4.标签的嵌套 -->

<div>
    <img src=" ">
	<a href=" ">链接</a>
</div>

提示：

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

资源路径

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

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

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

相对路径

示例代码：

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

绝对路径

示例代码：

<!-- 绝对路径的写法-->
<img src="F:/code/images/logo.png">

列表标签

列表标签的种类

无序列表标签（ul标签）
有序列表标签（ol标签）

无序列表

<!-- 无序列表标签 -->

<ul>
    <li>苹果</li>
    <li>鸭梨</li>
</ul>

有序列表

<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>
<!-- 强调显示的顺序使用有序列表标签，不强调顺序使用无序列表标签 -->

表格标签

表格的结构

表格是由行和列组成的，好比一个excel文件

表格标签

<table> 标签：表示一个表格
- <tr>标签：表示表格中的一行
  - <td>标签：表示表格中的列
  - <th>标签：表示表格中的表头

<!-- border-collapse: collapse 表示表格的边线进行合并 -->
<table style="border: 1px solid black; border-collapse: collapse">
    <tr>
        <th style="border: 1px solid black;">姓名</th>
        <th style="border: 1px solid black;">年龄</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">张三</td>
        <td style="border: 1px solid black;">22</td>
    </tr>
</table>

表单标签

表单的介绍

表单用于搜集不同类型的用户输入（用户输入的数据），然后可以把用户数据提交到web服务器

表单相关标签的使用

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

示例代码

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密码：</label><input type="password">
    </p>
    <p>
        <label>性别：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

小结

表单标签是<form>标签
常用的表单元素标签有: <label>、<input>、 <textarea>、<select> 等标签

表单提交

表单属性设置

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

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

表单元素属性设置

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

示例代码

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密码：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

小结

表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置
- action: 是设置表单数据提交地址
- method: 是表单提交方式，提交方式有GET和POST
表单元素属性设置
- name: 表单元素的名称，用于作为提交表单数据时的参数名
- value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

二、css基础

css的介绍

css（Cascading Style Sheet）层叠样式表，用来美化页面的一种语言

css的作用

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

css的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1；

属性名2：属性值2；

属性名3：属性值3；

…

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

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

说明

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

css的引入方式

css的三种引入方式

行内式
内嵌式（内部样式）
外链式

行内式

直接在标签的style属性中添加css样式

<div style="width:100px; height:100px; background:red">hello</div>

优点：方便、直观。

缺点：缺乏可重用性。

内嵌式

在<head>标签中加入<style>标签，在<style>标签中编写css代码

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

优点：在同一个页面内部便于复用和维护

缺点：在多个页面之间的可重用性不够高

外链式

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

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

优点：使得css样式与html页面分离，便于整个页面系统规划和维护，可重用性高。

缺点：css代码由于分离到单独的css文件中，容易出现css代码过于集中，若维护不当则极容易造成混乱

css引入方式选择

行内式几乎不用
内嵌在学习css样式的阶段使用
外链式在公司开发的阶段使用，可以对html和css进行分别开发

小结

css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想，也最易改版维护，代码看起来也是最美观的一种。

css选择器

css选择器的定义

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

css选择器的种类

标签选择器
类选择器
层级选择器（后代选择器）
id选择器
组选择器
伪类选择器

标签选择器

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

<style>
    p{
        color:red;
    }
</style>

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

类选择器

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

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

层级选择器（后代迭代器）

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

<style>
    div p{
        color: red;
    }
    .con{
        width: 300px;
        height: 800px;
        background: green;
    }
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}
</style>

id选择器

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

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

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

组选择器

根据组合的选择器选择不同的标签，以，分隔开，如果有公共的样式设置，看见使用组合选择器

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

伪类选择器

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

<style>
    div{
        width:100px;
    }
    
    div:hover{
        width:200px
    }
</style>

css属性

布局常用样式属性

width：设置元素（标签）的宽度
height：设置元素（标签）的高度
background：设置元素背景色或者背景图片
border：设置元素四周的边框
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top：谁知顶边边框
border-left：设置左边边框
border-right：设置右边边框
border-bottom：设置底边边框
padding：设置元素包含的内容和元素边框的距离，也叫内边距
margin：设置元素和外界的距离，也叫外边距
float：设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float：left；右浮动：float：right；

文本常用样式属性

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

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

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

文本常用样式属性示例

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

小结

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

css元素溢出

什么是 css 元素溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

overflow的设置项：

visible 默认值, 显示子标签溢出部分。
hidden 隐藏子标签溢出部分。
auto 如果子标签溢出，则可以滚动查看其余的内容。

示例代码

<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父级上设置子元素溢出的部分如何显示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<div class="box1">
    <div class="box2">hello</div>
</div>

小结

overflow样式属性是设置子标签溢出的显示方式
常用使用**overflow:hidden;**来解决元素溢出

css显示特性

display 属性的使用

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

none 元素隐藏且不占位置
inline 元素以行内元素显示
block 元素以块元素显示

示例代码

<style>
    .box{
        /* 将块元素转化为行内元素 */
        display:inline;
    } 

    .link01{
        /* 将行内元素转化为块元素 */
        display:block;
        background: red;

    }

    .con{
        width:200px;
        height:200px;
        background:gold;

        /* 将元素隐藏 */
        display:none;
    }

</style>

<div class="con"></div>
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>

说明:

行内元素不能设置宽高，块元素或者行内块元素可以设置宽高。

小结

通常隐藏元素使用 display:none

盒子模型

盒子模型的介绍

所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。

盒子模型相关样式属性

盒子的内容宽度(width)，注意：不是盒子的宽度
盒子的内容高度(height)，注意：不是盒子的高度
盒子的边框(border)
盒子内的内容和边框之间的间距(padding)
盒子与盒子之间的间距(margin)

设置宽高：

设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框:

设置一边的边框，比如顶部边框，可以按如下设置：

border-top:10px solid red;

说明:

其中10px表示线框的粗细；solid表示线性；red表示边框的颜色

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

小结

盒子模型的5个主要样式属性
- width：内容的宽度(不是盒子的宽度)
- height：内容的高度(不是盒子的高度)
- padding：内边距。
- border：边框。
- margin：外边距
盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。

三、JavaScript基础

JavaScript的介绍

JavaScript的定义

JavaScript是运行在浏览器端的脚步语言，是由浏览器解释执行的，简称js，它能够让网页和用户有交互功能，

增加良好的用户体验效果。

前端开发三大块：1.HTML：负责网页结构 2.CSS ：负责网页样式 3.JavaScript：负责网页的行为

JavaScript的使用方式

行内式（主要用于事件）

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

内嵌式

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

外链式

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

小结

JavaScript的使用方式有三种：

行内式
内嵌式
外链式

变量和数据类型

定义变量

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

定义变量的语法格式：

var 变量名 = 值

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

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

JavaScript注释

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

// 单行注释
var iNum = 123;
/*
    多行注释
    1. 。。。
    2. 。。。
*/

数据类型

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

5种基本数据类型：

number 数字类型
string 字符串类型
boolean 布尔类型 true 或 false
undefined undefined类型，变量声明未初始化，他的值就是undefined
null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面获取不到对象，返回的值就是null

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
}
// 获取变量的类型
var type = typeof(oObj);
alert(type);
// 获取对象的name属性
alert(oObj.name);

变量命名规范

区分大小写
第一个字符必须是字母、下划线或者美元符
其他字符可以是字母、下划线、美元符或数字

匈牙利命名分格

对象o Object 比如：oDiv

数组a Array 比如：altems

字符串s Sting 比如：sUserName

整数i Intege 比如：itmeCount

布尔值b Boolean 比如：blsComplete

浮点数f Float 比如：fPrice

函数fn Function 比如：fnHandler

函数定义和调用

函数的定义

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

function fnShow(){
    alert("我是一个无参数无返回值的函数");
};

fnShow()

函数调用

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

 fnShow()

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

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

function fnSum(iNum1, iNum2){
    var iResult = iNum1 + iNum2
    return iResult
    alert("测试代码");
}
var iNum1 = 10;
var iNum2 = 20;
var iNum = fnSum(iNum1, iNum2);
alert(iNum);

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

小结

函数的定义

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

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

变量作用域

变量作用域的介绍

局部变量
全局变量

局部变量

局部变量就是在函数内使用的变量，只能在函数内使用

function fnShow(){
    // 局部变量
    var iNum = 1;
    alert(iNum)
}
// 函数调用
fnShow()
// 局部变量不能再函数外使用
// alert(iNum)

// 全局变量
var iNum1 = 1;

function fnModify(){
    alert(iNum1);
    iNum1 = 3;
    iNum1 ++
    alert(iNum1)
}

fnModify()
alert("函数外访问的全局变量" + iNum1)

条件语句

条件语句的介绍

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

条件语句语法

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

比较运算符

假如 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("对不起，您选择的水果不存在!")
}

逻辑运算符

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

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

逻辑运算符示例代码:

var x = 6;
var y = 3;

if(x < 10 && y > 1){
    alert('都大于');
}
else{
    alert('至少有一个不大于');
}

if(x > 5 || y > 7 ){
    alert('至少有一个大于');
}
else{
    alert('都不大于');
}

if(!(x == y)){
    alert('等于')
}
else{
    alert('不等于')
}

小结

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

获取标签元素

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

<script>
    var oDiv = document.getElementById("p1")
    alert(oDiv)
</script>

<p id="p1">哈哈，我是一个段落标签</p>

说明：

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

解决办法有两种：

第一种方法就：将JavaScript放在页面最下边

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

</head>
<body>
    <p id="p1">哈哈，我是一个段落标签</p>
</body>
</html>

<script>
    var oDiv = document.getElementById("p1")
    alert(oDiv)
</script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript的使用</title>
    <script>
        // function fnLoad(){
        //     var oDiv = document.getElementById("p1");
        //     alert(oDiv);
        // }
        // // 页面标签和数据都加载完成以后会出发onload事件
        // window.onload = fnLoad()

        window.onload = function(){
            var oDiv = document.getElementById("p1");
            alert(oDiv);
        }
    </script>
</head>
<body>
    <p id="p1">哈哈，我是一个段落标签</p>
</body>
</html>

操作标签属性

属性的操作

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

属性的读取
属性的设置

属性名在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';

        // 写(设置)属性
        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>

innerHTML

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.baidu.com">百度<a/>';
    }
</script>


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

小结

标签属性的获取和设置：

var 标签对象 = document.getElementByld(“id名称”)；-> 获取对象标签
var 变量名 = 标签对象.属性名 -> 读取属性
标签对象.属性名 = 新属性值 -> 设置属性

数组及操作方式

数组的介绍

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

数组的定义

// 实例化对象方式创建
var aList = new Array(1,2,3);
// 字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

多维数组

多维数组指的是数组成员也是数组，把这样的数组叫多维数组

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

数组的操作

获取数组长度

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

根据下标取值

var aList = [1,2,3,4,5];
alert(aList[0])

从数组的最后添加和删除元素

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

根据下标添加和删除元素

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

循环语句

循环语句的介绍

for
while
do-while

for循环

var array = [1, 4, 5];

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

while循环

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

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

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

do-while 循环

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

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

当条件不成立时do也会执行一次

字符串拼接

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

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

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

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

说明

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

定时器

定时器的介绍

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

定时器的使用：

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>

清除定时器

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();">

小结

定时器的创建
- 只执行一次函数的定时器, 对应的代码是setTimeout函数
- 反复执行函数的定时器, 对应的代码是setInterval函数
清除定时器
- 清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
- 清除清除反复执行的定时器, 对应的代码是clearInterval函数

四、JQuery

JQuery的介绍

jQuery的定义

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

jQuery的作用

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

jQuery的优点

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

小结

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

JQuery的用法

jQuery的引入

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

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
获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快

jQuery入口函数有两种写法:

  // 完整写法
  $(document).ready(function(){
       ...
  });

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

JQuery选择器

jQuery选择器的介绍

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

jQuery选择器的种类

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

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签

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

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

小结

jQuery选择器就是选择标签的
标签选择器是根据标签名来选择标签
类选择器是根据类名来选择标签
id选择器是根据id来选择标签
层级选择器是根据层级关系来选择标签
属性选择器是根据属性名来选择标签

选择集过滤

选择集过滤的介绍

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

选择集过滤的操作

has(选择器名称)方法，表示选取包含指定选择器的标签
eq(索引)方法，表示选取指定索引的标签

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>

小结

选择集过滤可以使用has方法和eq方法来完成
jquery给标签设置样式使用css方法

选择集转移

选择集转移介绍

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

选择集转移操作

$(‘#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的元素

选择集转移的示例代码:

<script>
    $(function(){
        var $div = $('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

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

小结

prev() 表示获取上一个同级元素
prevAll() 表示获取上面所有同级元素
next() 表示获取下一个同级元素
nextAll() 表示获取下面所有同级元素
parent() 表示获取父元素
children() 表示获取所有的子元素
siblings() 表示获取其它同级元素
find(“选择器名称”) 表示获取指定选择器的元素

获取和设置元素内容

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>

说明:

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

小结

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

获取和设置元素属性

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

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

小结

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

JQuery事件

常用事件

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

示例代码:

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

        //  鼠标点击
        $li.click(function(){             
            // this指的是当前发生事件的对象，但是它是一个原生js对象
            // this.style.background = 'red';

            // $(this) 指的是当前发生事件的jquery对象
            $(this).css({'background':'gold'});
            // 获取jquery对象的索引值,通过index() 方法
            alert($(this).index());
        });

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

        //  获取焦点
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

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

        });

        //  鼠标进入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  鼠标离开
        $div.mouseout(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>

说明:

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

小结

jQuery常用事件:

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

事件代理

事件代理介绍

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

事件冒泡代码:

 <script>
    $(function(){

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

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

说明:

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

事件代理的使用

一般绑定事件的写法:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

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

事件代理的写法

$(function(){
    $list = $('#list');
    // 父元素ul 来代理 子元素li的点击事件
    $list.delegate('li', 'click', function() {
        // $(this)表示当前点击的子元素对象
        $(this).css({background:'red'});
    });
})

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

delegate方法参数说明:

delegate(childSelector,event,function)

childSelector: 子元素的选择器
event: 事件名称，比如: ‘click’
function: 当事件触发执行的函数

小结

事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
事件代理使用是使用delegate方法来完成

JavaScript 对象

JavaScript对象的介绍

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

JavaScript创建对象操作

创建自定义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>

说明:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

小结

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

Object
字面量

Json对象

json的介绍

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

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

json数据转换成JavaScript对象

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

示例代码:

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

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

小结

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

ajax

ajax的介绍

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

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

ajax的使用

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

示例代码:

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置

    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

ajax方法的参数说明:

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

ajax的简写方式:

$. aja 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(dat,status){
            console.log(dat);
            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 错误异常回调函数

小结

ajax 是发送http请求获取后台服务器数据的技术
ajax的简写方式可以使用 $. g e t 和$ .post方法来完成