jQuery/Json/Ajax基础知识

jQuery
1. 什么是 jQuery??
jQuery 是一个优秀的 JavaScript 框架，一个轻量级的 JavaScript 类库。
jQuery 的核心理念是 Write less，Do more。
使用 jQuery 可以兼容各种浏览器，方便的处理 HTML、Events、动画效果
等，并且方便的为网站提供 AJAX 交互。
2.jQuery 的特点：
利用选择器来查找要操作的节点， 然后将这些节点封装成一个 jQuery 对象，
通过调用 jQuery 对象的方法或者属性来实现对底层被封装的节点的操作。
好处：a、兼容性更好；b、代码更简洁
3.编程步骤：
step1、使用选择器查找节点
step2、调用 jQuery 的属性和方法
4.jQuery 对象与 DOM 对象之间的转换
1. 什么是 jQuery 对象？？
jQuery 对象是 jQuery 对底层对象的一个封装，只有创建了这个对象，才能
使用类库中提供的方法。
2. DOM 对象 ----> jQuery 对象
DOM 对象向 jQuery 对象的转变很容易，外面追加$和圆括号即可。
function f( ){
var obj = document.getElementById(‘d1’);
//DOM -> jQuery 对象
var $obj = $(obj);
$obj.html(‘hello jQuery’);
} 3
. jQuery 对象 ----> DOM 对象
jQuery 对象向 DOM 对象转化，通过调用 get 方法加参数值 0 即可
$obj.get(0)。
function f( ){
var $obj = $(‘#d1’);
//jQuery 对象 -> DOM
var obj = $(obj).get (0);
obj.innerHTML = ‘hello jQuery’;
}
5. jQuery 选择器
1. 什么是 jQuery 选择器？？
jQuery 选择器是一种类似 CSS 选择器的特殊说明符号，能够帮助 jQuery
定位到要操作的元素上，使用了选择器可以帮助 HTML 实现内容与行为的分离。
只需要在元素上加上 Id 属性。
2. 选择器的种类
a、基本选择器
#id 根据指定的 ID 匹配一个元素
.class 根据指定的类匹配一个元素
element 根据的指定的元素名匹配所有的元素
select1,select2,......将每一个选择器匹配到的元素合并后一起返回
*匹配所有元素
b、层级选择器
1. select1 空格 select2 查找指定元素的所有的后代
2. select1 > select2 查找子节点
3. select1 + select2 下一个兄弟
4. select1 ~ select2 下面所有的兄弟
c、过滤选择器
1. 基本过滤选择器
:first 获取第一元素
:last 获取最后一个元素
:not 排除选择器要求的元素
:even 匹配所有下标为偶数的元素
:odd 匹配所有下标为奇数的元素
:eq 匹配所有给定索引值的元素
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素
2. 内容过滤选择器
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
3. 可见性过滤选择器
根据元素在页面中的可见属性进行过滤，主要是对 hidden 属性和 visible
属性的判断。
:hidden 匹配所有不可见元素，或者 type 为 hidden 的元素
:visible 匹配所有的可见元素
4. 属性过滤选择器
属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的
元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时
使用。
5. 子元素过滤选择器
子元素过滤选择器会根据子元素的位置的数值来进行筛选。
:nth-child （index、enven、odd）匹配其父元素下的第 N 个子或奇偶元
素。注意':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元
素。:nth-child 从 1 开始的，而:eq()是从 0 算起的！
6. 表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括 select
中的 option)
:selected 匹配所有选中的 option 元素
d、表单选择器
使用的规则和以上各选择器一致。$(“：input”)就会返回所有的 input 输
入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图片
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有的文件域
:hidden 匹配所有不可见元素，或者 type 为 hidden 的元素
6.jQuery 操作 DOM-查询
1. html（） html()等价于 innerHTML
读取或修改节点的 HTML 内容的属性和 value 值。与 DOM 对象的
innerHTML 的作用一致。
2. text（） text()等价于 innerText
读取或修改节点中的文本内容，会过滤掉标记内容，与 innerText 的作用基
本一致，但 innerText 在不同浏览器中写法不同，在 jQuery 中则使用 text（）
方法即可。
3. val（）
读取或修改节点的 value 属性值，也就是针对表单元素中有 value 属性的哪
些元素的操作。
4. attr（）
读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何
属性。
7. jQuery 操作 DOM-创建、插入、删除
1. 创建 DOM 节点的语法
使用$符号将 HTML 标记的字符串文本括起来，即创建了 DOM 节点，如$
（html） 。大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可
以实现节点的插入简写形式
如 $(‘body’).append(‘<div>…</div>”)
2. 插入 DOM 节点的方法
append 方法会将 DOM 节点作为最后一个孩子节点添加进来
prepend 方法将 DOM 节点作为第一个孩子节点添加进来
after 方法将 DOM 节点作为下一个兄弟节点添加进来
before 方法将 DOM 节点作为上一个兄弟节点添加进来
3. 删除 DOM 节点的方法
remove（）可以移除 DOM，remove（selector）可以按选择器定位后删
除，empty（）清空节点。
4.将 js 和 html 内容分离
$(fn);
注意：window.onload=function(){}等价于$(fucntion(){});但是内在的机制
不相同。fn 是一个函数，表示当整个页面记载完成之后就会执行 fn。
8. jQuery 操作 DOM-复制节点
1.复制 DOM 节点的方法
clone（）方法和 clone（true）都会实现复制，添加参数 true 的时候会将
节点的行为也复制到新的对象之上。
9. jQuery 操作 DOM-属性操作
1. 属性操作的方法
读取属性使用 attr（）方法，设置属性使用 attr（ ‘’ ， ‘’ ）方法。删除属性
使用 removeAttribute（ ‘’ ）方法。
10. jQuery 操作 DOM-样式操作
attr("class","")获取和设置
addClass("")追加样式
removeClass("")删除所样式
toggleClass("")切换样式
hasClass("")是否有某个样式
css("")读取 css 值
css("","")设置多个样式
11.jQuery 操作 DOM-遍历节点
childern()/childern(selector)只考虑直子节点
next()/next(selector)下一个兄弟的节点
perv()/perv(selector)上一个兄弟的节点
sibling()/sibling(selector)其他的兄弟
find(selector)查找满足选择器的所有的后代
parent()父节点，没有选择器
jQuery 事件处理
1. 使用 jQuery 实现事件绑定
1. 使用 jQuery 实现事件绑定
$obj. bind(事件类型，事件处理函数)；
注 意 ： 为 一 个 jQuery 对 象 绑 定 单 击 事 件 的 代 码 实 现 为
$obj.bind(‘click’,fn);也可以简写为 $obj.click(fn);
2. 获得事件对象 event
$(fucntion(e){
e 就是事件处理对象 （jQuery 对底层事件对象做了一个封装， 简化代码）
});
3. 事件对象的常用属性
a、找到事件源：
var obj = e.target
获取事件源使用 事件对象的 target 属性。
b、获取发生事件时的鼠标点击的坐标：
alert(e.pageX + ' ' + e.pageY);
获取发生事件时的鼠标坐标使用 pageX 和 pageY 属性。
c、禁止事件冒泡
e.stopPropagation();
2. 事件冒泡
子节点产生的事件会依次向上抛给相应的父节点
当事件发生时， 会首先发送给最内层的元素， 在这个元素获得响应机会之后，
事件会向上冒泡给更外层的元素，及从内层向外层依次传递。
3. 合成事件
.hover（over，out）模拟鼠标悬停事件
它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移
出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在
特定元素中的检测（例如，处在 div 中的图像） ，如果是，则会继续保持“悬停”
状态，而不触发移出事件（修正了使用 mouseout 事件的一个常见错误） 。
toggle（f1，f2，... ...）模拟连续单机事件
注意的是，通过 jQuery 这种方式触发事件时，不会发生事件传播；只会执
行直接添加到元素的处理程序。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元
素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。
随后的每次点击都重复对这几个函数的轮番调用。
4.模拟操作
trigger（type，[data]）在每一个匹配的元素上触发某类事件。也就是提交
第一个表单，但不用 submit()的效果。
$('#username').trigger('focus');
简写$obj.focus();
jQuery 动画
1. 显示隐藏的动画效果
.hide() 和 .show() 方法是对 display 的属性的操作。如果添加一个速度参
数，就会产生动画效果。
2. 上下滑动式动画效果
$('div').slideDown(800);
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可
选地触发一个回调函数。
$('div').slideUp('fast');
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可
选地触发一个回调函数。
$('div').slideToggle(speed, [callback])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一
个回调函数。
3. 淡入淡出式动画效果
如 果 针 对 一 个 元 素 ， 只 是 逐 渐 增 大 其 不 透 明 度 ， 那 么 使 用 fadeIn
（ ‘slow’ ）;fadeOut 是逐渐减少不透明度，可以使用 /.fadeOut()
4. 自定义动画效果
用法：animate（{js 对象}，执行时间，回调函数） ；
js 对象：{ }描述动画执行之后元素的样式
执行时间：毫秒数
callback 回调函数：动画执行结束后要执行的函数
jQuery 类数组
1. 什么是类数组
jQuery 对象封装的 DOM 对象。
2. 类数组的操作
length 属性：获得 jQuery 对象封装的 dom 对象的个数
each（fn）遍历类数组，fn 用来处理 DOM 对象。在 fn 中 this 表示正在被
遍历的那个DOM对象。 fn函数可以添加一个参数i用于表示正在被遍历的DOM
对象的下标（从 0 开始）
eq(index)：将下标等于 index 的 DOM 对象取出来
get(index):获得下标为 index 的 dom 对象
get（） ：返回一个 DOM 对象组成的数组
index（obj） ：返回 DOM 或 jQuery 对象在类数组中的下标
jQuery 对 AJAX 的支持
1. load（）方法
作用：将服务器返回的数据字节添加到符合要求的节点之上
用法：
$obj.load ( 请求地址，请求参数） ；
请求参数可以有两种格式：
“username=tom & age=22”
{‘username’ ： ‘tom’ ， ‘age’ ：22 }
有请求参数时，load 方法发送 POST 请求，否则发送 GET 请求
2.$.get 和$.post
a,作用:向服务器发送异步请求，可将服务器返回的数据进行处理。
b,用法:
$.get(url,data,callback,type)
url: 请求地址
data:请求参数，可以有两种格式
格式一;"username=tom"
格式二:{"username":"tom"}
callback: 回调函数，用来处理服务器返回的数据。格式如下：
function(data,status),其中，data 是服务器返回的数据，status 是一个字
符串，描述服务器处理请求的状态，比如"success"。
type:服务器返回的数据类型，可以是
html: html 内容
text:文本内容
json:json 字符串
xml:xml 文档
script: javascript 脚本
.3$.ajax
a, 作用：可以完全控制 ajax 对象发送请求(包括同步或者异步请求)的过程。
b,用法
$.ajax({});{}是一个对象，描述各个选项参数：
url:请求地址
type:请求方式
data:请求参数
dataType:服务器返回的数据类型
success: 回调函数(当服务器处理正确),格式如下:
function(data,status),含义同上。
error: 回调函数(当服务器处理失败),格式如下:
function(xhr,err1,err2)
async: 同步(false)还是异步(true)
通过 HTTP 请求加载远程数据。
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、
dataFilter、success、complete。
beforeSend 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为
参数。
error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的
字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的
值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
success 当请求之后调用。 传入返回后的数据， 以及包含成功代码的字符串。
complete 当 请 求 完 成 之 后 调 用 这 个 函 数 ， 无 论 成 功 或 失 败 。 传 入
XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。
AJAX
1. 什么是 AJAX??
Asynchronous JavaScript and Xml （异步的 JavaScript 和 Xml）
AJAX 是一种用来改善用户体验的技术
2.原理：
本质是使用 XMLHttpRequest 对象异步地向服务器发请求，并且发送请求
的同时浏览器并不销毁页面，可以继续进行页面的操作，在服务器收到请求之后
会返回部分数据，而不是一个完整的页面。
3. 如何获得 AJAX 对象??
需要区分不同的浏览器来或得这个对象。
function getXhr(){
var xhr = null;
if(window . XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft. XMLHTTP');
}
return xhr;
}
4. 异步对象的属性和方法
1
、onreadystatechange
onreadystatechange 需要绑定一个事件处理函数，该函数用来处理
readystatechange 事件。
当从 0 变成了 1，就会产生 readystatechange 事件。在当前不同的处理状
态下，可以进行状态的捕获，做些相应处理
2
、readyState
readyState 代表请求的状态，使用不同的数字代表一个状态。
获得 ajax 通讯的状态。
该属性值有 5 个：
0 代表尚未初始化
1 代表正在发送请求
2 代表请求完成
3 代表请求成功，正在接受数据
4 代表数据接收成功（表示 ajax 对象已经获得了服务器返回的数据）
3、responseText
4
、responseXML
5、status
AJAX 编程实现，步骤：
1. 获取 AJAX 对象：获取 XMLHttpRequest 对象。
2. 创建请求：调用 XMLHttpRequest 对象的 open 方法。
3. 设置回调函数：为 AJAX 对象的 onreadystatechange 事件设定响应函数。
4. 发送请求：调用 Ajax 对象的 send 方法
step1：获得对象
step2：利用 ajax 对象发送请求
get 请求
xhr.open('get',URI,true);
open（）方法可以理解为准备工作，填写发送请求前的信息的准备。
第一个参数位置，使用“get”即发送 GET 请求。
第二个参数位置，填写发送请求的地址，如果在发送 GET 请求时需要在地
址中携带参数值，可以通过“？”的方式来追加“name=value”对象
第三个参数位置，为 boolean 类型的值。当该 boolean 值为 true 时，服务
器请求是异步进行的，也就是脚本执行 send（）方法后不等待服务器的执行结
果，而是继续执行脚本代码；当该 boolean 值为 false 时，服务器请求是同步
进行的，也就是脚本执行 send（）方法后等待服务器的执行结果的返回，若在
等待过程中超时，则不再等待，继续执行后面的脚本代码！
注意：该方法还没有真正的发送请求。
step3：编写服务器端的处理程序，一般不需要返回完整的页面，只需要返
回部分的页面
step4：编写处理函数
get 请求：
xhr.open（'get‘,‘xx.do?uname=Bear',true）;
xhr.onreadystatechange = fn;
xhr.send(null);
post 请求：
xhr.open('post',‘ xx.do‘ , true);
xhr.setRequestHeader('content-type',‘applicaton/x-www-form-urlenco
ded');
xhr.onreadystatechange = fn;
xhr.send('uname = Bear');
注意：Http 要求在发送 post 请求的时候需要添加一个“content—type 消头” ，
因为 ajax 在默认的情况下不会添加消息头， 所以需要调用.setRequestHeader()
方法来设置消息头。
GET 请求时的乱码问题
1. 为什么会有乱码？？
乱码的根本原因在于浏览器的的编码和服务器的解码的方式不同而产生的。
比如 IE 浏览器提供的 AJAX 对象会使用 GBK 字符集对请求参数进行编码，
而其它浏览器会使用 UTF-8 来编码。也就是不同的浏览器在发送请求时数据编
码就已经不一致了。而对于服务器来讲，默认情况下会使用 ISO-8859-1 进行解
码，这种解码格式是 Tomcat 的配置文件中声明的。
解决乱码问题，就需要在客户端和服务器端统一编码和解码的方式即可。
step1：设置服务器端使用“utf-8”来解码，即修改 Tomcat 的 XML 文件
（conf/service.xml <connector URIEncoding = "utf-8">）即可，但是此方
法只适用于 get 请求；
step2：使用 encodeURI 函数统一编码。
POST 请求时的乱码问题
1. 乱码产生的原因？？
POST 请求时乱码问题产生的原因依然是编码与解码的不同造成的。因为所
有浏览器在进行 POST 方式提交时都是使用 UTF-8 方式进行编码的，到了服务
器端则默认使用 ISO-8859-1 方式来解码。所以只需要修改服务器端的解码格
式，保证是 UTF-8 的方式来接吗就可以避免乱码。
注 ： 火狐就不用这句代码，是因为这个浏览器会在发送的请求数据包中告
诉服务器，它是哪种方式进行的数据编码。
服务器端：
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
JSON
1. 什么是 JSON？？
JSON 即 Javascript 对象表示法，是一种现在主流的数据交换格式。
轻量级的数据交换技术标准。
a、数据交换：
将数据转换成和平台无关的数据发送给接收放来处理
b、轻量级
相对于 xml 做数据交换格式，json 文档更小，解析的速度更快。
特点：
a、简单，只有六种类型的符号 [ ] { } ； ，就可以表示任何种类的复杂对象
或数组。
b、易读，机器解析还是人的阅读都能够从这种格式中快速找到所需要的信
息。
2. JSON 语法：
2.1. 使用 JSON 表示一个对象
{"属性名":属性值,"属性名":属性值, ... ... }
例：var obj = {‘id’:1,’name’:’王小贱’,’age’:24};
var name = obj . name ;
var obj = {‘id’:1 , ’name’:’王小贱’ , ’dep’:{‘depId’:1,’
depName’:’财务部’}};
var depName = obj.dep.depName ;
注意：
a、属性名要使用引号引起来
b、属性值的类型可以多样化，包括 string、number、true、false、null、
object、array
c、如果属性值的类型为字符串，则必须使用引号括起来
2.2. 使用 JSON 表示一个数组
[ {Object1} , {Object2} , {Object3} … ]
注意：
a、Object 的类型可以是 string、number、false、true、null、object、
array。
3.使用 JSON 实现数据交换
1. JSON 数据交换原理
JSON 作为数据的交换格式，在客户端和服务器端都要有对应的转换过程。
如果是客户端请求数据，那么服务器端就将 Java 对象先转换成 JSON 字符串，
经响应把字符串传到客户端之后，客户端就会接收到这个转换结果，但
JavaScript 要求把这个字符串变成对象格式才更方便访问，所以在客户端的
JavaScript 代码中又需要将这个 JSON 字符串变成 JavaScript 能够识别的对象，
这样就完成了从服务器端的对象到客户端对象的整个转变过程。
同理，如果在客户端填写了数据后想提交给服务器，首先是将客户端数据构
造成一个 JSON 对象字符串，经网络传递到服务器端，服务器端再依据转换规则
将 JSON 字符串变成 Java 识别的对象。
2. Java 对象转换成 JSON---->服务器端
在服务器端对象的转换过程可以使用官方提供的 API，JSONObject 和
JSONArray 分别为对象和数组的转换类型。
3. JSON 字符串转换成 JS 对象------>浏览器端
当 JSON 经传输到达客户端时，需要完成 JSON 到 JavaScript 对象的转换，
如果使用 JS 原生的方法进行转换的话，可以使用 eval（）方法，但需要在 JSON
的前后连接上左右圆括号。
注意：为什么要 eval 这里要添加('('+json+')') 呢？
原因在于 eval 本身的问题。 由于 json 是以”{}”的方式来开始以及结束的，
在 JS 中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表
达式。加上圆括号的目的是迫使 eval 函数在处理 JavaScript 代码的时候强制将
括号内的表达式（expression）转化为对象，而不是作为语句（statement）来
执行但是需要注意的是方式 eval()方法是动态执行其中字符串（可能是 js 脚本）
的，这样很容易会造成系统的安全问题。所以可以采用一些规避了 eval()的第三
方客户端脚本库，如 prototype.js 里面提供的 evalJSON（）方法。通过在页面
中引入 prototype.js 文件后就可以使用这个扩展库。
4. AJAX 的缓存问题
1. 什么是缓存问题？？
IE 浏览器提供的 AJAX 对象，在发送 GET 请求时，会先查看是否访问过该
地址，如果改地址已经访问过，那么浏览器不再发送请求表现在页面终究是，第
一次点击某功能会得到数据， 但是如果多次反复点击想获取最新数据时页面不会
有任何变化，因浏览器发现地址相同而拒绝发出请求。但这种页面表现只出现在
IE 浏览器中，Chrom 浏览器和 Firefox 浏览器都能够实现数据的获取和页面的
刷新。
2. 如何解决缓存问题？？
第一种：就需要欺骗浏览器，让它认为每次请求的地址是不一样的。构建不
同的 URL 需要添加上一个随机数。
xhr.open(‘get’,’getNumber.do?’+Math.random() , true );
第二种解决缓存问题的方式就是不使用 GET 请求方式，改成 POST 提交的
话，浏览器不会进行地址的判断。
5. 同步问题
1. 什么是同步问题？？
同步请求指的是在 AJAX 对象发出请求后，浏览器要等待响应的回来之后再
允许页面继续操作，表现形式就是页面的假死状态。就好像是只有做完一件事以
后才能再做下一件事情。而异步是不需要这样的等待的，有种两件事情同时进行
的感觉。
2. 如何发送同步请求？？
发送同步请求在于 open 方法的第三个参数，如果填写 false 则代表同步类
型的请求，为 true 代表异步类型的请求。
xhr.open(‘get’,’check..’,false);
注意：true 表示异步请求；FALSE 表示同步请求。
3. 同步请求的使用场景
当下一步操作需要时上一步的结果的时候会用到同步请求。