CSS_JS_JQ_选择器

【Css选择器】
标签选择器标签名{} 适用于所有该标签元素
ID选择器#id{} 适用于该ID元素
类选择器.类型{} 适用于所有该class元素
群组选择器选择器,选择器{} 适用于该群组选择的所有元素
后代选择器父选择器子选择器{} 适用于该父选择器下的所有子选择器
通配选择器*{} 适用于所有元素
伪类选择器
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
E:root 匹配文档的根元素。

在HTML中，根元素永远是HTML
E:nth-child(n) 匹配父元素中的第n个子元素E
E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
E:last-child 匹配父元素中最后一个E元素
E:first-of-type 匹配同级兄弟元素中的第一个E元素
E:only-child 匹配属于父元素中唯一子元素的E
E:only-of-type 匹配属于同类型中唯一兄弟元素的E
E:empty 匹配没有任何子元素（包括text节点）的元素E
:target 匹配相关URL指向的E元素
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E E::selection 匹配E元素中被用户选中或处于高亮状态的部分
E:not(s) 匹配所有不匹配简单选择符s的元素E
E ~
F 匹配E元素之后的F元素
【JavaScript 选择器】
document.getElementById(“id”) 通过id获取元素，返回元素
document.getElementsByName(“name”) 通过name获取元素，返回NodeList document.getElementsByTagName(“tag”) 通过标签获取元素，返回NodeList document.getElementsByClassName(“class”) 通过样式获取元素，返回NodeList
document.querySelectorAll(“css选择器”) 通过CSS选择器选择元素，返回NodeList document.querySelector(“css选择器”) 通过CSS选择器选择元素，返回第一个符合的元素
element.parentNode 该节点的父节点
element.childNodes 该节点的子节点
element.firstChild 该节点的第一个子节点
stChild 该节点的最后一个子节点
element.nextSibling 该节点的前一个节点
element.previoursSibling 该节点的下一个节点
element.nodeType 该节点的类型
element.nodeValue Text/Comment节点的文本内容
element.nodeName 元素的标签名
【jQuery选择器】
1、基本选择器
$(“#id”) 返回id是id的单个元素
$(“.class”) 返回类名是class的一组元素
$(“div”) 返回所有该标签元素
$(“*”) 返回所有元素
$(“div,span”) 返回所有匹配的元素
2、层次选择器
$(“e1 e2”) 返回e1元素里所有的e2元素
$(“e1>e2”) 返回e1元素里的所有子级e2元素
$(“e1+e2”) 返回e1元素的下一个同辈e2元素==》$(“e1”).next(“e2”) $(“e1~e2”) 返回e1元素后面的所有同辈e2元素==》$(“e1”).nextAll(“e2”)
3、过滤选择器
3.1基本过滤器
$(“e1 :first”) 返回所有e1元素中的第一个e1元素
$(“e1 :last”) 返回所有e1元素中的最后一个e1元素
$(“e1 :not(选择)”) 返回所有e1中不包含选择条件的元素
$(“e1 :even”) 返回所有e1中索引是偶数的元素
$(“e1 :odd”) 返回所有e1中索引是奇数的元素
$(“e1 :eq(index)”) 返回所有e1中索引等于index的元素
$(“e1 :gt(index)”) 返回所有e1中索引大于index的元素
$(“e1 :lt(index)”) 返回所有e1中索引小于index的元素
$(“e1 :header”) 返回所有e1中的标题元素
$(“e1 :animated”) 返回所有e1中正在执行的动画元素
$(“e1 :focus”) 返回所有e1中获取当前焦点的元素
3.2内容过滤器
$(“e1 :contains(text)”) 返回所有包含文本text的e1
$(“e1 :empty”) 返回所有不包含子元素的e1空元素
$(“e1 :parent”) 返回所有包含子元素的e1元素
$(“e1 :has(选择)”) 返回所有e1中包含选择条件的元素
3.3可见性过滤器
$(“e1 :hidden”) 返回所有不可见的e1元素
$(“e1 :visible”) 返回所有可见的e1元素
3.4属性过滤选择器
$(“e1[属性名]”) 返回所有拥有该属性的e1元素
$(“e1[属性名=value]”) 返回所有该属性值等于value的e1元素
$(“e1[属性名!=value]”) 返回所有该属性值不等于value的e1元素
$(“e1[属性名^=value]”) 返回所有该属性值以value开头的e1元素
$(“e1[属性名$=value]”) 返回所有该属性值以value结束的e1元素
$(“e1[属性名*=value]”) 返回所有该属性值含有value的e1元素
$(“e1[属性名|=value]”) 返回所有该属性值等于value或者value-开头的e1元素$(“e1[属性名-=value]”) 返回所有该属性用空格分隔的值中包含value的e1元素
$(“e1[条件1][条件1]”) 返回所有满足所有条件的e1元素
3.5子元素过滤器
$(“e1 :nth-child(index)”) 返回所有e1元素下的第Index个子元素
$(“e1 :nth-child(even)”) 返回所有e1元素下所有索引是偶数的子元素$(“e1 :nth-child(odd)”) 返回所有e1元素下所有索引是奇数的子元素$(“e1 :nth-child(equation)”) 返回所有e1元素下所有索引大于equation的子元素$(“e1 :first-child”) 返回所有e1元素下的第一个子元素
$(“e1 :last-child”) 返回所有e1元素下的最后一个子元素
$(“e1 :only-child”) 返回所有e1元素下的唯一子元素
3.6表单选择器
$(“f1 :enabled”) 返回所有f1中所有可用的元素
$(“f1 :disabled”) 返回所有f1中所有不可用的元素
$(“f1 :checked”) 返回所有f1中所有被选中的元素(单选/复选)
$(“f1 :selected”) 返回所有f1中所有被选中的元素(下拉列表)
4、表单选择器
$(“f1 :input”) 返回所有f1中所有的input/text/select.button
$(“f1 :text”) 返回所有f1中所有的单行文本框
$(“f1 :password”) 返回所有f1中所有的密码框
$(“f1 :radio”) 返回所有f1中所有的单选框
$(“f1 :checkbox”) 返回所有f1中所有的多选框
$(“f1 :submit”) 返回所有f1中所有的提交按钮
$(“f1 :image”) 返回所有f1中所有的图片按钮
$(“f1 :reset”) 返回所有f1中所有的重置按钮
$(“f1 :button”) 返回所有f1中所有的按钮
$(“f1 :file”) 返回所有f1中所有的上传域
$(“f1 :hidden”) 返回所有f1中所有的不可见元素
选择器中包含.#()[]等特殊符号的需使用转义符
注意选择器中的空格。