您的位置:首页 > 财经 > 产业 > Web前端开发基础笔记(6)

Web前端开发基础笔记(6)

2024/11/16 14:36:01 来源:https://blog.csdn.net/qq_55266011/article/details/139427365  浏览:    关键词:Web前端开发基础笔记(6)

Web前端开发基础笔记(6)

一、Html基础

html的介绍

html的定义

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

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

  1. 因为网页中还可以图片、视频、音频等内容(超越文本限制)
  2. 它还可以在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)
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. 标签不区分大小写,但是推荐使用小写
  2. 根据标签的书写形式,标签分为上标签(闭合标签)和单标签(空标签)
    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服务器

表单相关标签的使用
  1. <form>标签:表示表单标签,定义整体的表单区域

  2. <label>标签:表示表单元素的文字标注标签,定义文字标注

  3. <input>标签:表示表单元素的用户输入标签,定义不同类型的用户输入数据的方式

    1. type属性:
      • type=“text” 定义单行文本输入框
      • type=“password” 定义密码输入框
      • type=“radio” 定义单选框
      • type=“checkbox” 定义复选框
      • type=“file” 定义上传文件
      • type=“submit” 定义提交按钮
      • type=“reset” 定义重置按钮
      • type=“button” 定义一个普通按钮
  4. <textarea>标签:表示表单元素的多行文本输入框标签 定义多行文本输入框

  5. <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的作用
  1. 美化界面,比如标签文字大小、颜色、字体加粗等样式
  2. 控制页面布局,比如设置浮动、定位等样式
css的基本语法

选择器{

样式规则

}

样式规则:

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

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

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

说明

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

css的引入方式

css的三种引入方式
  1. 行内式
  2. 内嵌式(内部样式)
  3. 外链式
行内式

直接在标签的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引入方式选择
  1. 行内式几乎不用
  2. 内嵌在学习css样式的阶段使用
  3. 外链式在公司开发的阶段使用,可以对html和css进行分别开发
小结
  • css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
  • 外链式是在公司开发的时候会使用,最能体现 div+css 的标签内容与显示样式分离的思想, 也最易改版维护,代码看起来也是最美观的一种。

css选择器

css选择器的定义

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

css选择器的种类
  1. 标签选择器
  2. 类选择器
  3. 层级选择器(后代选择器)
  4. id选择器
  5. 组选择器
  6. 伪类选择器
标签选择器

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

<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的设置项:

  1. visible 默认值, 显示子标签溢出部分。
  2. hidden 隐藏子标签溢出部分。
  3. 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种基本数据类型:

  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
}
// 获取变量的类型
var type = typeof(oObj);
alert(type);
// 获取对象的name属性
alert(oObj.name);
变量命名规范
  1. 区分大小写
  2. 第一个字符必须是字母、下划线或者美元符
  3. 其他字符可以是字母、下划线、美元符或数字
匈牙利命名分格

对象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 + iNum2return iResultalert("测试代码");
}
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)

条件语句

条件语句的介绍

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

条件语句语法
  1. if 语句 - 只有当指定条件为true时,使用该语句来执行代码
  2. if…else 语句 - 当条件为true时执行代码,当条件为false时执行其他代码
  3. 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中的写法

  1. html的属性和js里面属性大多数写法一样,但是“class”属性写成“className”
  2. “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>
小结

标签属性的获取和设置:

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

数组及操作方式

数组的介绍

数据就是一组数据的集合,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)

参数解析:

  1. start:必需,开始删除的索引
  2. num:可选,删除数组的个数
  3. elementN:可选,在start索引位置要插入的新元素

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

var colors = ["red", "green", "blue"];
colors.splice(0,1);  //删除第一项
alert(colors);  //green,bluecolors.splice(1, 0, "yellow", "orange");  //从第一个索引位置插入两项数据
alert(colors);  //green,yellow,organge,bluecolors.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.1result = fNum2 + sStr;
alert(result); // 弹出11.1abc

说明

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

定时器

定时器的介绍

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

定时器的使用:

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

  1. setTimeout(func[, delay, param1, param2, …]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
  2. 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选择器的种类
  1. 标签选择器
  2. 类选择器
  3. id选择器
  4. 层级选择器
  5. 属性选择器
$('#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有两种格式:

  1. 对象格式
  2. 数组格式

对象格式:

对象格式的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方法的参数说明:

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

ajax的简写方式:

. a j a x 按照请求方式可以简写成 .ajax按照请求方式可以简写成 .ajax按照请求方式可以简写成.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 和 .get和 .get.post方法的参数说明:

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

  1. url 请求地址
  2. data 设置发送给服务器的数据,没有参数不需要设置
  3. success 设置请求成功后的回调函数
    • data 请求的结果数据
    • status 请求的状态信息, 比如: “success”
    • xhr 底层发送http请求XMLHttpRequest对象
  4. dataType 设置返回的数据格式
    • “xml”
    • “html”
    • “text”
    • “json”
  5. error 表示错误异常处理
    • func 错误异常回调函数
小结
  • ajax 是发送http请求获取后台服务器数据的技术
  • ajax的简写方式可以使用 . g e t 和 .get和 .get.post方法来完成

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com