13.jQuery

1.JSON的结构

-名称/值 对的集合。不同的语言理解为对象，记录，结构，字典，哈希表等
-值的有序列表。大部分语言中理解为数组
使用JSON表示一个对象 
{属性名：属性值，属性名：属性值....}
注意：
属性值可以使string,number,boolean(true,false),null,object
属性名必须使用双引号引起来
属性值如果是字符串，必须使用双引号括起来
使用JSON表示一个数组
[value,value,value]
Value可以是简单数据类型，也可以是Object，数组类型

2.使用JSON实现数据交换

Java对象->JSON字符串->JavaScript对象

3.缓存问题

IE浏览器提供的AJAX对象，在发送GET请求时，会先查看是否访问过该地址，如果已经访问过，那么浏览器不再发送请求。
各浏览器对于同一地址的处理
-Chrome 继续发请求
-Firefox 继续发请求
IE浏览器 不再发请求
解决方式
方式1：在地址后面添加一个随机数
xhr.open('get','getNumber.do?'+Math.random(),true);
方式2：发送post请求
同步问题
发送同步请求时，浏览器要等待服务器的响应到达之后，才能继续在页面中操作
当Ajax对象向服务器发送同步请求时，浏览器会锁定当前页面
调用异步对象的open方法时第三个参数传false

4.jQuery

jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript库
兼容CSS3，及各种浏览器
使用户更方便地处理HTML、Events，实现动画效果
并且方便地为网站提供AJAX交互
使用户的HTML页面保持代码和HTML内容分离
浏览器解析html文档->生成DOM树
jQuery利用选择器定位节点，调用方法操作节点
jQuery的的编程步骤
（1）引用jQuery的js文件
（2）使用选择器定位要操作的节点
（3）调用jQuery的方法进行操作

5.jQuery对象

jQuery为了解决浏览器的兼容问题而提供得一种统一封装后的对象描述
jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值也是jQuery对象，所以方法可以连缀调用"jQuery对象.方法（）.方法（）.方法（）..."
如：$("div")和$("#d1")都是jQuery对象
DOM对象-->jQuery对象 实现方式$(DOM对象)
jQuery对象-->DOM对象 实现方式$(obj).get(0)或者$obj.get()[0]

6.jQuery选择器

类似于CSS选择器（定位元素，施加样式）能够实现定位元素，施加行为
使用jQuery选择器能够将内容与行为分离
选择器种类
-基本选择器
-层次选择器
-过滤选择器
-表单选择器

6.1基本选择器 

#id .class 标记选择器或元素选择器，依据HTML标记来区分;合并选择器$('#d1,s1,p');*所有页面元素

6.2层次选择器

select1 select2 根据select1找到节点后，再去寻找子节点中符合select2的节点

>只查找子节点，不查找间接子节点  +表示下一个兄弟节点 ~代表下面的所有兄弟

6.3过滤选择器 

以:或[]开始

基本 内容 可见性 子元素过滤选择器

6.4表单选择器

表单对象属性过滤选择器包括:enabled disabled checked selected
表单选择器 input text password radio checkbox submit image reset button file hidden

7.jQuery操作DOM

查询
html()读取或修改节点的HTML内容 text()读取或修改节点的文本内容 val()读取或修改节点的value属性值
attr()读取或者修改节点的属性
创建节点 $(html)  插入节点append() prepend() after() before() 删除节点remove()remove(按选择器定位后删除) empty()清空节点
复制节点clone clone(true)：将处理代码一块复制
样式操作 
attr("class","")获取和设置 addClass("")追加样式 removeClass("")移除样式 removeClass()移除所有样式 toggleClass("")切换样式 hasClass("")是否有某个样式 css("")读取css的值 css("","")设置多个样式
遍历节点
children()/children(selector)只考虑直接子节点 
next()/next(selector) 下一个兄弟节点
prev()/prev(selector) 上一个兄弟节点
siblings()/sublings(selector)其他兄弟
find(selector)查找满足选择器的所有后代
parent()父节点(没有选择器)

8.事件处理

8.1使用jQuery实现事件绑定

语法：-$obj.bind(事件类型，事件处理函数)
如：$obj.bind('click',fn)
简写形式$obj.click(fn);

注：$obj.click()则代表触发了click事件

8.2event

获取事件对象event只需要为事件处理函数传递任意一个参数

如：$obj.click(function(e){........})

e就是事件对象，但已经经过jQuery对底层事件对象的封装

封装后的事件对象可以方便的兼容各浏览器

8.3事件冒泡

子节点产生的事件会依次向上抛给父节点

e.stopPropagation()可以取消事件冒泡

8.3.1合成事件

jQuery的合成事件种类

-hover（mouseenter，mouseleave）模拟光标悬停事件

-toggle（）在多个事件响应中切换

8.4模拟操作

$obj.trigger(事件类型)  如：$obj.trigger("focus");

简写形式 $obj.focuss();

9.jQuery增强操作

9.1jQuery动画

显示、隐藏的动画效果 show()/hide()

作用：通过同时改变元素的宽度和高度来实现显示或者隐藏

用法：$obj.show（执行时间，回调函数）; 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数

上下滑动式的动画实现 slidDown()/slideUp() 作用：通过改变高度来实现显示或者隐藏的效果

淡入淡出式动画效果fadeIn()/fadeOut() 作用：通过改变不透明度opacity来实现显示或者隐藏

自定义动画效果 animate() 用法animate(js对象，执行时间，回调函数)；

9.2jQuery类数组

jQuery对象封装的多个DOM对象              类：指的是类似

具备自己特有的操作方法

length属性 each（fn） eq（index） get（） index（obj）

10.jQuery对AJAX的支持

load() 作用：将服务器返回的数据字节添加到符合要求的节点之上

用法： $obj.load(请求地址，请求参数)

有请求参数时，load方法发生post请求，否则发生get请求

get（） 发送get类型的请求 $.get(请求地址，请求参数，回调函数，服务器返回的数据类型)

ajax（） 用法:$.ajax({});

{}内可以设置的选项参数:

-url:请求地址

-type:请求方式

-data:请求参数

-datatype:服务器返回的数据类型

-success:服务器处理正常对应的回调函数

-error:服务器出错对应的回调函数

-async:true(缺省)当值为false时发送同步请求