jQuery和AJAX

一、jQuery

　1、jQuery库文件

　　1-1：jquery-1.版本号.js：开发板，完整无压缩版本，主要用于测试、学习和开发

　　1-2：jquert-1.版本号.min.js：发布本，经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

　　1-3：在页面中引入jQuery

　　　<script　src="js/jquery-1.8.3.js"　type="text/javascript"　/>

　2、jQuery语法结构：$(selector).action()

　　2-1：工厂函数$()：将DOM对象转化为jQuery对象

　　2-2：选择器selector：获取需要操作的DOM元素

　　2-3：方法action()：jQuery中提供的方法，包括绑定事件处理的方法

　3、jQuery方法

　　3-1：css("属性","属性值")：为元素设置CSS样式的值

　　3-2：addClass("类样式名")：为元素添加类样式

　　3-3：html("HTML代码")：为元素设置innerHTML的值

　4、jQuery对象转DOM对象

　　4-1：jQuery对象是一个类似数据的对象，可以通过[index]的方法得到相应的DOM对象

　　　　var 　$txtName=$(".txtName");　　//jQuery对象

　　　　var　$txtName=$txtName[0];　　//DOM对象

　　4-2：通过get(index)方法得到相应的DOM对象

　　　　var 　$txtName=$(".txtName");　　//jQuery对象

　　　　var　$txtName=$txtName.get(0);　　//DOM对象

　5、DOM对象转jQuery对象

　　　var　txtName=document.getElementById("txtName");　//DOM对象

　　　var　$txtName=$(txtName);　　　//jQuery对象

　6、选择器

　　6-1：类CSS选择器

　　　1>基本选择器

　　　　A、标签选择器：element→根据给定的标签名匹配元素

　　　　B、类选择器：.class→根据给定的class匹配元素

　　　　C、ID选择器：#id→根据给定的id匹配元素

　　　　D、并集选择器：selector1,selector2,...,selectorN→将每一个选择器匹配的元素合并后一起返回

　　　　E、交集选择器：element.class或element#id→匹配指定class或id的某元素或元素集合

　　　　F、全局选择器：*→匹配所有元素

　　　2>层次选择器：通过DOM元素之间的层次关系来获取元素

　　　　A、后代选择器：ancestor　descendant→选取ancestor元素里的所有descendant（后代）元素

　　　　B、子选择器：parent>child　→选取parent元素下的child（子）元素

　　　　C、相邻元素选择器：prev+next　→选取紧邻prev元素之后的next元素

　　　　D、同辈元素选择器：prev~sibings　→选取prev元素之后的所有siblings元素

　　　3>属性选择器：通过HTML元素的属性来选择元素

　　　　A、[attribute]：选择包含给定属性的元素

　　　　B、[attribute=value]：选取等于给定属性是某个特定值的元素

　　　　C、[attribute!=value]：选取不等于给定属性是某个特定值的元素

　　　　D、[attribute^=value]：选取给定属性是以某些特定值开始的元素

　　　　E、[attribute$=value]：选取给定属性是以某些特定值结尾的元素

　　　　F、[attribute*=value]：选取给定属性是以包含某些值的元素

　　　　G、[selector1][selector2][selectorN]：选取满足多个条件的复合属性的元素

　　6-2：过滤选择器：通过特定的过滤规则来筛选（:开头）

　　　1>基本过滤选择器

　　　　A、:first：选取第一个元素

　　　　B、:last：选取最后一个元素

　　　　C、:even：选取索引是偶数的所有元素（index从0开始）

　　　　D、:odd：选取索引是奇数的所有元素（index从0开始）

　　　　E、:eq(index)：选取索引等于index的元素（index从0开始）

　　　　F、:gt(index)：选取索引大于index的元素（index从0开始）

　　　　G、:lt(index)：选取索引等于小于index的元素（index从0开始）

　　　　H、:not(selector)：选取去除所有与给定选择器匹配的元素

　　　　I、:header：选取所有标题元素

　　　　J、:focus：选取当前获取焦点的元素

　　　2>可见性过滤选择器

　　　　A、:visible：选取所有可见的元素

　　　　B、:hidden：选取所有隐藏的元素

　　6-3：表单选择器

　　　1>:input：选取所有表单元素

　　　2>:text：选取所有单行的文本输入框元素

　　　3>:password：选取所有的密码框的元素

　　　4>:radio：选取所有的单选按钮元素

　　　5>:checkbox：选取所有的复选框元素

　　　6>:submit：选取所有的提交按钮元素

　　　7>:image：选取所有的图像域元素

　　　8>:button：选取所有的按钮元素

　　　9>:checked：匹配所有被选中的元素（包括复选框和单选框，不包括<select>元素）

　　　10>:selected：匹配所有选中的<option>元素

　　6-4：内容过滤器

　　　1>:contains(text)：选取所有包含text文本的元素

　　　2>:empty：选取所有不含子元素或文本的空元素

　　　3>:has(selector)：选取包含选择器所匹配的元素的元素

　　　4>:parent：匹配含有子元素或者文本的元素

　7、jQuery操作DOM对象

　　7-1：样式操作：

　　　1>设置样式值：css(name,value)

　　　　　　　　　css({　name:value,name:value,name:value...　})　（JSON）

　　　2>追加和移除样式

　　　　addClass("class1 class2...")、remove("class1 class2...")

　　7-2：内容及value属性值操作

　　　1>html()：可以对HTML代码进行操作，类似于innerHTML

　　　2>text()：可以获取或设置元素的文本内容

　　　3>val()：可以获取或设置元素的value属性值

　　　　$(input).vall()：获取value值　　　$(input).val("值")：设置value值

　　7-3：节点操作

　　　1>创建节点元素：工厂函数$()用于获取或创建节点

　　　　A、$(selector)：通过选择器获取节点

　　　　B、$(element)：把DOM节点转化为jQuery节点

　　　　C、$(html)：使用HTML字符串创建jQuery节点

　　　2>元素内部插入子节点

　　　　A、append(cotent)：将content追加到

　　　　B、appendTo(content)：将content追加

　　　　C、prepend(content)：将content插入到

　　　　D、prependTo(content)：将content插入

　　　3>元素外部插入同辈节点

　　　　A、after(content)：将content插入到...之后

　　　　B、insertAfter(content)：将content插入到...之前

　　　　C、before(content)：将content插入至...之前

　　　　D、insertBefore(content)：将content插入至...之后

　　　4>替换节点

　　　　A、replaceWith()

　　　　B、replaceAll()

　　　5>复制节点：clone()

　　　　语法：$(A).clone(true).appendTo(B);　参数true表示复制其事件

　　　6>删除节点

　　　　A、remove()：删除整个节点

　　　　B、detach()：删除整个节点，保留元素的绑定事件、附加的数据

　　　　C、empty()：清空节点内容

　　7-4：属性操作

　　　1>attr()：获取或设置匹配元素的属性值

　　　　A、$(selector).attr("属性名")：获取元素的某属性的值

　　　　B、$(selector).attr("属性名","值")：设置一个属性值

　　　　C、$(selector).attr({　"属性名1":"值1","属性名2":"值2"...})：设置多个属性值

　　　2>removeAttr()：匹配的元素中删除一个属性

　　　　语法：$(select).removeAttr("属性名称")

　　7-5：节点遍历

　　　1>遍历子元素

　　　　　children()：方法可以用来获取元素的所有子元素（不包括文本节点）

　　　2>遍历同辈元素

　　　　A、next([expr])：用于获取紧邻匹配元素之后的元素

　　　　B、prev([expr])：用于获取紧邻匹配元素之前的元素

　　　　C、siblings([expr])：用于获取位于匹配元素前面和后面的所有同辈元素

　　　3>遍历前辈元素

　　　　A、parent()：获取元素的父级元素

　　　　B、parents()：获取元素的祖先元素

　　　4>其它方法

　　　　A、each()：以每一个匹配的元素作为上下文来执行一个函数（遍历方法）

　　　　B、find()：搜索所有与指定表达式匹配的元素（查找）

　　7-6：CSS-DOM操作

　　　1>height()：返回数值，可直接运算

　　　　$().height()　元素自身的高

　　　　$().innerHeight()　元素自身高+上下padding（不包括边框）

　　　　$().outerHeight(true)　元素自身高+上下padding+上下边框+上下margin

　　　2>width()：

　　　3>$().offset().top：返回JSON:{"top":11，"left":123　}

　8、jQuery事件

　　8-1：基础事件

　　　1>window事件

　　　2>鼠标事件：用户在文档上移动或单击鼠标时而产生的事件

　　　　click(fn)：单击事件

　　　　mouseover(fn)：鼠标移过时

　　　　mouseout(fn)：鼠标移出时

　　　3>键盘事件：用户每次按下或者释放键盘上的键时都会产出事件

　　　　keydown(fn)：按下键盘时

　　　　keypress(fn)：产生可打印的字符时

　　　　keyup(fn)：释放键盘时

　　　4>表单事件

　　　　focus(fn)：获得焦点

　　　　blur(fn)：失去焦点

　　　　submint(fn)：表单提交时

　　8-2：复合事件是多个事件的组合

　　　1>鼠标光标悬停

　　　　hover(fn1,fn2)方法：相当于mouseover和mouseout事件的组合

　　　2>鼠标连续点击

　　　　toggle()方法：用于模拟鼠标连续click事件（切换元素的可见状态）

　　8-3：事件绑定

　　　1>bind()方法→事件绑定（可以绑定多个事件）

　　　　$(selector).bind(type[,data],fn)　type：事件类型　data：额外可以传参，可有可无　fn：function

　　　2>unbind()方法→解除事件绑定

　　　　$(selector).unbind()

　　　3>on()方法→事件绑定（用于动态HTML元素的事件绑定时，需要指定第二个参数）（声明一次永久有效）

　　　　$(selector).on(events[,selector][,data],fn)

　　　4>off()方法→解除事件绑定

　9、jQuery的动画效果

　　9-1：控制元素显示与隐藏 

　　　　show([duration][,complete])、hide([duration][,complete])

　　9-2：控制元素淡入淡出

　　　　fadeIn()、fadeOut()

　　9-3：改变元素高度

　　　　slideDown()：可以使元素逐步延伸显示

　　　　slideUp()：使元素逐步缩短直至隐藏

　　9-4：自定义动画

　　　animate()：用于创建自定义动画的函数

　　　 　语法：$(selector).animate(params[,speed][,easing][,fn]);

　　　　　params：规定产生动画效果的CSS样式和值

　　　　　speed：三种预定速度之一的字符串（“slow”，“normal”，“fast”）或标识动画时长的毫秒数值

　　　　　easing：要使用的擦除效果的名称（需要插件支持）。默认jQuery提供“linear”和“swing”

　　　　　fn：在动画完成时执行的函数，每个元素执行一次

二、AJAX

　1、AJAX实现步骤

　　1-1：创建XMLHttpRequest对象

　　1-2：设置回调函数

　　1-3：初始化XMLHttpRequest组件

　　1-2：发送请求

　2、XMLHttpRequest对象：实现以异步方式在客户端与服务端之间传递数据

　　2-1：属性

　　　1>onreadystatechange：处理服务器响应的函数

　　　2>readyState：服务器响应的状态信息：0（请求初始化）、1（服务器连接已建立）、2（请求已发送）、3（请求处理中）、4（请求已完成）

　　　3>status：200（相应正确返回）、404：未找到页面

　　　4>responseText：获取字符串形式的响应数据

　　　5>responseXML：获取XML形式的相应数据

　　2-2：方法

　　　1>open(method,url,async)：创建HTTP请求，method（请求的类型：GET或POST）、url（服务器请求地址）、async（是否异步请求：true(异步)或false(同步)）

　　　2>send(string)：将请求发送到服务器　★string仅用于POST，GET方法为空或null

　　　3>setRequestHeader()：指定请求的某个HTTP头

　　　4>getRequestHeader()：从响应中获取指定的HTTP头

　3、使用AJAX发送请求及处理响应

　　3-1：发送请求的方式：GET方式和POST方式

　　　1>初始化组件：

　　　　A、GET：xmlHttpRequest.open("GET",url,true);

　　　　B、POST：xmlHttpRequest.open("POST",url,true);、xmlHttpReques.setRequestHeadert.("Content-Type","application/x-www-form-urlencoded");

　 　2>发送请求：

　　　　A、GET：xmlHttpRequest.send(null);

　　　　B、POST：xmlHttpRequest.send(数据信息);

　　3-2：处理响应的方法：文本响应和XML响应

　4、$.ajax()方法

　　$.ajax({　url:"发送的请求地址",　type:"请求方式",　data:"服务器返回的数据类型"（xml、html、script、json、text）,

　　　　　　beforeSend:function(data){　//发送请求前执行的代码　},　success:function(data){　//发送成功后执行的代码　}　error.function(){　//请求失败的代码}　});

　5、$.get()方法：通过HTTP　GET请求载入信息

　　$.get("发送的请求地址",　要发送的数据key/value,　回调函数,　"返回内容格式（xml、html、script、json、text）");

　6、$.post()方法：通过HTTP　POST请求载入信息

　　$.post("发送的请求地址",　要发送的数据key/value,　回调函数,　"返回内容格式（xml、html、script、json、text）");

　7、$.getJSON()方法：通过HTTP　GET请求载入信息

　　$.getJSON("发送的请求地址",　要发送的数据key/value,　回调函数);

　8、$.getScript()方法：通过HTTP　GET请求载入并执行一个JavaScript文件

　　$.getScript("发送的请求地址",　　回调函数);

　9、serivalize()：用于序列化表单内容为字符串