jQuery、Ajax

---

jQuery

jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。简化了JS对DOM的操作。

因此jQuery本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，是一个js库，并不是框架。

jQuery获取

通过这个 官网下载链接获取所需要的版本文件，下载到本地即可。

或者通过npm命令下载。

jQuery核心

jq库主要核心在于，在window对象中，多了jQuery对象

jQuery 可以和 $ 相互替代

例如jQuery中存在一个方法叫做each

window.jQuery.each()
= jQuery.each()
= window.$.each()
= $.each()

关于jQuery对象和DOM对象

使用jQuery获取的元素是jQuery对象，不是DOM对象，不能使用DOM对象方法。

例如:

<!--js-->
var p = document.getElementById('imooc');
p.innerHTML = 'Hello';
p.style.color = 'red';

<!--jq-->
var $p = $('#imooc');
$p.html('Hello').css('color','red');

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

所以如果需要将jQuery对象转换成原来的DOM，只需 利用数组下标 的方式读取到jQuery中的DOM对象即可。

例如：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

<script>
    var $div = $('div') //jQuery对象
    
    var div = $div[0] //转化成DOM对象
    var div = $div.get(0) //或者通过jq提供的get方法，转化成DOM对象
    
    div.style.color = 'red' //操作dom对象的属性
</script>

如果需要将DOM对象转换为jQuery对象，只需外部包装一下即可。

例如：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

<script>
    // dom对象
    var div = document.getElementsByTagName('div');
    //jQuery对象
    var $div = $(div);

    //注意：jQuery对象是个数组对象
    var $first = $div.first(); //找到第一个div元素
    $first.css('color', 'red');//操作jq对象
</script>

常用选择器

选择器	选取
$("*")	所有元素
$("#lastname")	id="lastname" 的元素
$(".intro")	所有 class="intro" 的元素
$("p")	所有 p标签 元素
$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
$("p:first")	第一个 p标签 元素
$("p:last")	最后一个 p标签 元素
$("tr:even")	所有偶数 tr标签 元素
$("tr:odd")	所有奇数 tr标签 元素
$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)")	列出 index 大于 3 的元素
$("ul li:lt(3)")	列出 index 小于 3 的元素
$("input:not(:empty)")	所有不为空的 input 元素
$(":header")	所有标题元素（h1~h6）
$(":animated")	所有动画元素
$(":contains('xxx')")	包含指定字符串的所有元素
$(":empty")	无子（元素）节点的所有元素
$("p:hidden")	所有隐藏的 p标签 元素
$("table:visible")	所有可见的表格
$("th,td,.intro")	所有带有匹配选择的元素
$("[href]")	所有带有 href 属性的元素
$("[href='#']")	所有 href 属性的值等于 "#" 的元素
$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素
$(":input")	所有 input标签 元素
$(":text")	所有 type="text" 的 input标签 元素
$(":password")	所有 type="password" 的 input标签 元素
$(":radio")	所有 type="radio" 的 input标签 元素
$(":checkbox")	所有 type="checkbox" 的 input标签 元素
$(":submit")	所有 type="submit" 的 input标签 元素
$(":reset")	所有 type="reset" 的 input标签 元素
$(":button")	所有 type="button" 的 input标签 元素
$(":image")	所有 type="image" 的 input标签 元素
$(":file")	所有 type="file" 的 input标签 元素
$(":enabled")	所有激活的 input 元素
$(":disabled")	所有禁用的 input 元素
$(":selected")	所有被选取的 input 元素
$(":checked")	所有被选中的 input 元素

常用事件

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

事件绑定

将一个操作执行多个方法：（最佳做法）

 	$("#id").bind({"click":function(){
 		//do
 	},"mouseout":function(){
 		//do
 	}});

事件解绑

针对动作进行解除绑定（如果函数前不写字符，则代表解除所有事件）

 	$("#id").click({"click":function(){
 		$("aId").unbind();
 	}});

轮询

可以多个方法进行轮询，轮询到最后一个方法则返回第一个方法

 	$("#id").toggle(function(){
 		//do
 	},function(){
 		//do
 	},function(){
 		//do
 	});

---

Ajax

浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

具体来说，AJAX 包括以下几个步骤。

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

概括起来，就是一句话，AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了，但是 AJAX 这个名字已经成了一个通用名词，字面含义已经消失了。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

一旦新建实例，就可以使用open()方法发出 HTTP 请求。

xhr.open('GET', 'http://www.xxx.com/get/xxx', true);

上面代码向指定的服务器网址，发出 GET 请求。

然后，指定回调函数，监听通信状态（readyState属性）的变化。

ajax.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}

一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错（详见《同源政策》和《CORS 通信》两章）。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK"；404: 未找到页面

举个栗子

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

xhr.open('GET', '/endpoint', true);
xhr.send(null);

剩余参考-> AJAX学习

jQuery下的Ajax

jQuery自然也封装了AJAX技术。即 jQuery.ajax()

而jQuery.get()、 jQuery.post()、 load()、 jQuery.getJSON()、 jQuery.getScript()等函数都是该函数的简化形式(都调用该函数，只是参数设置有所不同或有所省略)。

常用方式

$.ajax({
	 url: "jquery_ajax.php?page=1&id=3"
	, type: "POST"
	// jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
	, data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
	// 请求成功时执行
	, success: function( data, textStatus, jqXHR ){
		alert("返回的数据" + data);
	}
	// 请求失败时执行
	, error: function(jqXHR, textStatus, errorMsg){
		// jqXHR 是经过jQuery封装的XMLHttpRequest对象
		// textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
		// errorMsg 可能为： "Not Found"、"Internal Server Error"等
		alert("请求失败：" + errorMsg);
	}
});

更多参数参照：ajax()函数详解

---