js css jquery选择器
好多时候我们明明写了样式；但是就是不出来，简单的不能再简单的样式都没有出来，Way？？？原来我都没有拿到这个节点；好吧，让我们来总结下选择器吧！稳稳地拿到节点后再嘚瑟样式。
一.原始JS(Document 对象)选择器.
id选择器:document.getElementById("test");
name选择器:document.getElementsByName("test");
节点选择器:document.getElementsByTagName("p");
class选择器:document.getElementsByClassName("test");
二、CSS 选择器.
1.CSS 选择器分组.
h2, p {color:gray;}
2.CSS 后代选择器.
h1 em {color:red;}
3.CSS 子元素选择器.
h1 > strong {color:red;}
4.CSS 相邻兄弟选择器.
h1 + p {margin-top:50px;}
5.CSS 属性选择器.
a[href] {color:red;}
| 选择器 | 描述 |
|---|---|
| [ [attribute ]] | 用于选取带有指定属性的元素。 |
| [ [attribute = value ]] | 用于选取带有指定属性和值的元素。 |
| [ [attribute ~= value ]] | 用于选取属性值中包含指定词汇的元素。 |
| [ [attribute= value ]] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [ [attribute ^= value ]] | 匹配属性值以指定值开头的每个元素。 |
| [ [attribute $= value ]] | 匹配属性值以指定值结尾的每个元素。 |
| [ [attribute *= value ]] | 匹配属性值中包含指定值的每个元素。 |
6.CSS 伪类
| 描述 | CSS | |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
7.CSS 伪元素.
| 描述 | CSS | |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
三、jQuery 选择器.
1.jQuery 元素选择器.
id选择器: $("#test");
class选择器: $(".test");
节点选择器: $("p");
2.jQuery 属性选择器.
$("div[id]"); 选择所有含有id属性的div元素
$("input[name='like']"); 选择所有的name属性等于'like'的input元素
$("input[name!='like']") ;选择所有的name属性不等于'like'的input元素
$("input[name^='like']"); 选择所有的name属性以'like'开头的input元素
$("input[name*='like']");选择所有的name属性包含'like'的input元素
......
3.jQuery CSS 选择器.
$("p").css("background-color","red");
4.jQuery 表单选择器.
| :input | $(":input") | 所有 表单 元素 |
|---|---|---|
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
备注:
$(":input")和$("input")的区别?.
$("input")是节点选择器,表示选择所有input节点.
$(":input")是表单选择器,表示选择所有表单元素,包括textarea,select.
jquery选择器空格,大于号,加号和波浪号的区别?
空格：$('parent childchild')表示获取parent下的所有的childchild节点（所有的子孙）。
大于号：$('parent>child')表示获取parent下的所有child的儿子( 第一代)。
加号：$('pre+nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法
波浪号：$('pre~brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。
总结：
其实我们掌握了规律也就很好记住了；能熟练运用选择器在开发中对我们很有帮助；
我记得不知道谁说过一句话前端不是理科是文科，就是要记东西；其实除了js的一些逻辑，确实需要大量的记忆东西，干什么都不是一蹴而就的，持之以恒就没问题。
