我的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()	匹配当前元素的所有同级兄弟元素