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()


你可能感兴趣的:(JQuery学习知识梳理)