jQuery
来源：https://www.liaoxuefeng.com/
http://www.runoob.com/
http://how2j.cn/
Ajax
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
【在页面某一部分单独和服务器联系】
1.创建XHR
创建XHR对象 XMLHttpRequest XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互 AJAX就是通过它做到无刷新效果的
2.设置响应函数
XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。 当服务器响应回来的时候，调用怎么处理呢？ 通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
3.设置并发出请求
通过open函数设置背后的这个小线程，将要访问的页面url ，在本例中就是
/study/checkName.jsp
xmlhttp.open("GET",url,true);
通过send函数进行实际的访问
xmlhttp.send(null);
null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
只有在用"POST"，并且需要发送参数的时候，才会使用到send。
类似这样：
xmlhttp.send("user="+username+"&password="+password)
4.在checkResult 函数中处理响应
function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本
Ajax具体流程
- 创建XHR对象 2. 设置响应函数 3. 设置要访问的页面 4. 发出请求 5. 当服务端的响应返回，响应函数被调用。 6. 在响应函数中，判断响应是否成功，如果成功获取服务端返回的文本，并显示在span中。
输入账号 :
checkResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%
String name = request.getParameter("name");
if("abc".equals(name))
out.print("已经存在");
else
out.print("可以使用");
%>
jQuery
定义
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有
元素
- $("p.test").hide() - 隐藏所有 class="test" 的
元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
文档加载
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){ // 开始写 jQuery 代码... });
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
提示：简洁写法（与以上写法效果相同）:
$(function(){ // 开始写 jQuery 代码... });
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。
具体操作
与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了
需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点而通过$("#id") 获取到的是一个 JQuery 对象。
DOM和jQuery对象可以相互转化
隐藏和显示div
这是一个div
常见方法
取值
通过JQuery对象的val()方法获取值 相当于document.getElementById("input1").value;
$(function(){//获取d1内标签的HTML，包括标签和文本
$("#b1").click(function(){
alert($("#d1").html());
});
});
Hello JQuery
切换css
直接设置CSS
选择器+筛选器
http://how2j.cn/k/jquery/jquery-selector/468.html#nowhere
配合操纵改变特定标签
$("# ")
获得各种属性 有各种效果函数，有简易的监听技术
简化使用Ajax
JQuery也有对AJAX的支持，使得其对AJAX的操作简化了很多
Ajax
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开 第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
输入账号 :
get
.ajax的简化版，专门用于发送GET请求
("#checkResult").html(result);
}
);
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选
post
.ajax的简化版，专门用于发送POST请求
("#checkResult").html(result);
}
);
$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选
load
load比起 .post 就更简单了
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表
输入账号 :
使用json
方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
实例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);