title: 前端理论 author: PanXiaoKang cover: https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=605581599,2229068712&fm=26&gp=0.jpg tags:
- JavaScript
- Jquery
- Ajax
- Json categories:
- 前端技术 date: 2020-04-21 20:38:00
# JavaScript、Ajax、JQuery和JSON的关系
# JavaScript、Ajax、JQuery和JSON简介
1.javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
2.JavaScript 为页面提供更多功能，是页面交互功能的基础语言。此外它的语言规范和引擎还被用于其他领域，比如 Node 等。
3.jQuery是javascript的一个库，简化js编程，兼容性更强，写的更少，做的更多
4.jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
5.jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便
6.Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
7.Ajax 技术提供了一种新的前后端数据交互方式，不需要刷新页面，而且不阻塞页面执行流程，异步的去请求去获取、交互数据。
8.Ajax的优点：
无需刷新页面即可实现数据的请求和响应，用户体验非常好。
使用异步方式与服务器通信，具有更加迅速的响应能力。
9.基于标准化的技术，不需要下载插件或者小程序。
10.JSON 用来描述前后端数据交互的内容格式，有了 JSON 这样的一套统一的描述规则，前后端解析数据的成本变低，使用非常简单。
JSON 属于 JavaScript 的一个子集。
11.详情链接
https://blog.csdn.net/jediael_lu/article/details/38312685
Ajax的优点：
1.无需刷新页面即可实现数据的请求和响应，用户体验非常好。
2.使用异步方式与服务器通信，具有更加迅速的响应能力。
3.基于标准化的技术，不需要下载插件或者小程序。
JSON 用来描述前后端数据交互的内容格式，有了 JSON 这样的一套统一的描述规则，前后端解析数据的成本变低，使用非常简单。
JSON 属于 JavaScript 的一个子集。
详细链接：https://blog.csdn.net/jediael_lu/article/details/38312685
# JavaScript部分
1.定义：JavaScript是一种基于对象和事件驱动的脚本语言，在客户端执行。
2.特点：
1. 是一种边解释边执行的脚本语言，不需要编译。
2. 主要用来向HTML页面添加交互行为。
3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4. 平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。
3.JavaScript组成：
1.ECMAScript:描述了该语言的语法和基本对象
2.DOM:操作Html标签的方法和接口
3.BOM:操作浏览器的方法和接口
4.JavaScript日常用途：
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。
6.控制cookies，包括创建和修改等。
7.基于Node.js技术进行服务器端编程。
5.什么是函数？
函数的含义：类似于Java中的方法，是完成特定任务的代码语句块；
使用更简单：不用定义属于某个类，直接使用；
函数分类：系统函数和自定义函数
6.BOM和DOM具体内容：https://blog.csdn.net/qq877507054/article/details/51395830
BOM编程：
1.BOM可实现功能：
1.弹出新的浏览器窗口
2.移动、关闭浏览器窗口以及调整窗口的大小
3.页面的前进、后退
具体地址：https://blog.csdn.net/nanjinzhu/article/details/82718317
DOM编程：
1. 特点：任何一个节点都有若干个子节点，但却只有一个父节点。
2. 地址：https://blog.csdn.net/yanyan965914478/article/details/90209377
JavaScript作用域：
在JavaScript中，作用域为可访问变量，对象，函数的集合。
变量在函数内部声明即为局部变量，在函数外部定义即为全局变量。
局部变量只能在函数内访问，全局变量在网页中所有脚本和函数均可访问。
（注意：如果变量在函数内没有使用var关键字，该变量自动为全局变量）
生命周期：局部变量在函数执行完毕后销毁，全局变量在页面关闭后销毁。
# 部分方法解释
1.Window对象的定义和用法：
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
如果访问者点击"确定"，此方法返回true，否则返回false。
2.JavaScript decodeURI() 函数定义和用法：
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
提示： 使用 encodeURI() 函数可以对 URI 进行编码。
3.onfocus 事件
定义和用法
onfocus 事件在对象获得焦点时发生。
Onfocus通常用于 input, select, 和a
提示： onfocus 事件的相反事件为 onblur 事件。
4.input中 autocomplete 属性
定义和用法
autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注意：autocomplete 属性适用于下面的 input 类型：
text、search、url、tel、email、password、datepickers、range 和 color。
5.onblur 事件
定义和用法
onblur 事件会在对象失去焦点时发生。
Onblur 经常用于Javascript验证代码，一般用于表单输入框。
提示：onblur 相反事件为 onfocus 事件 。
# JQuery框架
1.简介：jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。
2.JQuery具有以下特点：
2.1快速获取文档元素
2.2提供漂亮的页面动态效果
2.3创建AJAX无刷新网页
2.4提供对JavaScript语言的增强
2.5增强对事件处理
2.6更改网页内容
3.方法分析：
1..attr() 方法：设置或返回被选元素的属性和值。
2..change() 方法：当元素的值改变时发生 change 事件（仅适用于表单字段）。触发change 事件，或规定当发生 change 事件时运行的函数。
3..ready() 方法：规定当 ready 事件发生时执行的代码。
4..slideToggle()方法：下拉显示或上升隐藏
详细地址：https://blog.csdn.net/msyqmsyq/article/details/82018218
4.JQuery代码写法解释：
$("tr:eq(1) td:eq(2)"):这代表了要选中表格的第二行中的第三个单元格，如果在后面再加上.text() 代表要取出这个单元格中的文本。
5.prop()方法获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.
区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
6.部分方法解释：
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法
$(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法
$(this).val();获取某个元素节点的value值，相当于$(this).attr(“value”);
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr(“value”,value);
7.jQuery ready() 方法:
7.1定义和用法
当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。使用 ready() 来使函数在文档加载后是可用的。
提示：ready() 方法不应该与 <body onload=""> 一起使用。
JQuery中 $(function(){})和$(document).ready(function(){})是等价的，jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
8.jQuery change() 方法:
8.1定义和用法
当元素的值改变时发生 change 事件（仅适用于表单字段）。
change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
9. jQuery post() 方法
9.1定义和用法：$.post() 方法使用 HTTP POST 请求从服务器加载数据。
# AJAX异步通信
1.定义：是一种无需加载整个网页的情况下，实现部分网页的更新的技术。
2.用途：在不用提交整个页面的情况下，进行局部刷新，从而进行客户端与服务端的数据交互。
3.优点：
使用异步方式与服务器进行通信，具有更加迅速的响应能力。
最大的优点是页面无刷新即可实现数据的请求与响应，用户体验非常好。
基于标准化的并被广泛支持的技术，不需要下载小插件或程序。
4.缺点：
异步请求不会在浏览器中产生后退历史，而同步访问会对浏览器产生后退历史。
使用JavaScript作Ajax的引擎，JavaScript的兼容性和Debug需要特别注意。
5.什么是异步？
异步和同步是对应的关系。
同步是指在网页中，当一个请求发出后，服务器没有响应结束之前，不允许对当前页面进行其他操作（如点击链接），相当于多任务串行。
异步是指当一个请求发出后，在服务器没有响应结束之前，可以对当前页面进行其他操作，相当于多任务并行。
1.同步现象：当客户端向服务器发送请求，在服务器返回响应之前，客户端处于等待，卡死状态。
2.异步现象：客户端向服务器发送请求，无论服务器是否返回响应，客户端随时可以做其他事情，不会被卡死。