1、jQuery介绍
(1)jQuery是什么?
是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成 一个jQuery对象 。封装成jQuery对象的目的有两个：
一是为了 兼容不同的浏览器 ，另外，也 简化了代码 。
(2)编程的基本步骤 first.html
step1, 利用选择器查找节点。选择器类似与css选择器。
step2, 调用jQuery对象的方法或者属性。
(3) jQuery对象与dom对象之间的相互转换 first.html。
a, dom对象 ---> jQuery对象
$(dom对象)
b, jQuery对象 ---> dom对象
方式一: $obj.get(0)
方式二: $obj.get()[0]
2、选择器
1) 基本选择器
#id
.class
element
selector1,selector2..selectorn
*
2) 层次选择器
select1 select2
select1>select2
select1+select2
select1~select2
3 )过滤选择器
(1)基本过滤选择器 selector / s3.html
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2 )内容过滤选择器 selector
: contains(text) 匹配包含给定文本的元素
: empty 匹配所有不包含子元素或者文本的空元素
: has(selector) 匹配含有选择器所匹配的元素的元素
: parent 匹配含有子元素或者文本的元素
(3) 可见性过滤选择器 selector
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
(4) 属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
(5) 子元素过滤选择器
:nth-child(index/even/odd)
(6) 表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
4) 表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
3、dom操作
1)查询 dom / d1.html
a, 查询或者修改节点的html内容
html()
b, 查询或者修改节点的文本
text()
c, 查询或者修改节点的属性
attr()
d, 查询或者修改节点的值
val()
2) 创建
$(html)
3) 插入节点
append(): 向每个匹配的元素 内部追加内容
prepend() : 向每个匹配的元素 内部前置内容
after() : 在每个匹配的 元素之后插入内容
before() : 在每个匹配的元素 之前插入内容
4)删除节点 dom / d3.html
remove()
remove(selector)
empty():清空节点
5) 将javascript代码与html分离 dom / d4.html
$(fn);
6)复制节点 dom /d5.html
clone()
clone(true) : 使复制的节点也具有行为 (将事件处理代码一块复制)
7) 属性操作
读取：attr('id');
设置： attr('id','d1') 或者一次
设置多个 attr({"id":"d1","class":"s1"});
删除：removeAttr('id')
8 )样式操作 dom / d6.html
获取和设置: attr("class","") 或者 attr("style","")
追加: addClass('s1')
移除: removeClass('s1')
或者 removeClass('s1 s2')
或者 removeClass() //会删除所有样式
切换样式： toggleClass ,有该样式，就删除，没有，就添加。
是否有某个样式 hasClass('s1')
读取 css('font-size')
设置 css('font-size','60px') 或者 css({'':'','':''}) //设置多个样式
9) 遍历节点 dom / d7.html
children() / children(selector) 只考虑子元素，不考虑其它后代元素。
next()/next(selector)下一个兄弟
prev()/next(selector):前一个兄弟
siblings()/siblings(selector)其它兄弟
find(selector):从当前节点开始查找后代。
parent():父节点
4、jQuery如何处理事件
1) 事件绑订 event / e1.html
bind(type,fn)
type:事件类型
fn:事件处理函数
2) 绑订方式的简写形式
click(function(){
});
3) 合成事件 event/e2.html e3.html
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...)： 模拟鼠标连续单击事件
4)事件冒泡 event/ e4.html
a,什么是事件冒泡?
子节点产生的事件会依次向上抛给相应的父节点。
b,如何取消事件冒泡?
event.cancelBubble = true;
c, 如何获得事件对象?
只需要给事件处理函数添加event作为参数，比如
<a href... οnclick="clickA(event);">
d, 事件对象的作用?
作用1： 找到事件源
event.target; firefox,chrome支持
event.srcElement; ie支持
event.target || event.srcElement
作用2: 获得鼠标点击的坐标
event.clientX;
event.clientY;
(1)获得事件对象 event / e5.html
只需要给事件处理函数传一个参数。
click(function(event){
});
(2)事件对象的作用
a,获得事件源
event.target;
b,获得鼠标点击的坐标
event.pageX
event.pageY
c,事件类型
event.type
(3 )停止冒泡 event / e6.html
event.stopPropagation()
(4) 停止默认行为
event.preventDefault()
5) 模拟操作 event / e7.html
trigger('click')
2、动画
1)、show(), hide() animate / a1.html
a,作用: 通过同时改变元素的宽度和高度来实现显示或者隐藏。
b,用法:
show(速度,[callback])
速度: 'slow','normal','fast',也可以用毫秒数 callback: 当整个动画执行完毕之后，会立即调用这个函数(回调函数)。
2)、slideUp() slideDown() animate / a1.html
a,作用：通过改变元素的高度来实现显示或者隐藏
b,用法：同show
3)、fadeIn() fadeOut() animate / a2.html
a,作用：通过改变不透明度来实现显示或者隐藏
b,用法：同show
4)、自定义动画 animate animate / a3.html
用法:
animate(params,speed,[callback])
params: 是一个javascript对象，描述了
动画完成之后元素的样式。
比如:
{'left':'500px','top':'200px'}
speed:速度，单位是毫秒
callback:回调函数，也就是说，当整个
动画执行完毕之后会执行。
3、 类数组的操作 array/a1.html
所谓类数组，指的是jQuery对象里面包含的所有的dom对象。可以利用jQuery对象提供的一些方法 和属性来对这些dom对象进行遍历。
1)属性
length: 获得dom对象的个数。
2)方法
a, each(fn(i)):
循环遍历每一个元素, i表示被迭代的对象的下标。this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。
b,eq(index)：
返回index位置处的jquery对象
c,index(obj)：
返回下标，其中obj可以是dom对象或者
jquery对象。
d,get()：返回dom对象组成的数组
e,get(index)：返回index位置处的dom对象。
4、jQuery对ajax的支持
1)load
a,作用： 将服务器返回的数据直接添加到符合要求的节点之上。
b,用法:
$obj.load(请求地址,[请求参数]);
请求地址: 服务器端某个组件的地址，比如
***.do
请求参数: 有两种形式
请求字符串： "username=zs&age=22"
对象: {'username':'zs','age':22}
注意:
如果没有请求参数，则load方法会发送get请求， 如果有参数，则发送post请求。
2)$.get
a, 作用： 向服务器发送get请求。
b,用法:
$.get(请求地址,[请求参数],[callback],[服务器返回的数据类型]);
callback: 是一个函数，格式callback(data,status),其中，可以通过data获得服务器返回的数据,status是一个状态的描述。
服务器返回的数据类型: 可以是
html : html内容
text: 文本
json: json字符串
xml: xml文档
script: javascript脚本
$.post
a, 作用：向服务器发送post请求。
b,用法：同$.get
3)$.ajax
用法:
$.ajax({});
可以添加的参数:
url(string): 请求地址
type(string): GET/POST
data(object/string): 请求参数
dataType(string) : 预期服务器返回的数据类型。
同$.get一样。
success(function): 请求成功后调用的回调函数，有两个参数：function(data,textStatus),其中，data是服务器返回的数据，textStatus 描述状态的字符串。
error(function): 请求失败时调用的函数。
async: true(缺省)/false: 当值为false,发送同步请求。
keyup事件有一个bug, 某些浏览器在切换到中文输入法以后，keyup事件会失效。为解决这个问题，可以使用input(非ie浏览器支持)和propertychange(ie支持)事件来解决。
