JQuery选择器

JQuery支持几乎所有CSS选择器。

绑定

-DOM: elem.addEventListener("事件名",fn);
-JQ: $("selector").事件名(fn);

修改样式

-DOM: elem.style.css属性名=值
-JQ: $("selector").css("css属性名",值)

基本选择器

-#id
-.class
-元素
-*
-群组

层次选择器

-选择器1 选择器2
-parent>child
-前一个兄弟+后一个兄弟
-前一个兄弟~之后所有兄弟

过滤选择器

通过特定的过滤规则选出所需的DOM元素

-基本过滤

也称为位置过滤，位置是 指DOM元素在jQuery元素中的下标位置从0开始。包含:

:first，:last，:not(selector)，:even（索引值为偶数），:odd（索引值为奇数），:eq(i)，:gt(i)，:lt(i)

何时使用基本过滤

只要选择查询结果中指定位置的元素时，把所有子元素，不管是不是直接子元素，都当做是一个层级处理。也就是没有了是不是直接子元素这一说。

相比较而言，first-child/last-child/nth-child(n) 是选择指定父元素下的第几个子元素。

-内容过滤（了解）

:contains(text) 比如: span:contains("购物车")
:empty 比如: span:empty 选择内容为空的span
:parent 比如: span:parent 选择包含子内容或元素的span ——是:empty的反义
:has(selector) 比如: div:has(.active) 选择包含class为active的子元素的父元素div

-可见性过滤（了解）

:visible 匹配所有可见的元素
:hidden 所有不可见元素

拓展：

有4种不可见元素:
css: display:none;
visibility:hidden;
opacity:0;
html: type="hidden"

:hidden只能匹配 display:none; 和type="hidden"

-属性过滤
属性过滤——其实就是css中的属性选择器
[属性名] 匹配包含指定属性的元素
[属性名=值] 匹配指定属性的值为指定值得元素
[属性名!=值] 匹配指定属性的值不是指定值得元素
[属性名^=值] 匹配指定属性的值以指定内容开头的元素
[属性名$=值] 匹配指定属性的值以指定内容结尾的元素
[属性名*=值] 匹配指定属性的值包含指定内容的元素
[属性选择器1][属性选择器2]... 匹配同时满足属性选择器1，,2的元素
-子元素过滤
选择在父元素下作为指定位置的子元素， 位置相对于父元素而言。
:first-child :last-child :nth-child(n) :only-child
vs 位置过滤: 选择查询结果集合中指定下标位置的元素，和元素在其父元素下的位置无关
-表单过滤
利用表单中元素标签和type属性选择表单中的元素 ，只要选择表单中的元素，都要用表单元素选择器，代替DOM中的form.name
:input 选择所有input textarea select button
vs input: 仅选择input元素
:text 选择type为text的元素
:password
:radio
:checkbox
:submit
:reset
:button
:file
:hidden 不仅选择type="hidden"，还选择display="none"
:image 选取所有图形按钮

-表单属性过滤选择器:

:enabled 选择所有可用的元素
:disabled 选择所有不可用的元素
:checked 选择被选中的checkbox
:selected 选择被选中的option