我的jQuery学习总结
一、选择器
1. 基本选择器
| #id | 通过元素的id属性来匹配元素 |
| element | 通过的元素的名称来匹配元素 |
| selector1,selector2 | 群组选择器，多个条件之间是通过逗号隔开的 |
| .class | 通过元素的class属性来匹配元素 |
2. 层级选择器
| ancetor descendant | 匹配祖先元素下的所有后代元素 |
| parent > child | 匹配父元素下的所有子元素 |
| prev + next | 匹配上一个元素紧邻的下一个同级元素 |
| prev ~ siblings | 匹配上一个元素下面的所有同级元素 |
3. 简单选择器
| :first | 匹配第一个元素 |
| :last | 匹配最后一个元素 |
| :even | 匹配所有的偶数 |
| :odd | 匹配所有的奇数 |
| :eq(index) | 匹配索引等于index的元素，默认索引从0开始 |
| :gt(index) | 匹配大于index的元素 |
| :lt(index) | 匹配小于index的元素 |
| :not(selector) | 匹配除selector选择器以外的其他元素 |
4. 内容选择器
| :contains(text) | 匹配内容包含text的元素 |
| :empty | 匹配内容为空的元素 |
| :has(selector) | 匹配具有指定选择器的元素（和not(selector)正好相反） |
| :parent | 匹配具有子元素的元素（匹配内容不为空的元素） |
5. 可见性选择器
| :hidden | 匹配所有隐藏元素，display:none或input type='hidden' |
| :visible | 匹配所有可见元素 |
6. 属性选择器
| [attribute] | 匹配具有指定属性的元素 |
| [attribute=value] | 匹配属性值等于value的元素 |
| [attribute!=value] | 匹配属性值不等于value的元素 |
| [attribute^=value] | 匹配属性值以value开始的元素 |
| [attribute$=value] | 匹配属性值以value结尾的元素 |
| [attribute*=value] | 匹配属性值包含value的元素 |
| [selector1][selector2][selectorN] | 匹配同时具有多个属性的元素 |
7. 子元素选择器
| :nth-child(index/even/odd) | 匹配索引等于index/eve/odd的子元素，默认从1算起 |
| :first-child | 匹配第一个子元素 |
| :last-child | 匹配最后一个子元素 |
| :only-child | 如果当前元素是唯一的子元素，则匹配 |
8. 表单元素选择器
| :input | 匹配所有表单元素，包括textarea与select下拉选框 |
| :text | 匹配所有的文本框 |
| :password | 匹配所有的密码框 |
| :radio | 匹配所有的单选按钮 |
| :checkbox | 匹配所有的复选框 |
| :submit | 匹配所有的提交按钮 |
| :reset | 匹配所有的重置按钮 |
| :image | 匹配所有的图像域（input type='image'） |
| :button | 匹配所有的按钮（input type='button'） |
| :file | 匹配所有的文件域 |
| :hidden | 匹配所有隐藏表单 |
9. 表单对象属性选择器
| :enabled | 匹配所有可用的表单元素 |
| :disabled | 匹配所有不可用的表单元素 |
| :checked | 匹配所有选中的值 |
| :selected | 匹配所有下拉选中的值 |
问题1：在jQuery中，$(':input')与$('input')区别？
答：:input是匹配所有表单元素，包括了textarea与select下拉
input只能匹配以input开头的10种表单元素
问题2：在input表单元素中，readonly与disabled区别？
答：readonly可以通过http进行传值，但是disabled是没有办法传递的。
二、常用属性
1. 基本属性
| attr(name) | 获取指定元素的name属性 |
| attr(key,value) | 设置元素的属性 |
| attr(properties) | 一次为元素设置多个属性，要求参数是一个json格式的数据 |
| attr(key,fn) | 通过一个函数的返回值设置元素的属性 |
| removeAttr(name) | 移除元素的某个属性 |
2. class属性
| addClass(class) | 为某个元素添加class样式 |
| removeClass(class) | 移除元素的某个class样式 |
| toggleClass(class) | 切换样式，如果存在则移除样式，反之，则添加样式 |
| hasClass(class) | 判断元素是否具有某个class样式 |
3. css属性
| css(name) | 获取元素的css属性 |
| css(name,value) | 设置元素的css属性 |
| css(properties) | 依次为元素设置多个css属性，要求参数是一个json格式的数据 |
4. 位置操作
| offset() | 获取元素的位置，返回一个json格式的数据，包含了left与top属性 |
| offset(coordinates) | 设置元素的位置，要求参数是一个json格式的数据，必须包含left与top两个属性 |
5. 尺寸操作
| width() | 获取元素的宽度 |
| width(value) | 设置元素的宽度 |
| height() | 获取元素的高度 |
| height(value) | 设置元素的高度 |
6. 文本/值操作
相当于源代码中的innerHTML属性
| html() | 获取双标签元素的内容 |
| html(val) | 设置双标签元素的内容 |
相当于源代码中的value属性
| val() | 获取表单元素的内容 |
| val(val) | 设置表单元素的内容 |
相当于源代码中的innerText属性
| text() | 获取双标签元素的内容 |
| text(val) | 设置双标签元素的内容 |
说明：
实际项目开发中：通常使用html来获取双标签的内容，而通过val方法来获取表单元素的内容。
html标签和text标签对文本数据的获取效果是一致的，但是如果标签中又包含了子标签，那么通过html可以正常获取，但是使用text方法只能获取文本数据
html标签设置的内容中如果包含了html标签，其可以正常解析
text标签设置的内容中如果包含了html标签，其会作为普通文本直接输出
三、事件编程
1. 基本事件
| blur(fn) | 当失去焦点时触发 |
| change(fn) | 当状态改变时触发 |
| click(fn) | 当单击时触发 |
| dblclick(fn) | 当双击时触发 |
| focus(fn) | 当获得焦点时触发 |
| keydown(fn) | 当键盘按下时触发 |
| keyup(fn) | 当键盘弹起时触发 |
| keypress(fn) | 当键盘按下时触发 |
| load(fn) | 功能与ready方法类似，页面载入后触发 |
| unload(fn) | 页面关闭时触发 |
| mousedown(fn) | 鼠标按下时触发 |
| mouseup(fn) | 鼠标弹起时触发 |
| mousemove(fn) | 当鼠标移动时触发 |
| mouseover(fn) | 当鼠标悬浮时触发 |
| mouseout(fn) | 当鼠标离开时触发 |
| resize(fn) | 当窗口大小改变时触发 |
| scroll(fn) | 当滚动条滚动时触发 |
| select(fn) | 当文本框的文本选中时触发 |
| submit(fn) | 当表单提交时触发 |
2. 事件切换
| hover(over,out) |
鼠标悬浮与鼠标离开事件 over：鼠标悬浮时所触发的事件处理程序（函数） out：鼠标离开时所触发的事件处理程序（函数） |
| toggle(fn,fn) |
点击触发事件，顺序触发 fn：当第一次单击时，所触发的事件处理程序 fn：当第二次单击时，所触发的事件处理程序 … |
3. 事件绑定
| bind(type,[data],fn) | 为元素绑定相关事件 |
| bind({type:fn,type:fn}) | 为元素绑定多个事件，要求参数是一个json格式的数据 |
| one(type,[data],fn) | 为元素事件进行一次绑定 |
| unbind([type]) | 移除事件 |
参数说明：
type：事件类型，不带'on'前缀，如click、mouseover、mouseout
[data]：事件发生时所传递的参数（了解）
fn：事件的处理程序
四、动画效果
1. 基本效果
| show() | 显示 |
| show(speed,[callback]) | 以动画效果显示 |
| hide() | 隐藏 |
| hide(speed,[callback]) | 以动画效果隐藏 |
| toggle() | 切换显示或隐藏，如果元素是显示的，则隐藏，反之，则显示 |
| toggle(switch) | 显示或隐藏开关，如为true，则显示，如为false，则隐藏 |
| toggle(speed,[callback]) | 以动画效果显示或隐藏 |
参数说明：
speed：动画速度（动画的持续时间，单位是毫秒）
如果是速度，可以是如下几个值：
speed:"slow", "normal", "fast"
callback：动画完成时，所触发的回调函数
2. 滑动效果
| slideDown(speed,[callback]) | 以动画效果向下滑动 |
| slideUp(speed,[callback]) | 以动画效果向上滑动 |
| slideToggle(speed,[callback]) | 以动画效果向上或向下滑动 |
参数说明：
speed：动画持续事件
callback：动画完成时，所触发的回调函数
3. 淡入淡出效果
| fadeIn(speed,[callback]) | 以动画效果淡入 |
| fadeOut(speed,[callback]) | 以动画效果淡出 |
| fadeTo(speed,opacity,[callback]) | 以动画效果设置元素的透明度，0全透明1不透明 |
参数说明：
speed：动画的持续事件
callback：动画完成时，所触发的回调函数
opactity：元素的透明度，0全透明1不透明，0-1半透明效果
4. 自定义动画
| animate(params,[speed])设置自定义动画 |
参数说明：
params：要求是一个json格式的数据
speed：动画的持续时间
五、文档操作
1. 内部插入
| append(content) | 在元素的尾部插入指定的内容content |
| appendTo(content) | 将匹配到的内容插入到指定内容content的尾部 |
| prepend(content) | 在元素的头部插入指定的内容content |
| prependTo(content) | 将匹配到的内容插入到指定内容content的头部 |
2. 外部插入
| after(content) | 在元素尾部插入内容content |
| before(content) | 在元素头部插入内容content |
| insertAfter(content) | 将匹配的内容插入到content元素的尾部 |
| insertBefore(content) | 将匹配的内容插入到content元素的头部 |
3. 删除操作
| empty() | 清空元素的内容，但不清除元素本身 |
| remove() | 移除元素（包括元素的内容和元素本身） |
4. 复制操作
| clone() | 克隆元素 |
| clone(true) | 克隆元素本身同时克隆元素本身的事件 |
5. 替换操作
| html() | 值替换 |
| replaceWith() | 节点替换 |
6. 包裹操作
| wrap() | 对所有匹配的元素进行单独包裹 |
| wrapAll() | 对所有匹配的元素进行统一包裹，只包裹一次 |
| wrapInner() | 对所有匹配的元素的内容进行单独包裹 |
7. 查找操作
| eq(index) | 根据元素的索引index查找元素，默认从0开始 |
| filter(expr) | 过滤元素（过滤不是移除，只是缩小查询到范围） |
| not(expr) | 匹配出指定元素外的其他元素 |
| children([expr]) | 匹配当前元素的所有子元素 |
| find(expr) | 匹配当前元素的所有后代元素 |
| next([expr]) | 匹配当前元素紧邻的下一个元素 |
| prev([expr]) | 匹配当前元素紧邻的上一个元素 |
| parent([expr]) | 匹配当前元素的父元素 |
| siblings() | 匹配当前元素的所有同级兄弟元素 |
