JQuery学习知识梳理

一、JQuery选择器

    jQuery选择器中可分为：基本选择器、层次选择器、过滤选择器、表单选择器。

1、基本选择器

#id	根据 id 选择一个元素
.class	根据给定的类选择元素集合
element	根据给定的标签选择元素集合
*	选择所有的元素
selector1，selector2.。。。。。	将每个选择器选择的元素合并在一起返回

2、层次选择器

ancestor descendant	根据祖先元素选择所有的后代元素
parent > child	根据父元素选择所有的子元素
$(selector).next()	选择元素的相邻元素
$(selectot).nextAll()
$(selector).sibling()	选择同层的所有元素

3、过滤选择器

    过滤选择器中可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

（1）简单过滤选择器

基本格式为$("tbody tr:eq(0)")

:first 或者 first()	选择第一个元素
:last 或者 last()	选择最后一个元素
:not(selector)	过滤掉除给定选择器的所有元素
:even	选择索引值为偶数的元素，从0开始
:odd	选择索引值为基数的元素，从0开始
:eq(index)	获取索引值指向的元素
:gt(index)	获取大于索引值的元素
:lt(index)	获取小于索引值的元素
:header	获取所有标题类型的元素如：h1，h2
:animated	获取正在执行动画效果的元素

（2）内容过滤选择器

:contains(text)	获取包含给定文本的元素
:empty()	获取所有不包含子元素或者文本的内容为空的元素
:has(selector)	获取含有选择器所匹配的元素的元素
:parent	获取含有子元素或者文本的元素

（3）可见性过滤选择器

:hidden	获取所有不可见元素，或者type为hidden的元 素。包括display：none
:visible	获得所有可见的元素

（4）属性过滤选择器

[attribute]	选择包含给定属性的元素
[attribute = value]	选择给定属性值为value的元素
[attribute != value]	选择给定属性值不为value的元素
[attribute ^= value]	选择给定属性值以value开头的元素
[attribute $= value]	选择给定属性值以value结束的元素
[attribute *= value]	选择给定属性值含有value串的元素
[selector1][selector2][selectorN]	复合属性选择

（5）子元素过滤选择器

:nth-child(eq|even|odd|index)	选择每个父元素下的特定位置元素，从1开始
:first-child	选择每个父元素下的第一个位置元素，从1开始
:last-child	选择每个父元素下的最后一个位置元素，从1开始
:only-child	选择只有一个子元素的元素

（6）表单对象属性过滤选择器

:enable	获得表单中所有属性为可用的元素
:disable	获得表单中所有属性为不可用的元素
:checked	获得表单中所有被选中的元素
:selected	获得表单中所有被选中的option的元素

4、表单选择器

:input	:text	:password	:radio	:checkbox
:submit	:image	:reset	:button	:file

二、JQuery 操作 DOM 

attr(name)	获取元素的属性值
attr(key,value)	给元素的属性赋值
attr(key,function(index))	index 为一个索引号，绑定一个函数，且该函数返回一个字符串
removeAttr(name)	删除属性
html()	获取元素的html内容
html(content)	给元素的html设置内容
text()	获取text的内容
text(content)	给text设置内容
val().join(",")	获取val的值集，并且以","隔开
css(name,value)/css({name1:value1,name2:value2})	直接设置元素的样式值‍
addClass(class)	增加CSS类别 ‍
toggleClass(class)	切换样式类别‍
removeClass(class)	删除类别‍
append(content)	追加内容‍
prepend(content)	‍前面插入内容
appendTo(selector)/prependTo(select)	追加到selector指定的元素/或者前面插入到指定元素
append(function(index,html))
prepend(function(index,html))
after(content/function)	content外部插入元素后面
before(content/function)	content外部插入元素前面
insertAfter(selector)	外部插入到指定元素后面
insertBefore(selector)	外部插入到指定元素前面
clone()	复制本身
clone(true)	复制本身和其事件
replaceWith(content)	用content来替代自己
replaceAll(selector)	用自己替换selector的东西
wrap(html/elem/function)	被content包裹 如：$("div").wrap("<b></>")，<b><div></div></b> <b><div id="div2"></div></b>
unwrap()	移除父元素或者包裹标签
wrapAll(html/elem/function)	如：$("div").wrap("<b></>")， <b><div></div><div id="div2"></div></b>
wrapInner(html/elem/function)	用于DOM包裹子元素
each(function(index){})	遍历i子元素
remove()	删除
empty()	清空

三、JQuery常用事件

keydown()	focus()
toggle()	hover()
keyup()	blur()
keypress()	mouseover()
click()	mouseout()