JQuery与AJAX

一.JQ

1.什么是JQ

一个轻量级的JS库(类似于Java中的jar包), 里面封装了一些JS的常见操作, 其本质上还是JS代码;
兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作; 并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案;
JQuery的官方下载地址
JQuery文档地址

• 1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

• 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

• 3.x：不兼容IE678，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本.

• 注:开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小

2.JQ的作用

简化JS对DOM树的操作;

3.JQ的使用

1.拷贝jq库到项目
2.把jq引入页面
3.$(匿名函数)，该匿名函数中的代码会在文档加载完毕之后执行

3.1 JQ对象的获取及与JS对象的转换

3.2 JQuery操作DOM对象

3.2.1 JQuery的选择器

基本选择器

选择器名称	语法	解释
标签选择器（元素选择器）	$("html标签名")	获得所有匹配标签名称的于元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

层级选择器

选择器名称	语法	解释
==后代选择器==	$("A B ")	选择A元素内部的所有B元素
子选择器	$("A > B")	选择A元素内部的所有B子元素, 不包括孙子层级
兄弟选择器	$("A + B")	获得A元素同级的下一个B元素
兄弟选择器	$("A ~ B")	获得A元素之后的同级所有B元素

    
    
    
    








有一种奇迹叫坚持
自信源于努力


    id为one



    id为two class是 mini
    
class是 mini



    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini



    动画



    span

属性选择器

选择器名称	语法	解释
属性选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名='值']")	包含指定属性等于指定值的选择器

基本过滤选择器

选择器名称	语法	解释
首元素选择器	标签名:first	获得为此标签名的第一个元素
尾元素选择器	标签名:last	获得为此标签名的最后一个元素
非元素选择器	标签名:not(selecter)	不包括指定内容的元素
偶数选择器	标签名:even	偶数，从 0 开始计数
奇数选择器	标签名:odd	奇数，从 0 开始计数
等于索引选择器	标签名:eq(index)	指定索引元素
大于索引选择器	标签名:gt(index)	大于指定索引元素(不包括指定索引)
小于索引选择器	标签名:lt(index)	小于指定索引元素(不包括指定索引)

    
    
    



    

        

    
    

        

        
分类ID
        
分类名称
        
分类描述
        
操作
    
    

        

        
1
        
手机数码
        
手机数码类商品
        
修改|删除
    
    

        

        
2
        
电脑办公
        
电脑办公类商品
        
修改|删除
    
    

        

        
3
        
鞋靴箱包
        
鞋靴箱包类商品
        
修改|删除
    
    

        

        
4
        
家居饰品
        
家居饰品类商品
        
修改|删除
    

表单属性过滤选择器

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
复选框选中选择器	:checked	获得单选/复选框选中的元素
下拉框选中选择器	:selected	获得下拉框选中的元素

    
    
    
    
















美容
IT
金融
管理



男
女




    程序员
    中级程序员
    高级程序员
    系统分析师



    本科
    博士
    硕士
    大专




    id为two class是 mini div
    
class是 mini


    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini

3.2.2 JQuery操作标签的样式

API方法	解释
css(name) 使用很少	获取CSS样式
css(name,value)	设置CSS样式
addClass(类名)	给标签添加类名
removeClass(类名)	删除标签的类名

3.2.3 JQuery操作标签的属性

API方法	解释
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked，selected)

3.2.4 JQuery操作标签体的内容

API方法	解释
val([value])	获得/设置标签里面value属性相应的值
text([value])	获得/设置元素的文本内容
html([value])	获得/设置元素的标签体内容

val()         获得表单项标签里面value属性的值;  value属性的封装  
val("...")    给表单项标签value属性设置值;

html()       获得标签的内容,如果有标签,一并获得;  相当于JavaScript里面的innerHTML
html("...")  设置html代码,如果有标签,将进行解析;

text()       获得标签的内容,如果有标签,忽略标签;  相当于JavaScript中的innerText
text("...")  设置文本,如果含有标签,把标签当做字符串,不支持标签

    
    
    


北京

3.2.5 JQuery创建, 删除, 添加标签

API方法	解释
$("A")	创建A元素对象
append(element)	添加成尾子元素，两者之间是父子关系
prepend(element)	添加成首子元素，两者之间是父子关系
appendTo(element)	添加到父元素的内部末尾
prependTo(element)	添加到父元素的内部首位
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系
remove()	删除指定元素(自己移除自己)
empty()	清空指定元素的所有子元素

    
    
    



    
北京
    
上海
    
深圳
    
广州

3.3 JQuery的事件

单个事件语法格式:
    JQuery对象.事件方法名(function(){});
多个事件链式写法:
    JQuery对象.事件方法名(function(){}).事件方法名(function(){})
事件的绑定
    绑定: JQuery对象.on("事件方法名",function(){})
    链式绑定: JQuery对象.on("事件方法名",function(){}).on("事件方法名",function(){})
    解绑: JQuery对象.off("事件方法名")
    链式解绑: JQuery对象.off("事件方法名").off("事件方法名")

3.4 JQuery的遍历

二.JQ案例

1.页面定时弹出广告

2.表格的隔行换色与复选框全选

    
    
    
    



    

        

    

    

        

        
分类ID
        
分类名称
        
分类描述
        
操作
    
    

        

        
1
        
手机数码
        
手机数码类商品
        
修改|删除
    
    

        

        
2
        
电脑办公
        
电脑办公类商品
        
修改|删除
    
    

        

        
3
        
鞋靴箱包
        
鞋靴箱包类商品
        
修改|删除
    
    

        

        
4
        
家居饰品
        
家居饰品类商品
        
修改|删除
    

3.电子时钟

4.省市联动效果

    
    
    




    请选择省份
    广东省
    湖南省
    湖北省


    请选择城市

三.同步请求与异步请求

1.JavaScript中的同步请求与异步请求

同步请求: 浏览器发出一个请求, 必须等待服务器响应之后才能接着发起下一个请求; (在不使用AJAX的情况下, JavaWeb中请求服务器上的资源一般有超链接标签, form表单提交等方式; )

异步请求: 浏览器发出一个请求, 不必等待服务器响应就可以继续发起下一个请求; 每个请求响应之后, 更新相应的网页区域; (也就是可以控制网页中局部的视图数据显示, 是通过AJAX实现的, 也可以理解为网页的碎片化, 每个碎片之间互不影响)

2.AJAX

Asynchronous Javascript And XML(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术;

传统的网页 (不使用AJAX) 如果需要更新内容,必须重载整个页面; 而AJAX可以使网页面实现异步更新,也就是说可以在不重新加载整个网页的情况下,对网页的局部进行更新;

3.异步get与post请求

3.1 使用JS原始方式

异步的get请求访问

异步的post请求访问

3.2 使用JQuery方式

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式是key=value
callback	当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type	预期的返回数据的类型(默认为text)，取值可以是 xml, html, script, json, text, _defaul等

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数