十二、jQuery相关
jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作Dom,处理事件,执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数,而且支持链式调用(连续调用)。
可以下载jQuery的js文件通过script标签的src引入,也可以通过cdn加速器在线引入(<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>)
jQuery库只提供了一个叫jQuery的函数(jQuery中的$等价于jQuery),该函数中以及该函数的原型中定义了大量的方法,方便jQuery对象和jQuery函数调用。
jQuery函数具有四种参数:
$(“选择器”):jQuery函数通过选择器获取对应的Dom,然后将这些Dom封装到一个jQuery对象中并将jQuery对象返回
$(Dom对象):jQuery函数将该Dom封装成jQuery对象并返回
$(HTML文本字符串):jQuery函数会根据传入的文本字符串创建好HTML元素并封装成jQuery对象返回
$(匿名函数)($(function(){})):当文档结构加载完毕之后jQuery函数调用匿名函数(window.onload = function(){}则是当文档全部加载完毕后调用匿名函数)
jQuery对象是jQuery函数的一个实例,该对象可以调用jQuery原型中的方法,它是一个类数组对象,数组中存放的是Dom对象。Dom对象和jQuery对象是两种不一样的对象,jQuery对象是jQuery函数的实例,而Dom对象是Node的实例,它们所能调用的方法不同,但它们又具有一定的关联性,jQuery对象的类数组的元素为Dom对象,对jQuery对象的操作实际上就是对jQuery类数组中的Dom对象的批量操作。jQuery对象可以和Dom对象相互转化。
对于jQuery相关的属性和方法可以参考jQuery的官方文档:
https://api.jquery.com/(或https://www.jquery123.com/)
十三、Ajax相关
Ajax的全称是AsynchronousJavaScript + XML,可见它并不是一个新技术,而是多个技术的一个组合。使用Ajax可以更方便更快捷的进行页面的局部更新。
Ajax使用XMLHttpRequest对象与服务器进行交互,它能够发送和接收多种形式的数据格式。所谓异步即不需要更新整个页面就可以和服务器交换数据,更新局部页面。
Ajax的基本应用(不考虑IE6):
//获取XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();
//监听就绪状态的改变
httpRequest.onreadystatechange = function(){...}
//发送请求
httpRequest.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
(或httpRequest.setRequestHeader(‘Content-Type’,’application/json’);)
httpRequest.open(‘method’,’URL’,true/false);(设置为false时可以关闭自动转化)
httpRequest.send(data);
//处理响应信息(readyState就绪状态码说明略)
httpRequest.onreadystatechange = function(){
if(httpRequest.readyState === XMLHttpRequest.DONE){
...(无异常,接收成功)
}else{
...(未接收)
}
}
jQuery对Ajax的支持:
$.ajax(URL [.settings]){...}用于执行一个异步的ajax请求,settings是一个对象,用于配置信息,方法体内容也用于配置各种信息:
async //是否异步,默认为true
method //请求方式,”GET”/”POST”
contentType //参数类型,默认为querystring(查询字符串)//默认值application/x-www-form-urlencoded//如果参数为json,要改为application/json
processData //数据转换,boolean值,默认将data转换为查询字符串//如果要转换为json,则将其设置为false
data //对象参数//如果参数为json,则可通过JSON.stringify(对象)处理
dataType //数据类型,取值有responseType/json/xml/script...
beforeSend //回调函数,在请求发送前调用
complete //回调函数,请求接受后调用
success //回调函数,请求成功后调用
error //回调函数,请求错误后调用
速写方法:
$.get(url[,data][,success][,dataType]){...}
$.post(url[,data][,success][,dataType]){...}
详细介绍可以参考jQuery的官方文档:
https://api.jquery.com/(或https://www.jquery123.com/)