1.了解jQuery
是什么？ ：
一个JS函数库：write less,do more
封装简化DOM操作
为什么要用它？：
强大的选择器：方便快速的查找DOM元素
隐式遍历：可以一次操作多个元素
读写合一：读数据/写数据用的是一个函数
链式调用：可以通过 . 不断的调用jQuery对象的方法
事件处理
DOM操作
样式操作
动画
浏览器兼容
如何使用：
引入jQuery库
本地引入和CDN远程引入
使用jQuery
使用jQuery函数：$或jQuery
使用jQuery对象：$xxx(执行$()得到的)
2.jQuery的两把利器
1.jQuery核心函数
理解：
即：$或jQuery
jQuery 定义了这个全局的函数供我们使用，它既可以作为一般函数调用，切传递的参数类型不同/格式不同，功能就完全不同
也可以作为对象调用其定义好的方法，此时$就是一个工具对象
作为函数调用$( )：
1.参数为函数：当DOM加载完成后，执行此回调函数
2.参数为选择器字符串：查找所有匹配的标签，并将其封装成jQuery对象
3.参数为DOM对象：将DOM对象封装成jQUERY对象
4.参数为html标签字符串（用的少）：创建标签对象，并封装成jQuery对象
作为对象使用$.xxx( )：
发送ajax请求的方法：
$.ajax()
$.get()
$.post()
……
其他工具方法：
$.each():隐式遍历数组
$.trim():去除字符串两端的空格
$.parseJSON()：将JSON格式的字符串转化为对应的JavaScript对象
……
2 jQuery核心对象
理解：
即：执行jQuery核心函数返回的对象
jQuery对象内部包含的是DOM元素对象的伪数组（可能只有一个元素），jQuery对象拥有很多的属性和方法，让程序员更方便快捷的操作DOM
属性/方法：
基本行为：
size()/length:包含的DOM元素个数
[index]/get(index):得到对应位置的元素
each():遍历包含的所有DOM元素
index():得到在所在兄弟元素中的下标
属性：操作内部标签的属性或值
CSS:操作标签的样式
文档:对标签进行增删改操作
筛选:根据指定的规则过滤内部的标签
事件:处理事件监听
效果:实现动画效果
3.使用jQuery核心函数
选择器
是什么，怎么用？
具有特定规则（css选择器）的字符串
用来查找DOM元素：$(selecter),根据选择器规则在整个文档中查找所有匹配的元素的数组，并将其封装成jQuery对象返回
只有调用$(),并将选择器作为参数传入才能起作用
分类
基本选择器
#id:id选择器element:元素选择器
.class:属性选择器
*:任意元素selecter1,selecter2,selecterN:组合选择器
selecter1selecter2selecterN:相交选择器
层次选择器–查找子元素，后代元素，兄弟元素的选择器
ancestor descendant 在给定的祖先元素下的后代元素中匹配元素
parent>child:在给定的父元素下的子元素中匹配元素
prev+:匹配下一个兄弟元素
prev~:匹配后面所有兄弟元素
过滤选择器–在原有选择器匹配的元素中进一步进行过滤的选择器
:first
:last
:eq(index)
:lt
:gt
:odd
:even
:not(selector)
:hidden
:visible
[attrName]
[attrName=value]
……
表单选择器
表单：
:input
:text
:checkbox
:radio
:checked: 选中的
……
表单对象属性
:enabled
:disabled
:checked
:selected
工具
$.each():遍历数组或对象中的数据
$.trim():去除字符串两边的空格
$.type(obj):得到数据的类型
$.isarray():判断是否是数组
$.isFunction:判断是否是函数
……
ajax
ajax()
get()
post()
……
4.使用jQuery对象
jQuery对象使用特点
链式调用：调用jQuery对象的任何方法后返回的还是当前jQuery对象，可以多次调用
读写合一：读：内部第一个 DOM元素， 写:内部所有的DOM元素
属性/文本
操作标签的属性, 标签体文本
attr(name) / attr(name, value): 读写非布尔值的标签属性
prop(name) / prop(name, value): 读写布尔值的标签属性
removeAttr(name)/removeProp(name): 删除属性
addClass(classValue): 添加class
removeClass(classValue): 移除指定class
val() / val(value): 读写标签的value
html() / html(htmlString): 读写标签体文本
CSS模块
设置CSS样式/读取CSS值
css(styleName):读取css值
css(styleName,value):设置一个样式
css({多个键值对})：设置多个样式
获取/设置元素的位置数据
offset():相对页面左上角的坐标
position():相对于父元素左上角的坐标
scrollTop()/scrollLeft():读写元素/页面的滚动条的坐标
得到页面滚动条的scrollTop：
$(document.body).scrollTop()+$(document.html).scrollTop();设置页面滚动条的scrollTop:
$(‘body,html’).scrollTop(value);
获取/设置元素的吃寸数据
不包括内边距和边框的尺寸
height()
width()
包括内边距，但不包括边框的尺寸
innerHeight()
innerWidth()
包括内边距和边框的尺寸
outHeight()
outWidth()
文档模块
添加节点
向当前匹配的所有元素内部的最后/最前面插入指定内容
append(content)
prepend(content)
将指定内容插入到当前所有匹配元素的最后/最前
after(content)
before(content)
替换节点
replaceWidth(content):用指定内容替换 所有匹配的元素
删除节点
empty():删除所有匹配元素的子元素(掏空)
remove():删除所有匹配的元素(自己及内部都删除)
筛选模块
过滤
在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
first()
last()
eq(index)
filter(selecter)
not(selecter)
has(selecter)
查找后代/父/兄弟元素
查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
children():子元素
find():后代元素
parent():父元素
prevAll():前面的所有兄弟元素
siblings():所有的兄弟元素
事件模块
绑定事件
on(‘eventName’,function(){}):通用的事件绑定方法
eventName(function(){})
hover(function(){},function(){}):同时绑定鼠标移入和移出事件
解绑事件
off(‘eventName’)
事件委托
理解：通过事件冒泡将子元素的事件委托给父元素处理，事件监听绑定在父元素上，但事件发生在子元素上，最终调用事件回调函数的是子元素：event.target
绑定事件委托监听
delefate(selecter(子元素)，’eventName’,function(event){})
解绑事件监听
undelegate(‘eventName’)
相关知识
事件坐标
相对可视窗口左上角：event.clientX/eventclientY
*相对页面左上角：event.pageX/event.pageY相对当前元素左上角：event.offsetX/event.offsetY
阻止事件冒泡：event.stopPropagation();
取消事件的默认行为：event.preventDefault();
动画效果
滑动动画
不断改变元素的高度来实现
slideDown():带动画的展开
slideUp():带动画的收缩
slideToggle():切换展开和收缩
淡出淡入动画
不断改变元素的透明度来实现
fadeIn():带动画的显示
fadeOut():带动画的隐藏
fadeToggle():带动画的切换显示和隐藏
显示/隐藏
show():显示
hide():隐藏
toggle():切换显示隐藏
自定义动画
animate({结束时的样式}，time，function(){}) :自定义动画效果
stop():停止动画
jQuery插件
扩展插件
扩展jQuery插件的工具方法
$.extend({ xxx.function(){} }) $.xxx()扩展jQuery对象的方法
$.fn.extend({ xxx:function(){} }) $().xxx()
jQuery插件
理解：基于jQuery编写的扩展库
jQuery UI: http://jqueryui.com/
