JQuery入门
一：JQuery能干什么
jQuery是一个JavaScript函数库。我们知道，JS是运行在浏览器的脚本语言，可以实现页面的动态效果控制。但是原生的JS比较简单，实现复杂功能时所需的代码量也是可观的。由此，就诞生了一系列的JS函数库。其中，jQuery是比较流行的JS函数库，其中封装了大量功能复杂且好用的函数，我们直接调用即可。
jQuery库的功能：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX异步编程
- 插件机制用来扩展功能（可以增加自定义的函数）
二：JQuery的引入
<head> <script src="jquery-1.10.2.min.js"></script> </head>
三：JQuery基本语法
基础语法： $(selector).action()
注：与EL/JSTL不同，JQuery是通过 $() 选择对象的，然后通过 .函数名() 调用方法。
四：JQuery选择器：选取页面元素
1：基本选择器
jQuery 选择器可以通过元素的 id、类、类型、属性、属性值等选择HTML 元素。
1）元素选择器：通过元素名选择：$("name")
2）#id 选择器：页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器：$("#id")
3）类选择器：通过指定的 class 查找元素：$(".类名")
2：层级选择器
可以通过层级关系由大到小地细致选取。
1）祖先后代选择器：前面大选择器，后面为前面选择器结果中更小的元素选择器：$("大元素 小元素")
2）父子选择器：$("父元素 > 子元素")
3）紧邻选择器：紧跟着第一个选择器后的第二个选择器元素：$("前 + 后")
4）范围选择器： prev 元素后的所有 target元素:$("prev ~target")
3：筛选器
1）第一个：$('范围元素:first')
2）非：$("范围元素:not(选择器)")
3）偶数项：$("范围元素:even")
4）奇数项：$("范围元素:odd")
5）第i-1项（从0开始）：$("范围元素:eq(i)")
6）大于i-1项：$("范围元素:gt(i)")
7）最后项：$('范围:last')
8）小于i-1项：$("范围:lt(i)")
9）文档的根：$(":root")
4：内容选择器
1）包含某内容的元素：$("范围元素:contains('内容')")
2）查找空元素：$("范围:empty")
3）包含某选择器内容的元素：$("范围:has(选择器)")
4）查找含有子元素的元素：$("范围:parent")
5：属性选择器
1）查找包含某属性的元素：$("范围[属性]")
2）查找属性为某值的元素：$("范围[属性='值']")
还有：不等于某属性值、属性值以某内容开头、属性值以某内容结尾、多个属性条件组成的选择器等等。
6：表单选择器
表单选择器格式为：$(":表单标签名")
主要有
- :input
- :text
- :password
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
7：表单属性选择器
常用的有两个：
1）匹配所有选中的被选中元素(复选框、单选框等）：$("input:checked")
2）匹配所有选中的option元素：$("select option:selected")
五：对象访问与操作
1）为选择出的每一个匹配对象执行相应操作callback函数：$(选择器).each(callback)
2）统计选择出的元素个数：$(选择器).size();
3）获得选择出的第i-1个元素：$(选择器).get(i);
六：插件机制扩展自定义函数
1）为所有对象增加自定义函数：jQuery.fn.extend(｛函数定义｝)，使用：$（选择器）.自定义函数名()；
2）为JQuery命名空间增加自定义函数：jQuery.extend(｛函数定义｝)，使用：jQuery.函数名();
七：工具函数
1）数组遍历与处理：$.each(array,callback)
2）解析XML字符串为XMLdoc对象： $.parseXML(xml字符串)
3）判断数字：$.isNumeric(value)
4）测试对象是否是空对象（不包含任何属性）：$.isEmptyObject(obj)
5）去掉字符串起始和结尾的空格：$.trim(str)
八：Ajax
1:Ajax请求函数
1）GET方式发送请求：$.get(url,｛参数键值对｝,function(data)｛回调函数处理返回结果，data接收结果｝,[返回内容格式：xml, html, script, json, text, _default])；
2）POST方式发送请求：$.post(url,｛参数键值对｝,function(data)｛回调函数处理返回结果，data接收结果｝,[返回内容格式：xml, html, script, json, text, _default])；
（JQuery中，GET、POST方式只不过是函数名不同而已，都不需要在url上拼接参数，统一了格式。当然，底层实现时GET方式还是拼接了的。）
3）请求JSON文件：$.getJSON(url,[可选：参数键值对],function(json)｛把加载的JSON文件转化为对象给json形参，进行内容提取｝)
4）请求JS文件：$.getScript(url,[callback])
5）加载HTML文件：$.（选择器).load(url,[data],[callback])
2:Ajax事件函数
1）发送请求前：ajaxSend(callback)
2）开始发送时：ajaxStart(callback)
3）发送成功时：ajaxSuccess(callback)
4）发送失败时：ajaxError(callback)
5）请求结束时：ajaxStop(callback)
6）请求完成：ajaxComplete(callback)
九：事件处理
ready(fn)：浏览器载入DOM完成后执行fn回调函数；
$(选择器).on(event,fn)：为元素的event事件绑定回调函数fn；
$(选择器).off(event):为元素移除event事件；
hover([over],out)：over:鼠标移到元素上要触发的函数，out:鼠标移出元素要触发的函数
blur([[data],fn]):当元素失去焦点时触发 blur 事件。
change([[data],fn]):当元素的值发生改变时，会发生 change 事件。
click([[data],fn]):点击事件
dblclick([[data],fn])：双击事件
error([[data],fn])：当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])：当元素获得焦点时，触发 focus 事件。
focusin([data],fn)：focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)：focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])：当键盘或按钮被按下时，发生 keydown 事件。
keypress([[data],fn])：当键盘或按钮被按下时，发生 keypress 事件。
keyup([[data],fn])：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])：当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])：当用户滚动指定的元素时，会发生 scroll 事件。
select([[data],fn])：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn])：当提交表单时，会发生 submit 事件
unload([[data],fn])：在当用户离开页面时，会发生 unload 事件。
十：页面内容、样式操作
1：页面内容操作
1）获得html代码：$(选择器).html();
2）更改元素html代码：$("选择器").html("更改代码");
3）获得文本：$(选择器).text();
4）更改文本：$(选择器).text(新文本);
5）获取文本框中的值：$(选取器).val();
6）更改文本框中的值：$(选择器).val(文本值);
2：更改元素位置
1）offset([coordinates]):元素进行相对偏移。
2）scrollTop([val])：元素相对滚动条顶部偏移。
3）scrollLeft([val])：元素相对滚动条左侧偏移。
3：更改元素尺寸
- height([val|fn])
- width([val|fn])
- innerHeight()
- innerWidth()
- outerHeight([soptions])
- outerWidth([options])
十一：页面效果控制
基本
- show([s,[e],[fn]])
- hide([s,[e],[fn]])
- toggle([s],[e],[fn])
滑动
- slideDown([s],[e],[fn])
- slideUp([s,[e],[fn]])
- slideToggle([s],[e],[fn])
淡入淡出
- fadeIn([s],[e],[fn])
- fadeOut([s],[e],[fn])
- fadeTo([[s],o,[e],[fn]])
- fadeToggle([s,[e],[fn]])
自定义
- animate(p,[s],[e],[fn])
- stop([c],[j])
- delay(d,[q])
- finish([queue])